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

Question

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

Millicent

is this for ios or android? – Vendor

@Akis ios, is it different? – Millicent

just asking because contentOffset is for ios only – Vendor

Answer 1

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}
/>

Nucleolated

contentContainerStyle is working for this situation. – Deliver

Answer 2

contentOffset accepts an object of type {x: 0, y: 0}:

In your case and if the list is vertical scrolling you should only set y

<FlatList
  onScroll={this.handleScroll}
  contentOffset = {{x: 0, y: your_value}}
/>

I haven't test this code but some users complain that setting the value will not work so they set the contentOffset value programmatically.

event.nativeEvent.contentOffset = { x: your_value }

Vendor

Answer 3

You may use ScrollToOffset(params)

https://facebook.github.io/react-native/docs/flatlist#scrolltooffset

or use ScrollTo(params)

https://facebook.github.io/react-native/docs/scrollview#scrollto

Disaffection