Problem with React Navigation Bottom Tabs and Stack - react-native

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