How can a TabNavigator child screen refer to parent StackNavigator? - react-native

Question

i am trying to navigate from child tab navigator to a screen of parent stack navigator. But this.props.navigation.navigate can only navigate to child's navigation props
'
//stack.js
const AppNavigator = createStackNavigator(
{
DetailPage: DetailPage, //Screen A
MainScreen: { . //Screen B
screen: MainScreen,
navigationOptions: {
header: null
}
}
{
initialRouteName: "MainScreen"
}
}
//MainScreen.js
<View style={{ flex: 1 }}>
<TabScreen />
</View>
//TabScreen.js
const TabScreen = createMaterialTopTabNavigator({
Home: {
screen: HomeStack
},
// Videos: { screen: Videos },
Videos: {
screen: Videos
},
Shows: {
screen: AllShows
},
Live: {
screen: Live
}
})'
I want to navigate from (TabNavigator)TabScreen's Home to (StackNavigator)AppNavigator's DetailPage. But OnPress does Nothing. However, it can navigate to different screens of TabNavigator(child navigator).
Please help me how can I navigate from child TabNavigator to Parent StackNavigator

Answer 1

Nope. you cant do something like this. You need to make sure there is only one navigator defined. If not, need to make sure the navigation state is connected so that navigators know each other. I would strongly suggest you use a single root navigation
Refer Common Mistakes in react navigation
Explicitly rendering more than one navigator
Most apps should only ever render one navigator inside of a React component, and this is usually somewhere near the root component of your app. This is a little bit counter-intuitive at first but it's important for the architecture of React Navigation.
You need to define everything in a single place (root). Like follows
import React, { Component } from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import Camera from "./screens/camera";
import Welcome from "./screens/welcome";
import Scanner from "./screens/scanner";
import Cards from ".//screens/cards";
const BottomNavigation = createMaterialBottomTabNavigator(
{
Scan: { screen: Scanner },
Cards: { screen: Cards },
Settings: { screen: Cards }
},
{
initialRouteName: "Scan",
shifting: true
}
);
const AppNavigator = createStackNavigator({
Welcome: {
screen: Welcome,
navigationOptions: { header: null }
},
Camera: {
screen: Camera,
navigationOptions: { header: null }
},
Home: {
screen: BottomNavigation,
navigationOptions: { header: null }
}
});
export default createAppContainer(AppNavigator);
Now i believe you can navigate to different screens as everything is defined on a single navigator.

Answer 2

Could you try this?
//stack.js
const AppNavigator = createStackNavigator(
{
DetailPage: DetailPage, //Screen A
MainScreen: { . //Screen B
screen: MainScreen,
navigationOptions: {
header: null
}
},
TabScreen : {
screen : TabScreen
},
{
initialRouteName: "TabScreen"
}
}
//TabScreen.js
const TabScreen = createMaterialTopTabNavigator({
Home: {
screen: HomeStack
},
// Videos: { screen: Videos },
Videos: {
screen: Videos
},
Shows: {
screen: AllShows
},
Live: {
screen: Live
}
},
{
initialRouteName: "Home"
}
)'

Answer 3

this.props.navigation.dangerouslyGetParent().navigate('routeName', {});
Also, if you are ready to refactor some code you can create a new Screen and create some extra components, you can create a MainTabScreen for each TabNavigation screen, then:-
App.js
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen
name="login"
component={LogIn}
options={{title : 'LOG IN', headerShown: true}}
/>
<Stack.Screen
name="client-tabs-main"
component={ClientTabsMain}
/>
... Other Screens ...
</Stack.Navigator>
</NavigationContainer>
ClientsTabMain.jsx
<Tabs.Navigator
activeColor='white'
barStyle={{backgroundColor: colors.primary}}
>
<Tabs.Screen
name="home-tabs"
component={HomeTab}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home-outline" color={color} size={18} />
),
}}
/>
<Tabs.Screen
name="portfolio-tabs"
component={PortfolioTab}
options={{
tabBarLabel: 'Portfolio',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="clock" color={color} size={18} />
)
}}
/>
... Other Screens ...
</Tabs.Navigator>
PortfolioTabs.jsx
<PortfolioStack.Navigator
screenOptions={{
headerShown: true
}}
>
<PortfolioStack.Screen
name="portfolio"
component={Portfolio}
options={{
title: 'Portfolio'
}}
/>
<PortfolioStack.Screen
name="transaction"
component={Transaction}
/>
</PortfolioStack.Navigator>
And navigate using :-
this.props.navigation.replace('client-tabs-main',{
screen: 'portfolio-tabs',
params: {
screen: 'portfolio'
}
});

Answer 4

createBottomTabNavigator({
HomeTab: {
screen: HomeStack,
navigationOptions: {
title: "Home",
tabBarOnPress: this.handleTabPress
}
},
MessagingTab: {
screen: MessagingStack,
navigationOptions: {
title: "Messaging",
tabBarOnPress: this.handleTabPress
}
}
});
handleTabPress = ({ navigation }) => {
navigation.popToTop();
navigation.navigate(navigation.state.routeName);
}`