I have below simple FlatList:
<FlatList
data={Images}
renderItem={({item}) => <Item item={item} />}
keyExtractor={item => item.index}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
onScroll={onScroll}
decelerationRate={-100000000000000}
scrollEventThrottle={16}
/>
How to get current active index of the FlatList as switching between different list item?
You can pass a callback to the onViewableItemsChanged prop to accomplish this.
const onViewableItemsChanged = ({ viewableItems, changed }) => {
console.log(viewableItems);
console.log(changed);
};
// ...
<FlatList
// ...
onViewableItemsChanged={onViewableItemsChanged}
/>
Docs here: https://reactnative.dev/docs/flatlist#onviewableitemschanged
Blog post with example: https://thewebdev.info/2022/02/19/how-to-get-the-index-of-the-currently-visible-item-in-a-react-native-flat-list/
Related
I'm using flatlist to show a feed of posts (like tiktok), the issue is that sometimes is showing up a part of the second post instead of scroll down to it. See the picture below:
That issue happens when I'm scrolling down faster.
Flatlist code:
<FlatList
showsVerticalScrollIndicator={false}
data={videos}
keyExtractor={(item, index) => index.toString()}
onEndReachedThreshold={3}
onEndReached={() => {
if (!isFetching) {
debouncedFetchMore();
}
}}
snapToInterval={PICTURE_HEIGHT}
disableIntervalMomentum
viewabilityConfig={viewabilityConfig}
onViewableItemsChanged={onViewableItemsChanged}
onRefresh={() => getPosts('video', FetchMode.REFRESH)}
refreshing={false}
//Optimization
renderItem={renderItem}
removeClippedSubviews
initialNumToRender={1}
maxToRenderPerBatch={2}
windowSize={2}
// Scrolling fixes
decelerationRate="fast"
snapToAlignment="start"
overScrollMode="never"
bounces
scrollEventThrottle={8}
getItemLayout={(_, index) => ({
length: PICTURE_HEIGHT,
offset: PICTURE_HEIGHT * index,
index,
})}
pagingEnabled
ref={refFlatList}
/>
I have a Horizontal FlatList and in RTL view the FlatList just constantly call onEndReached method but that's not the case in LTR view.
It's a big issue that's not solved https://github.com/facebook/react-native/issues/19979
Did anyone try to find a workaround for this issue ?
Here is my implementation:
<FlatList
horizontal
directionalLockEnabled
data={recommendedPosts}
onRefresh={handleRefresh}
refreshing={isRefreshing}
onEndReachedThreshold={0.5}
onEndReached={onEndReached}
keyExtractor={(item) => item?._id}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
ListHeaderComponentStyle={styles.footerStyle}
ListFooterComponentStyle={styles.footerStyle}
renderItem={({ item, index }) => (
<AdGridCard
ad={item}
containerStyle={styles.recommendedCard}
onPress={() => goToDetails(item?._id, index)}
/>
)}
contentContainerStyle={styles.contentContainerStyle}
getItemLayout={(d, index) => {
return { length: hp(250), offset: index * hp(250), index };
}}
ListFooterComponent={<LoadingComponent isLoading={loading} />}
ItemSeparatorComponent={() => <View style={styles.separator} />}
/>
I'm new in React Native and I've FlatList with some items I want to use code like when I click any item on the flat list a screen open and shows data of that item related.When I click on another item same screen open but with data related to that item.Means resuability.
You have to get the values in renderItem. renderItem is called for each and every item flatlist renders and simultaneously you will get the index also of each item.
<FlatList
style={styles.FlatListStyle}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={this.state.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<Button title = 'hello'
onPress = {() =>alert(item)}
/>
);
}}
/>
<FlatList
data={data}
renderItem={({item}) => (
<Button onPress={() => navigate('Details', {data: item})} />
)}
/>
For navigation purpose, You've to use react-navigation package. Then onPress you can simply call navigation.push method to navigate to a different or same stack(screen).
e.g
navigation.push("SameScreen",{newData:"value"})
I have inverted vertical FlatList in my chat app, which shows newest message in bottom and oldest message in top (likes all other chat applications)
The problem is when I want to add new messages to bottom of my list, FlatList automatically jump to bottom-end of the list!
All I need is to prevent scrolling in this situation
Here is my FlatList:
<FlatList
inverted
style={{flex: 1}}
data={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
And here is the code to add newest messages to list
const data = [ ...newMessages, ...this.state.data ];
this.setState({ data });
Your case look simple but you are adding new message at top then reverse it to bottom last position using inverted flag
Could remove inverted flag and add new item at last simply const data = [...this.state.data, ...newMessages];
<FlatList
style={{flex: 1}}
data={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
const data = [...this.state.data, ...newMessages];
this.setState({ data });
I hope this will work
Put this in the view
<FlatList
data={this.state.data}
ref={ref => {
this.flatListRef = ref;
}}
initialScrollIndex={0}
keyExtractor={item => item.id}
extraData={this.state.refresh}
renderItem={({item, index}) => {
// animation={animation}
return (
<ListItem
inAnimation={inAnimation}
outAnimation={outAnimation}
duration={duration}
easing={easing}
isDeleted={item._isDeleted}
id={item.id}
item={item}
/>
);
}}
`/>`
Run this in a function
this.flatListRef.scrollToIndex({
animated: true,
index: nextProps.indexScroll})
});
You should use a workaround to achieve this. If you check the documentation for FlatList (which extends the props of ScrollView), you'll see that all you need to do is set the scrollEnabled prop to false to disable scrolling. How and where you choose to do this will be up to you since you didn't really post a lot of code. A simple way to handle this would be to use state:
<FlatList
...
scrollEnabled={this.state.scrollEnabled}
/>
In your case you could change the state when the new data is being loaded and change it back when it is rendered.
There is an open issue on Github about this case.
I am new in react native, and am confused about the difference between FlatList and VirtualizedList.
So,
What are the differences between FlatList and VirtualizedList ?
When should I use each ?
The <FlatList> is a performant interface for rendering basic, flat lists.
On the other side, the <VirtualizedList> is a base implementation of the <FlatList> and <SectionList> components, which are also better documented. In general, <VirtualizedList> should only really be used if you need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays.
FlatList example:
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
VirtualizedList example:
const App = () => {
return (
<SafeAreaView style={styles.container}>
<VirtualizedList
data={DATA}
initialNumToRender={4}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.key}
getItemCount={getItemCount}
getItem={getItem}
/>
</SafeAreaView>
);
}
More info:
https://reactnative.dev/docs/virtualizedlist
https://reactnative.dev/docs/flatlist