Today I Learned

Dealing with TabBar scenes

When we are using react-navigation for navigation in our React-Native app, often we use TabBar Navigator, because of the simplicity. But unfortunately sometimes it brings restrictions. Main one: Every Tab is mounted from begining and will never unmount by default.

To handle Tab changes we can use less known listeners which helps very much in building smooth and user-friendly apps:

componentDidMount() {
  this._navListener = this.props.navigation.addListener('willBlur', () =>
    this.scrollView.scrollTo({ x: 0, animated: true }),
  )
}

componentWillUnmount() {
  this._navListener.remove()
}

Docs reference

P.S. Always remember to remove listeners incase of memory leak :)