How can I set the content offset of a FlatList in React Native?

reactjs react-native react-native-flatlist contentoffset
MendyK picture MendyK · Jan 9, 2018 · Viewed 8.1k times · Source

I know that we can get the offset with

render() {
   return <FlatList
            onScroll={this.handleScroll}
          />
}

handleScroll = (event) => {
//get offset by using   
//event.nativeEvent.contentOffset 
}

But I'm not sure how to set it

Answer

needsleep picture needsleep · Feb 28, 2018

Unfortunately contentOffset didn't work for me. I ended up using contentContainerStyle that I found in the ScrollView documentation and it works great.

<FlatList 
  contentContainerStyle={{ paddingTop: 340 }} 
  data={data}
/>

Related questions

How to re-render flatlist?

Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it? My goal is to update the text value when user press button ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> …

Read More
VirtualizedList: You have a large list that is slow to update

I use FlatList with large number of items. I get following alert from Expo XDE. VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices …

Read More
React FlatList renderItem

I've seen this sort of syntax in JS before and I am just curious how it works. In the React Native Docs for FlatList, an example calls renderItem. How does this._renderItem know that what individual list item it is …

Read More