How to get bottomTab press action with wix react-native-navigation?

Question

I have set up navigation with Bottom tabs in react-native-navigation, this is working fine

bottomTabs: {
  id: 'BOTTOM_TABS_LAYOUT',
  children: [
    {
      stack: {
        id: 'HOME_TAB',
        children: [
          {
            component: {
              id: 'HOME_SCREEN'
              name: 'HomeScreen'
            }
          }
        ],
        options: {
          bottomTab: {
            icon: require('./home.png')
          }
        }
      }
    },
    {
      stack: {
        id: 'PROFILE_TAB',
        children: [
          {
            component: {
              id: 'PROFILE_SCREEN',
              name: 'ProfileScreen'
            }
          }
        ],
        options: {
          bottomTab: {
            icon: require('./profile.png')
          }
        }
      }
    }
  ]
}

But I want to add some other code when I switch from a tab to another, how could this be done?

score 4 · Accepted Answer · answered May 23 '20 at 07:12

You can listen to tab selection events by registering a Navigation events listener. The tabSelected event is emitted when the selected tab has changed.

Navigation.events().registerBottomTabSelectedListener((selectedTabIndex, unselectedTabIndex) => {
});

If you'd like to handle the tab selection yourself, set the selectTabOnPress: false option on the bottomTab you'd like to handle selection for, and register a tabPressed listener to handle the tab press event. This event is emitted when a tab is pressed by the user.

options: {
  bottomTab: {
    icon: require('./home.png'),
    selectTabOnPress: false
  }
}

Navigation.events().registerBottomPressedListener((tabIndex) => {
});

How to get bottomTab press action with wix react-native-navigation?

1 Answers1