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}
/>
Related
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/
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 creating a FlatList with 20,000 records and a question came up.
What is the recommended limit to be loaded at once into a FlatList?
And after that is it recommended to use an Infinite Scroll?
Loading like 20 items at once and then infinite load is a good way. But you need to optimize your flatlist (remove clipped subviews, set item layout manually, handle batchs, ...)
More infos https://reactnative.dev/docs/optimizing-flatlist-configuration
Example
<FlatList
ref={(ref) => {this.searchListRef = ref}}
data={this.state.search_list}
renderItem={this.renderSearchItem}
keyExtractor={(item, index) => index}
onEndReached={(infos) => this.searchMore(infos)}
onEndReachedThreshold={0.8}
numColumns={2}
removeClippedSubviews
initialNumToRender={6}
updateCellsBatchingPeriod={100}
maxToRenderPerBatch={6}
windowSize={10}
onScroll={(e) => this.handleSearchScroll(e.nativeEvent.contentOffset.y)}
getItemLayout={(data, index) => (
{length: 316, offset: 316 * index, index}
)}
ListEmptyComponent={<View>...</View>}
ItemSeparatorComponent={() => <View style={{marginBottom: 10}}></View>}
ListFooterComponent={<View>...</View>}
ListHeaderComponent={<View>...</View>}
/>
I used the FlatList for creating the horizontal swipeable list. but when I want to change the card I saw this error. when I refresh the app everything is okay, just when I want to change the card (swipe) I have this error message.
<FlatList
data={cards}
renderItem={ ({item}) => <AccountCard cardInfo={item}/>}
initialScrollIndex={0}
horizontal={true}
showsHorizontalScrollIndicator={false}
keyExtractor={ (item, index) => index.toString()}
snapToInterval={ deviceWidth - wp('16.5%')}
snapToAlignment={"start"}
onViewableItemsChanged={({viewableItems, changed})=>{
changed[0].isViewable && setSelectedSlide(changed[0].item.id);
}}
viewabilityConfig= {{viewAreaCoveragePercentThreshold: 80}}
/>
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.