react-nativereact-native-navigationwix-react-native-navigation

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


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?


Solution

  • 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) => {
    });