Navigation inside TabBar React Native

I'm pretty new to React Native, I have the following tab bar navigation page:

    const TabBar = () => {
  return (
    <BottomTab.Navigator
      screenOptions={{
        showIcon: true,
        tabBarShowLabel: false,
        tabBarStyle: {
          position: "absolute",
          bottom: 25,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: global.GUI.WHITE,
          borderRadius: 15,
          height: 90,
          ...styles.shadow,
        },
        header: ({ navigation, route, options }) => {
          return (
            <View
              style={{
                justifyContent: "space-between",
                height: 110,
                backgroundColor: global.GUI.WHITE,
                alignItems: "center",
                width: "100%",
                flexDirection: "row",
                ...styles.shadow,
              }}
            >
              <Image
                source={ctsLogo}
                style={{
                  resizeMode: "contain",
                  width: 100,
                  height: 70,
                  marginTop: 40,
                  marginLeft: 10,
                }}
              />
              <Button title="test" onPress={()=>{
                
              }}>
                <FontAwesomeIcon
                  icon={faCog}
                  style={{
                    color: global.GUI.ORANGE,
                    marginTop: 40,
                    marginRight: 20,
                  }}
                  size={30}
                />
              </Button>
            </View>
          );
        },
      }}
    >
      <BottomTab.Screen
        name="Home"
        component={Main}
        options={{
         ...
        }}
      />
      <BottomTab.Screen
        name="Flyers"
        component={Flyers}
        options={{
          ...
        }}
      />
      <BottomTab.Screen
        name="OnlineShop"
        component={OnlineShop}
        options={{
         ...
        }}
      />
      <BottomTab.Screen
        name="Cards"
        component={Cards}
        options={{...}}
      />
      <BottomTab.Screen
        name="Shops"
        component={Shops}
        options={{
          ....
        }}
      />
    </BottomTab.Navigator>
  );
};

I want to add navigate to another page while remaining in the context of the tab bar (let's says I want to go to another component called "Settings") programmatically by triggering the test button:

<Button title="test" onPress={()=>{...}}>

Inside the custom header, is it possible to do that? Thanks

EDIT:

I've changed my App.js code to this:

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import TabBar from "./navigation/TabBar";
import Settings from "./page/Settings";

const Stack = createNativeStackNavigator();

export default function App() {
  function Tabs() {
    return <TabBar />;
  }
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Tabs" component={Tabs} 
         options={{ headerShown: false }}/>
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And now I'm able to navigate, thanks!

Solution 1:

inside your SCREEN call navigation hook

const navigation = useNavigation();

then u can use NAVIGATION functions anywhere you want :) even inside Button

Button

<Button title="test" onPress={()=>{
   navigation.navigate('Settings') // param here is "name" prop from your navigator
   // navigation.goBack()
}}>

Solution 2:

Try using this

props.navigation.navigate('Settings')