Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to use tabBarOnPress in tabnavigator react native

Tags:

react-native

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}) => {
   const params = navigation.state.params || {};
   console.log("Params:-",params);
  return {
        title:Strings.title_dashboard,
        headerStyle:{ backgroundColor: Colors.header_blue},
        headerTitleStyle:HeaderStyle.titleCenter,
        tabBarOnPress: (tab, jumpToIndex) => {
           console.log("Tab Click",tab);
            jumpToIndex(tab.index);
            navigation.state.params.onFocus()
        },
       headerRight:<TouchableOpacity onPress={()=>Alert.alert(Strings.avanza,Strings.under_imple)}><View><Image source={{uri: "filter_icon"}} style={{height: 18, width: 18,marginRight:10,}} /></View></TouchableOpacity>,
  }
  }

at here i set the Params like this in componentDidMount:

this.props.navigation.setParams({
      handleGrid: this.callServer.bind(this)
    })

getting an error here not able to get this click event.

Help me please.

Thank you.

like image 316
Swapnil Panchal Avatar asked Dec 30 '17 06:12

Swapnil Panchal


People also ask

How do you style the tab bar in react native?

Add icons to the tab bar To add icons to each tab, first import the Icon component from react-native-vector-icons library inside the navigation/TabNavigator/index. js file. For this example, let's use AntDesign based icons. // after other import statements import Icon from 'react-native-vector-icons/AntDesign';


2 Answers

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.

like image 116
Vladimir Vlasov Avatar answered Jan 02 '23 09:01

Vladimir Vlasov


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();
      ]},
    }),
  }
);
like image 36
Bond Avatar answered Jan 02 '23 10:01

Bond