I have flatlist with enabled horizontal option like page, it work well when is portrait or landscape load. When mode are changed width and height are mess up. I try to calculate width and height in addEventListener. Is there some better solution. Can re render flatlist without losing state and props. This is getItemLayoutPot where define layout.
getItemLayout = (data, index) => (
{length: this.state.width, offset: this.state.width * index, index}
)
<FlatList
onViewableItemsChanged={this.onViewableItemsChanged }
viewabilityConfig={{
itemVisiblePercentThreshold: 50
}}
ref={ref => this.flatListRef = ref }
data={dataar}
horizontal={true}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
showsHorizontalScrollIndicator={false}
removeClippedSubviews={false}
initialNumToRender={20}
maxToRenderPerBatch={10}
updateCellsBatchingPeriod={50}
initialScrollIndex={this.state.numPage}
getItemLayout={this.getItemLayout}
pagingEnabled={true} ....
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 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 am using FlatList for scrolling horizontally images.
on Android, when I scroll horizontally the items are appearing, but they appear with a fade-in animation.
how can I remove the animation?
<FlatList
showsHorizontalScrollIndicator={false}
initialNumToRender={5}
horizontal={true}
data={images}
snapToAlignment={"start"}
snapToInterval={210}
decelerationRate={"fast"}
keyExtractor={(item) => item.key}
renderItem={(item)=>renderImage(item,selectedImageHandler)}/>
const renderImage = (itemData:{ index:number, item:ImageProps}, selectedImageHandler:(index:number)=>void) => {
return (
<TouchableOpacity activeOpacity={0.8} onPress={()=>selectedImageHandler(itemData.index)}>
<Image style={styles.image} source={{uri:itemData.item.key}}/>
</TouchableOpacity>
)
}
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}}
/>