how to use tabBarOnPress in tabnavigator react native

Question

i am stuck in big problem that is i wants onPress event when i clicked on tab. my code is here:-

static navigationOptions = ({navigation, screenProps}) => {
          


        

Answer 1

This is working for me,

static navigationOptions = ({ navigation }) => {
       return {
            tabBarOnPress: ({previousScene, scene, jumpToIndex}) => {
                const { route, index, focused} = scene;

                if(focused){
                    navigation.state.params.scrollToTop()
                }
                jumpToIndex(0)
            }
        }
 };

Answer 2

This is my approach. It works for the version 5.x.x of react-navigation:

const BottomTab = createBottomTabNavigator();
const Tabs = props => (
  <BottomTab.Navigator
    initialRouteName="Foo"
    ...
    <BottomTab.Screen
      name="Foo"
      component={Foo}
      initialParams={props.route.params}
      listeners={{
        tabPress: e => {
          // e.preventDefault(); // Use this to navigate somewhere else
          console.log("Foo tab bar button pressed")
        },
      }}
    />
  </BottomTab.Navigator>
);

Read more about listeners.

---

For version 3.x.x and I hope for the 4th as well please use this one.

let Tabs = createBottomTabNavigator(
  {
    FooTab: Foo,
  },
  {
    initialRouteName: "FooTab",
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarOnPress: ({ navigation, defaultHandler }) => {
        console.log('onPress:', navigation.state.routeName);
        defaultHandler()
      },
    }),
  }
);

---

For version 2.x.x please use navigationOptions instead of the defaultNavigationOptions.

Answer 3

I used stack navigator

const Stack = createStackNavigator({
    ScreenA: {
        screen:ScreenA ,
        navigationOptions: () => ({
            header: null
        }),
    },
    ScreenB: {
        screen:ScreenB ,
        navigationOptions: () => ({
            header: null
        }),
    },
});

//Added tabBarOnPress

https://reactnavigation.org/docs/en/stack-actions.html the popToTop action takes you back to the first screen in the stack, dismissing all the others. It's functionally identical to StackActions.pop({n: currentIndex}).

import { StackActions } from 'react-navigation';
let Tabs = createBottomTabNavigator(
  {
    FooTab: Foo,
  },
  {
    initialRouteName: "FooTab",
    defaultNavigationOptions: ({ navigation }) => ({
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      // to navigate to the top of stack whenever tab changes
      navigation.dispatch(StackActions.popToTop());
      defaultHandler();
      ]},
    }),
  }
);