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?

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?

• javascript
• react-native
• view
• focus

1 Answer 1

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.