How to keep scroll position using flatlist when navigating back in react native ?

Question

I am new to react native. I am facing problem in maintaining the position of flatlist when navigating forward and then come back to that screen.

Current behavior
When navigating forward and then back, the scroll position is lost.

Expected behavior
When navigating on an extensive list of items, the user scrolls down the list and click on some item. The app goes to the next page which shows the product details. If the user decides do navigate back, the page does not scroll to the previous point.

Answer 1

Try handling scroll position changing on a state:

<FlatList onScroll={this.handleScroll} /> 

handleScroll method:

handleScroll: function(event: Object) {  this.setState({ scrollPosition: event.nativeEvent.contentOffset.y }); } 

Then you can use scrollToOffset(this.state.scrollPosition) when you navigate back.

If you use react-navigation and want to keep the scroll position after navigation, try this hack:

componentDidMount() {   this.props.navigation.addListener('willBlur', () => {     const offset = this.state.scrollPosition     // To prevent FlatList scrolls to top automatically,     // we have to delay scroll to the original position      setTimeout(() => {       this.flatList.scrollToOffset({ offset, animated: false })     }, 500)   }) }