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

is this for ios or android? – Sarantis Tofas Jan 09 '18 at 10:43 — Sarantis Tofas, Jan 09 '18 at 10:43
just asking because `contentOffset ` is for ios only – Sarantis Tofas Jan 09 '18 at 14:32 — Sarantis Tofas, Jan 09 '18 at 14:32

score 7 · Answer 1 · answered Feb 28 '18 at 12:31

7

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

answered Feb 28 '18 at 12:31

needsleep

2,685
10
16

contentContainerStyle is working for this situation. – eemrah Apr 04 '19 at 15:01

Sarantis Tofas · Answer 2 · 2018-01-09T15:14:29.503

3

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 }

edited Jan 09 '18 at 15:14

answered Jan 09 '18 at 14:57

Sarantis Tofas

5,097
1
23
36

score -2 · Answer 3 · answered Apr 12 '19 at 14:59

-2

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

answered Apr 12 '19 at 14:59

user1047504

578
7
14

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

3 Answers3