CODEWITHSUNDEEP
react-nativereact-native-navigationwix-react-native-navigation
Mahdi N
Mahdi N

Reputation: 2178

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?

Upvotes: 3

Views: 1808

Answers (1)

guy.gc
guy.gc

Reputation: 3501

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

Upvotes: 4

Related Questions