I was creating a quiz app using react native. For that I need 10 screens with different questions and options(i.e. same layout. Only questions and options are changed). So for achieving this, is there any method to map through each element of array of questions and display it in each screen respectively ? Or do I need to achieve it manually? 🤔 (I am using stack navigator for navigation)
Pass current question number as index when you navigation to question/answers screen - first time pass 0.
Then show question like QuestionArray[index]. And when you want to go to next question just increase index by 1 and push same screen to navigation with index and so on. You can check current index value before pushing the screen to navigation stack that if value is already 9, calculate the result and replace stack with result screen
You can use Flatlist to map through each element
<Flatlist
data={QuizArr}
renderItem={({ Ques, Ans, onNext })=><RenderQuiz {...{ Ques, Ans, onNext }} />}
keyExtractor={item => item.id}
/>
RenderQuiz=({ Ques, Ans, onNext })=>{
return(
// Your Code
)
}
Related
I have an API that returns me arrays. I implemented the code to search 3 of them like this:
{response !== undefined &&
search !== "" &&
response.InsuranceServiceList.filter((insurance) =>
insurance.Name.replace(/ي/g, "ی", /ا/, "آ").includes(search)
)
.slice(0, 3)
.map((filtered, i) => (
<EachInsurance
filtered={filtered}
key={i}
styles={scss}
DatePresence={DatePresence}
IdInsurance={IdInsurance}
TimePresence={TimePresence}
/>
))}
whenever user types something in search box, 3 of these matching arrays will get rendered.
but I have two problems with selecting them.
this is each insurance component:
<Container
className={styles.eachInsurance}
style={{
borderRight: `${selectInsurance ? "20px" : "1px"} solid #fcc4de`,
}}
>
<div
onClick={() => {
setSelectInsurance((prev) => !prev);
setCount(0);
}}
>
<p className={styles.NameService}>{filtered.Name.replace(/ي/g, "ی")}</p>
</div>
</Container>
whenever user clicks on element. it will have pinkish border with the width of 20px.
the problem is, when I type another thing to search another item. it shows that Item selected.
just like the clicked div is still there but the content inside of it has changed.
how can I prevent this problem?
I thought it would render a new div per each array. but it wasn't.
the second problem is search itself. if you delete what you've write completely (emptying search bar). everything you have selected before will get removed and you will need to reselect it again.
I want to prevent this too.
You need to pass the id from your back end to your front end. then add a border based on the ids you pass to the selectInsurance, in that way you will know if the element change the border will be gone.
I think for your second problem you can add a new state that will reserve the whole object of the insurance and you first render from that array so every time you re-render your search array your selected insurance array will stay the same so they will remain in your page
I am creating an React project where i am rendering the data by calling the api, and api every time gives me array of data of length 10. i am using react-infinite-scroll-component for using infinite scrolling functionality. i want to load data everytime whenever i scroll at the half part of the screen i don't want to show a loader on my screen. can anybody help me on it.
<InfiniteScroll
dataLength={data.length}
next={fetchMoreData}
hasMore={true}
loader={
<CircularProgress/>
}
>
{data.map((item, index) => {
return <Card data={item} key={index} />;
})}
</InfiniteScroll>
this is my code of infinite scrolling, i tried changing the dataLength props , but it didn't worked.
I think you may want to use the scrollThreshold property as that defines when next will be called.
You can pass a floating point number e.g 0.5 or a string e.g "200px" in order to define this.
If you are looking to remove the loader just omit that prop.
Sourced from list of props here: https://www.npmjs.com/package/react-infinite-scroll-component
I'm using react-countup plugin to animate a counter from 0 to identified number and i wanted to make this counter works only once on scroll when it's revealed first time..
and I used this code using react visibility censor
<CountUp start={0} end={4.8} duration={2} decimals={1}>
{({ countUpRef, start }) => (
<VisibilitySensor onChange={start}>
<span ref={countUpRef} />
</VisibilitySensor>
)}
</CountUp>
but then it's happening every time it's revealed in the page and i want it to happen only the first time
why don't you try setting a variable to local storage that you reference if viewedOnce is true or false localStorage
How do I code this functionality in react-native?
eg. In Instagram when you go to your followers' page, you can view a whole list. You can tap on any of them and you will navigate to that user's specific profile.
I was wondering if it has something to do with React-Navigation like passing some unique id or code, but I am still unclear, please help me out.
P.S I am using cloud firestore from firebase as my database.
The way I would do this is as follows:
1) Create a FlatList:
<FlatList
data={//list of users}
renderItem={this.renderList}
keyExtractor={(item, index) => index.toString()}
/>
2) Every element in the FlatList is a custom component. Navigation props is also passed to the component along with the data. The handler function for renderItem is given below:
renderList = ({ item }) => (
<UserSummary data={item} navigation={this.props.navigation} />
);
3) UserSummary is in fact a Touchable element (say Touchable Opacity) and the onPress event handler for that is given below:
onPress={() =>
props.navigation.navigate("UserDetailsScreen", {
userDetails: props.data
})
Note that I have also passed some data along with the navigation. Let's say, it's some userID that is unique. This information can be used in the UserDetailsScreen to render the details of the user.
Hope this will give you an idea.
you can refer this link. You can pass id as parameter as this.props.navigation.navigate('RouteName', { /* params go here */ }) .
I am using FlatList to render my list, each list item is clickable; however, when I click the item, it does not work until everything is loaded.
It seems like while the other items are still rendering, you can not perform an action or event until everything is fully loaded.
Here is my code:
return (
<FlatList
refreshing={this.props.refreshLoading}
horizontal={false}
initialNumToRender={20}
maxToRenderPerBatch={20}
showsVerticalScrollIndicator={true}
numColumns={2}
onEndReachedThreshold={0.1}
bounces={true}
keyExtractor={(item) => item}
data={userList}
renderItem={(item) => {
return (
<UserCard
index={item.item[1]}
userInfo={item.item[1]}
contentSize={this.state.contentSize}
navigation={this.props.navigation}/>
)
}}
onEndReached={this.onLoadMore}
onRefresh={this.onRefresh}
/>
);
Is there a proper way to handle it?
This is because the Javascript thread is blocked by the rendering on the screen. Once the render of the batch of rows is complete then it will open up the thread for the click event. This rendering happens in batches, which can be tweaked.
See this issue on Github.
Basically you can play with the initialNumToRender and maxToRenderPerBatch parameters on the list until you get something that works for you, and doesn't look jumpy when rendering (it will render the list incrementally which might look weird if the values are too low - called fill rate).
You can read about these parameters in the react-native docs:
initialNumToRender
maxToRenderPerBatch