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}}
/>
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'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}
/>
My application has the error "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.", but I don't know how to solve it. In ScrollView I have two Flatlists and a header.
Screen: Flatlists inside my ScrollView
My code:
const renderItem = ({ item }) => <AssuntoCard item={item} />;
return (
<Container> // SCROLLVIEW
<TouchableOpacity
>
<Close />
</TouchableOpacity>
<Titulo>
<Bold>O que você deseja</Bold>
{"\n"}estudar hoje?
</Titulo>
<Subtitulo>Selecione um capítulo: </Subtitulo>
<Linhas> // View with two columns
<Colunas> // Column 1 for even items
<FlatList
scrollEnabled={false}
data={card.filter((item) => item.id % 2 == 0)}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</Colunas>
<Colunas> // Column 2 for odd items
<FlatList
scrollEnabled={false}
data={card.filter((item) => item.id % 2 !== 0)}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</Colunas>
</Linhas>
<Modal>
// ...
</Modal>
</Container>
);
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} ....
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.