Estoy tratando de usar la navegación anidada con un navegador apilado. Una de las pantallas (Ubicaciones de clubes) que contiene navegación con pestañas con dos pestañas, desde una de esas pestañas me gustaría pasar a otra pantalla desde el navegador de pila.

dentro de App.js

 <NavigationContainer theme={navTheme}> <Root.Navigator> <Root.Screen name="Locations" component={Locations}/> <Root.Screen name="Club Locations" component={clubLoc} options={({ route }) => ({ title: route.params.name, })}/> <Root.Screen name="Club info" component={clubInfo} options={({ route }) => ({ title: route.params.name })}/> </Root.Navigator> </NavigationContainer>

Las ubicaciones luego empujan a las ubicaciones del Club que se ven así:

 function clubLoc(props, {navigation}) { const ClubData = props.route.params.data; return ( <Tabs.Navigator> <Tabs.Screen name="Overview" component={Tab1} initialParams={{data:ClubData}} navigation={navigation}/> <Tabs.Screen name="Forecast" component={Tab2} initialParams={{data:ClubData}} navigation={navigation}/> </Tabs.Navigator> ); }

y luego desde Tab1 id me gusta empujar a la información del club pero sigo recibiendo navegación. empujar no es una función y así sucesivamente, incluso si pongo {} en los accesorios, obtengo que el objeto no es una función.

Tab1.js

 export default function ViewMap(props, {navigation}) { ... const activePress = (item) => { let clubName = item navigation.push("Club info", { data: clubName }); };

Cualquier ayuda es apreciada ya que es la última parte de mi tarea.