How to scroll into View in React Native?

Question

I'm developing an app using React Native. There, I want to scroll into a View when I press a button. I've tried something like this.

render() {
  return(
    <View ref={field => this.myView = field} >
      //something inside the view
    </View>
  )
}

then, tried

this.myView.focus()

But, it doesn't work.

I want to get the result as shown in the following GIF demo. How to do this?

Nazar Litvin · Accepted Answer · 2019-09-14T16:53:17.217

20

You should store ScrollView ref and use scrollViewRef.scrollTo()

render() {
  return(
    <ScrollView ref={ref => this.scrollViewRef = ref}>
      <View 
        // you can store layout for each of the fields
        onLayout={event => this.layout = event.nativeEvent.layout}
      > 
        // some field goes here
      </View>
    </ScrollView>
  )
}

And then when an error occurs just scroll to your field this.scrollViewRef.scrollTo({ y: this.layout.y, animated: true });.

Update: a working example can be found in this repo.

edited Sep 14 '19 at 16:53

answered Sep 14 '19 at 08:52

Nazar Litvin

758
6
10

1

I'm going to give a working example, I'll back to you soon – Nazar Litvin Sep 14 '19 at 10:48
4

Take a look at this GitHub repository, there is a working example. https://github.com/nazarlitvin/rn-scroll-sample – Nazar Litvin Sep 14 '19 at 11:16
2

You can handle it with `FlatList` and `scrollToIndex`, implemented it in my demo as well. – Nazar Litvin Sep 14 '19 at 13:19

How to scroll into View in React Native?

1 Answers1