Search code examples
react-nativenavigationtabnavigator

React-Native-Navigation TabNavigator screen change function?


I'm using the react-native-navigation tab navigator in my app, and on one of my screens I have a button where you can play music. If you press the button and then navigate to a different screen (using the tab bar) however, the music continues to play. I'm trying to find a way to make the music stop when the user navigates to another screen.

Is there something similar to a componentDidUnmount() method that I can call when the screen changes?


Solution

  • There are two options here (that I'm aware of), neither great.

    First, you can use Redux to to manage your navigator's state and, when tabs change, listen to that change and when the relevant tab is no longer active stop playing the music.

    Second, you could try using onNavigationStateChange but this feels really hacky to me - and I'm not sure how well it would actually work.