I’m making a chat component and I want about the same things. Did it like this: <FlatList ref={ref => this.flatList = ref} onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})} onLayout={() => this.flatList.scrollToEnd({animated: true})} … /> Keyboard popping up triggers a layout, so that’s fixed. New chat messages arriving trigger content changes, so it also scrolls to the bottom … Read more
adding flexGrow: 0 to the flatList style worked for me, so it will be: flatList: { height: 50, backgroundColor: ‘red’, flexGrow: 0 }
“VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor” This is a warning that the elements of the list are missing keys. These unique keys are what allow the VirtualizedList (which is what FlatList is built on) to track items and are really important … Read more
The correct syntax is this.flatListRef.scrollToOffset({ animated: true, offset: 0 }); and you can also use scrollToIndex
I know it’s an old question but people googling it might still appreciate it. import { FlatList, ListRenderItem } from ‘react-native’ /* . . . */ renderItem: ListRenderItem<Emoticon> = ({ item }) => ( <ListItem title={item.name} checkmark={item.checked} /> );
UPD. thanks to @ch271828n for pointing that onViewableItemsChanged shouldn`t be updated You can use FlatList onViewableItemsChanged prop to get what you want. class Test extends React.Component { onViewableItemsChanged = ({ viewableItems, changed }) => { console.log(“Visible items are”, viewableItems); console.log(“Changed in this iteration”, changed); } render () => { return ( <FlatList onViewableItemsChanged={this.onViewableItemsChanged } viewabilityConfig={{ … Read more
Set bottom padding to the <FlatList> content container: <FlatList contentContainerStyle={{ paddingBottom: 20 }} />
I was previously seeing this error. After optimizing my code, I no longer see it. I figured out the problem by adding console.log() statement to the render() function of the Component that creates the FlatList, and the function that renders each item in the List. I noticed that my code was previously re-rendering the entire … Read more
for your case use flex: 1/2 therefore: Your item should have flex of 1/(number of columns) if you have 3 columns your item should have flex:1/3
Use the extraData property on your FlatList component. As the documentation states: By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show … Read more