React Navigation on tab change

Question

Without using Redux, how do I detect a tab change with a react navigation tab navigator?

I know I need to somehow use onNavigationStateChange but I can\'t figure out

Answer 1

There's some long discussions about this from react-native issue 314, 486, 1335, and finally we got a better built in way to handle this, after Sep 27, 2017, react-navigation version v1.0.0-beta.13:

New Features

Accept a tabBarOnPress param (#1335) - @cooperka

Usage:

const MyTabs = TabNavigator({
  ...
}, {
  tabBarComponent: TabBarBottom /* or TabBarTop */,
  tabBarPosition: 'bottom' /* or 'top' */,
  navigationOptions: ({ navigation }) => ({
    tabBarOnPress: (scene, jumpToIndex) => {
      console.log('onPress:', scene.route);
      jumpToIndex(scene.index);
    },
  }),
});