onTabChange not working :(

[reactnative103]

Hi Team,

Please help me for "onTabChange" not working in this module for below code:

const FooterTabController = TabNavigator( { TruckList: { screen: HomeNavigation }, favouriteList: { screen: About }, Loyalty: { screen: Loyalty }, Offer: { screen: Offer } }, { tabBarComponent: NavigationComponent, tabBarPosition: "bottom", animationEnabled: false, swipeEnabled: false,

tabBarOptions: {
  bottomNavigationOptions: {
    labelColor: "#686668",
    rippleColor: "#FB9222",
    activeLabelColor: "#FB9222",
    backgroundColor: "white",
    shifting: false,
    onTabChange: newTabIndex =>
      Alert.alert(`New Tab at position ${newTabIndex}`),
    style: {
      height: 56,
      elevation: 8,
      borderTopWidth: 1,
      borderColor: "grey"
    },
    tabs: {
      TruckList: {
        label: "Trucks",
        activeIcon: <Icon1 size={24} color="#FB9222" name="truck" />,
        icon: <Icon1 size={24} color="#686668" name="truck" />
      },
      favouriteList: {
        label: "favourite",
        activeIcon: <Icon1 size={24} color="#FB9222" name="heart" />,
        icon: <Icon1 size={24} color="#686668" name="heart" />
      },
      Loyalty: {
        label: "Loyalty",
        activeIcon: <Icon1 size={24} color="#FB9222" name="qrcode-scan" />,
        icon: <Icon1 size={24} color="#686668" name="qrcode-scan" />
      },
      Offer: {
        label: "Offer",
        activeIcon: <Icon1 size={24} color="#FB9222" name="tag-heart" />,
        icon: <Icon1 size={24} color="#686668" name="tag-heart" />
      }
    }
  }
}

} );

Please help me. I am newbie in React world.

Thanks

[timomeh]

onTabChange is not available with react-navigation. react-navigation handles onTabChange internally to display the desired screen.

[timomeh]

Please refer to the docs of react-navigation and to my docs regarding Usage with react-navigation

I'm going to close this issue since it's no bug or expected behaviour.

[reactnative103]

Hi Timomeh,

Thanks for your valuable time. "onTabChange" give in the the module "react-native-material-bottom-navigation". I know Its not available in react-navigation.

My problem is only that need to get index on Tab click and I am using "react-native-material-bottom-navigation", So that's-way I am asking about "onTabChange" . If you any suggession and need more information, please let me know.

NOTE: I have add my code above. I need to get only tab index on tab click.

Please reopen this issue and help me for that. Thanks,

[timomeh]

You're looking for a solution in the wrong place. If you're using react-navigation, then you need to extract the current tab-index – or rather the state of the navigation – through react-navigation's API. As I said, refer to the docs of react-navigation. If you look through the docs, you will for example find here on how you can access the state of the navigation in your screens through a prop.

If you would use the TabBar which react-navigation provides out-of-the-box, you wouldn't have a onTabChange prop either and you'd also have to get the current state from this.props.navigation. react-native-material-bottom-navigation behaves just the same way.

Please also note that GitHub Issues are for reporting bugs, discussing features, problems with poor documentation, and anything that has to do with improving software. An Issue is not a shortcut to get a quick answer if you're new to a framework and just need a solution. Programming also means finding the solution on your own: Study the documentation of the frameworks you use. Read articles which explain certain behaviours. Tutorials and Screencasts are good for hands-on coding with guidance. And if you still don't understand something: Stack Overflow is a great platform to get help.