React Navigation onPress function in own tabBarButton?

Question

I am kind of begginer, I need to make component for tabBarButton and i made it.

Problem is that navigation doesnt work now, because I have no idea how to write onPress function to make it work!

Anyone can help me with thsi one please?

This is my component, that I use in my Tab.Navigator :

import React from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import Text from '../Text/Text';

interface Props {}

const NavBottomButton: React.FC<Props> = (props) => {
  const {children} = props;

  return (
    <TouchableOpacity onPress={() => {}} style={styles.navButton}>
      <View>
        <Text>{children}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  navButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default NavBottomButton;

And here is how i use my Component :

<Tab.Navigator
  tabBarOptions={someStyles}>
  <Tab.Screen
    name="Matches"
    component={Matches}
    options={{
      tabBarButton: (props) => (
        <NavBottomButton onPress={Matches} {...props}>
          {i18n.t('matchesPage.tabTitle')}
        </NavBottomButton>
      ),
    }}
  />
  <Tab.Screen
    name="Groups"
    component={Groups}
    options={{
      tabBarButton: (props) => (
        <NavBottomButton onPress={Groups} {...props}>
          {i18n.t('groupsPage.tabTitle')}
        </NavBottomButton>
      ),
    }}
  />     
</Tab.Navigator>

Right now i dont know how to create onPress function, for TouchableOpacity, please help me.

question from:https://stackoverflow.com/questions/65936865/react-navigation-onpress-function-in-own-tabbarbutton

Answer 1

Here is a working sample for you which gets access to navigation via the options and call navigation.navigate.

You can pass the same onPress to your custom component as a prop and use it there

 <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={({ navigation }) => ({
          tabBarButton: (props) => (
            <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
              Settings
            </TouchableOpacity>
          ),
        })}
      />
    </Tab.Navigator>