Problem with React Navigation Bottom Tabs and Stack

Question

I have 5 pages in bottomTab, and I want to navigate to others from these 5 pages. I looked at the docs in the official site of React navigation, wrote my code the same way, but it doesnt work.. I'm putting my code below, so you can have a look at it.

//This is my bottomTab
function Tabs(){
return(
<Tab.Navigator screenOptions={() => ({
    tabBarActiveTintColor: '#fff',
    tabBarInactiveTintColor: '#777',
    headerTintColor:"#fff",
    headerStyle:{
        backgroundColor: '#000',
    },
    tabBarStyle: {
        backgroundColor: '#000',
        paddingBottom: 5,
        paddingTop: 5,
        
    },
})}>
    <Tab.Screen 
    name='Historico' component={Historico} 
    options={{ tabBarIcon: ({ size, color }) => ( <AntDesign name='profile' size={size} color={color}/>) 
    }}  />
    

    <Tab.Screen 
    name='Relatorios' 
    component={Relatorios} 
    options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='areachart' size={size} color={color}/> ) 
    }}  />


    <Tab.Screen 
    name='Plus' 
    component={Plus} 
    options={{ 
        tabBarLabel: '',
        tabBarIcon: ({ size, color }) => (<AntDesign name='plus' size = {28} color={color}/> ),
        headerShown: false 
    }}  /> 

    <Tab.Screen 
    name='Lembretes' 
    component={ShowLembretes} 
    options={{ 
        tabBarLabel: 'Lembretes',
        tabBarIcon: ({ size, color }) => (<AntDesign name='clockcircleo' size={size} color={color}/>) 
    }}  />


    <Tab.Screen 
    name='Mais' 
    component={Mais} 
    options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='ellipsis1' size={size} color={color}/>) 
    }}  />

</Tab.Navigator>
)
}
//These are my routes of my app, I put my `Tab` inside my `stack`
export default function Routes(){
return(
    <NavigationContainer>
        <Stack.Navigator initialRouteName="Tabs"> //Its `Tabs` just for development
            <Stack.Screen name= "Preload"  component= {Preload} options={{ headerShown: false}}/>
            <Stack.Screen name= "Tabs" component={Tabs} options={{ headerShown: false }}/>
            <Stack.Screen name= "Despesa" component={Despesa} />
            <Stack.Screen name= "Serviço" component={Serviço} />
            <Stack.Screen name= "Receita" component={Receita} />
            <Stack.Screen name= "AddLembrete" component={AddLembrete} />
            <Stack.Screen name= "Abastecimento" component={Abastecimento} />
            <Stack.Screen name= "Veiculos" component={Veiculos} />
        </Stack.Navigator>
    </NavigationContainer>
)
}

export default function Plus({ navigation }){

return (
<TelaPlus style={estilos.tela}>

    <View style={estilos.linha1}>//This is the way Im trying to navigate,is it wrong?
        <Box onPress={()=> navigation.navigate('Despesa')}> 
            <MaterialCommunityIcons name="elevation-decline" size={24} color="white" />
            <Texto>Despesa</Texto>
        </Box>
        
        <Box onPress={()=> navigation.navigate('Serviço')}>
            <MaterialCommunityIcons name="car-wrench" size={24} color="white" />
            <Texto>Serviço</Texto>            
        </Box>
        
        <Box onPress={()=> navigation.navigate('Receita')}>
            <MaterialCommunityIcons name="elevation-rise" size={24} color="white" />
            <Texto>Receita</Texto>           
        </Box>
    </View>

    <View style={estilos.linha2} onPress={()=> navigation.navigate('Lembrete')}>
        <Box style={estilos.box}>
            <MaterialCommunityIcons name="clock-plus-outline" size={24} color="white" />
            <Texto>Lembrete</Texto>            
        </Box>

        <Box onPress={()=> navigation.navigate('Abastecimento')}>
            <MaterialCommunityIcons name="gas-station" size={24} color="white" />
            <Texto>Abastecimento</Texto>           
        </Box>
    </View>


</TelaPlus>
)
};

Please, any help will be welcome! Thanks!

Sorry for my English, its not mt first language, still learning it too.

Answer 1

you can set tabLongPress act like tabPress

<BottomTab.Navigator
      screenListeners={({ navigation }) => ({
        tabLongPress: (e) => {
          navigation.jumpTo(e.target.split('-')[0]);
        },
      })}
>

for more detail, check this link