I am trying to rendering the value from API, i can see array if i console the values, but not able to see it from Flatlist.
API fetch line is here
i think this is where i am making mistakes
console output array
Help me please,
Data returned from the backend is an array of objects. Refactor renderItem props as below.
<Flatlist
keyExtractor={(item) => item.id}
data={data}
renderItem={({ item }) => (
<>
<Text>{item.date}</Text>
<Text>{item.date_gmt}</Text>
</>
)}
/>
Well, you are doing Two things wrong here. Let's start with the first one which is the loading part.
NOTE: I WILL BE USING YOUR EXISTING FLATLIST PROPS AS ...otherProps.
Your are conditional rendering the whole Flatlist component, instead you can use ListEmptyComponent of flatlist to render loading or empty list views.
<Flatlist
...otherProps
ListEmptyComponent={() => {
if(isLoading){
return <ActivityIndicator/>
}
}
/>
Flatlist is a Pure Component, which means it needs a way to know if it should re-render, luckily we have an extraData prop which is for exactly this purpose. Taking from the previous example.
<Flatlist
...otherProps
extraData={data}
ListEmptyComponent={() => {
if(isLoading){
return <ActivityIndicator/>
}
}
/>
PS: you should really checkout the documentation for more information here
https://reactnative.dev/docs/flatlist#listemptycomponent
Related
Basically, I have a list of items (with images) inside a single Card (custom component). Because the rendering of those items is slow, I wanted to use a FlatList to render them incrementally.
Unfortunately, I get the expected error
VirtualizedLists should never be nested inside plain ScrollViews ...
But I don't actually want to use a ScrollView inside the Card. I just want to render a few Items in a single Card, which should change its size to fit all the items.
Setting scrollEnabled={false} on the FlatList still shows the error above.
Using the ListHeaderComponent and ListFooterComponent props is not an option, because the content above and below should NOT be rendered inside the Card.
Here is a minimal example of what I mean:
const Comp = () => {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic">
<Text>Header</Text>
<Card>
<FlatList
data={data}
renderItem={({ item }) => (
<Image source={{uri: item.localImageUrl}}/>
)}
keyExtractor={(item) => item.id}
scrollEnabled={false}
initialNumToRender={0}
maxToRenderPerBatch={3}
contentInsetAdjustmentBehavior='automatic'
/>
</Card>
<Text>Footer</Text>
</ScrollView>
);
};
What's interesting though, that aside from the error - I get the result I expected, and I could technically hide that error and ignore it, but that does not seem like the recommended approach.
Important: I am not specifically looking for a FlatList solution. It could technically be any Component that renders items incrementally in a non-blocking way.
The important point with a Flatlist is the reusing of cells so that not all components need to be rendered at the same time. So scrolling is an important part of this. On the other hand two scrollable components inside eachother will make it impossible for the system to know which component should be scrolled.
If there are only 3 items and it should not be scrollable you can just include a list of items inside the Scrollview like this:
const Comp = () => {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic">
<Text>Header</Text>
<Card>
{ data.map((item, index) => {
return (
<Text key={index}>{item.title}</Text>
);
}) }
</Card>
<Text>Footer</Text>
</ScrollView>
);
};
How we can implement onStartReached in FlatList ?
I used horizontal list.
I have some idea of using onScroll using,but I thing this not properly.
Seems onRefresh could do the job.
https://reactnative.dev/docs/flatlist#onrefresh
it must be start reached and pull to trigger onRefresh.
If you need a infinite scroll i used this
<FlatList
data={data}
renderItem={({ item, index }) => {
return (
// Component to render
);
}}
keyExtractor={(item) => item.uid}
onEndReached={() => //Load more data}
onEndReachedThreshold={0.5} // "Sleep" time
initialNumToRender={10} // initial number to items
/>
otherwise the way to use onStartReached is identical to onEndReached
Lets say I a have FlatList component as follows,
<FlatList
ref={ref => this.flatListRef = ref}
data={this.state.data}
renderItem={({ item, index }) => this.renderLeaveRequests(item, index)}
keyExtractor={item => `${item.id}`}
onEndReached={this.loadMore}
/>
I Want FlatList to go to some particular item based on offset and I achieved like follows,
componentWillMount() {
this.flatListRef.scrollToOffset({ offset: scrollPosition, animated: false });
}
If you observe I am calling scrollToOffset in componentWillMount which means before rendering the component. Here my doubt is how come reference of FlatList is available before rendering it.
Does reference of any component available before even rendering it at least once?
No, because you assign your ref in the render, this isn't avalaible before rendering.
Use componentDidMount instead
How can I create an flatlist and add items to it inside a function not a class in react native?? all of the examples online are using classes and I need to use it inside a function !!
I found an example of a FlatList in the React Native docs that is using a functional component:
https://reactnative.dev/docs/flatlist
If you just want the code check out the same example on snack:
https://snack.expo.io/?session_id=snack-session-R6Nsz_Qm1&preview=true&platform=web&iframeId=uetjvvask3&supportedPlatforms=ios,android,web&name=flatlist-simple&description=Example%20usage&waitForData=true
I hope it helped :)
Same as with any other component, there's not much difference between using a FlatList inside a class vs a function. Only the state handling changes a little bit.
The code below will render all items, you'll be able to press on any of them to duplicate the item which should then show up at the bottom of the list.
export const FlatListScreen = props => {
const [items, setItems] = useState([1, 2, 3, 4, 5]);
function duplicateItem(toDuplicate) {
setItems(prev => [...prev, toDuplicate]);
}
return (
<FlatList
data={items}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => duplicateItem(item)}>
<View>
<Text>
{item}
</Text>
</View>
</TouchableWithoutFeedback>
)}
/>
);
}
I am having say about 100 elements in my array/object
I am using FlatList to display it
<FlatList
data={this.props.redditCryptoNews}
maxToRenderPerBatch={5}
renderItem={({index, item}) => {
return (
<Text style={RedditList}>{item["data"]["title"]}</Text>)}} />
Now, I just want to display just 10 elements in my flatlist instead of displaying all 100 elements
For some reason, I think Facebook haven't done good job with its react-native documentation which makes it sort of hard for me to comprehend
[Question:] How Can I achieve it?
Okay, It was stupid of me.
We can simply slice the data we are passing.
<FlatList
data={this.props.redditCryptoNews.slice(0,5)}
maxToRenderPerBatch={5}
renderItem={({index, item}) => {
return (
<Text style={RedditList}>{item["data"]["title"]}</Text>)}} />
Notice .slice(0,5) here
data={this.props.redditCryptoNews.slice(0,5)}