how to use tabBarOnPress in tabnavigator react native - 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}) => {
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.

Answer 1

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 2

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 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();
]},
}),
}
);