I started out a bit with react-native, and I'm trying to make a "hello word" app to see how it works. I made a menu with "tab" at the top of my screen

In the app.js I'm adding the createStackNavigator to set my routes App.js

import { ... }
const AppNavigator = createStackNavigator({     
    Main: { screen: Main},
    CScreen: {screen: FormCScreen},
});

type Props = {};
export default class App extends Component<Props> {
render() {
    return (
        <AppNavigator />    
    );
  }
}

This is my main screen, where I set the tabs.

Main.js

imports {AScreen, BScreen} ...
const Tab = createMaterialTopTabNavigator(
{
   A: AScreen,
   B: BScreen,
},
{
  tabBarPosition: 'top',

});

export default class Main extends Component {

render() {
    return (  
      <Tab/>
    );
  }
}

BScreen.js

Now on one of my BScreen tabs, I want to click on a button, where I hope it loads the screen (CScreen)

imports ...
export default class BScreenextends Component{

    render(){
        return(
            <View>
               <TouchableHighlight onPress={() => this.props.navigation.navigate('CScreen')}>
                <Text>Click here to open CScreen</Text>
                   </TouchableHighlight>
            </View>
        );
    }
}

It can render all ponents correctly, the only problem is that when I click the button to display the CScreen, nothing happens. It is as if loading the Tab I lost the instacia of my navigator.

Main
 Tab 
 A
 B Button (Open CScreen) ~> this is not working

How can I open the screen through a button inside a tab?

[EDIT] Console.log ScreenB

.jpg

I started out a bit with react-native, and I'm trying to make a "hello word" app to see how it works. I made a menu with "tab" at the top of my screen

In the app.js I'm adding the createStackNavigator to set my routes App.js

import { ... }
const AppNavigator = createStackNavigator({     
    Main: { screen: Main},
    CScreen: {screen: FormCScreen},
});

type Props = {};
export default class App extends Component<Props> {
render() {
    return (
        <AppNavigator />    
    );
  }
}

This is my main screen, where I set the tabs.

Main.js

imports {AScreen, BScreen} ...
const Tab = createMaterialTopTabNavigator(
{
   A: AScreen,
   B: BScreen,
},
{
  tabBarPosition: 'top',

});

export default class Main extends Component {

render() {
    return (  
      <Tab/>
    );
  }
}

BScreen.js

Now on one of my BScreen tabs, I want to click on a button, where I hope it loads the screen (CScreen)

imports ...
export default class BScreenextends Component{

    render(){
        return(
            <View>
               <TouchableHighlight onPress={() => this.props.navigation.navigate('CScreen')}>
                <Text>Click here to open CScreen</Text>
                   </TouchableHighlight>
            </View>
        );
    }
}

It can render all ponents correctly, the only problem is that when I click the button to display the CScreen, nothing happens. It is as if loading the Tab I lost the instacia of my navigator.

Main
 Tab 
 A
 B Button (Open CScreen) ~> this is not working

How can I open the screen through a button inside a tab?

[EDIT] Console.log ScreenB

https://i.sstatic/qV1BY.jpg

• javascript
• react-native
• react-router
• react-navigation

• reactnavigation/docs/en/stack-actions.html Can you console.log this.props.navigation from BScreen? I think you need to poptotop – Gavin Thomas Commented Jun 18, 2018 at 20:44
• Hi, update my question with a print of the log, if necessary I can send another one. why use popToTop? will it lose it's navigate when I use the tab? – Emiry Mirella Commented Jun 19, 2018 at 13:28
• I added this.props.navigation.dispatch (StackActions.popToTop ()); for my ponentWillMount and nothing has changed, I continue the same way without being able to use the navigation.navigate – Emiry Mirella Commented Jun 19, 2018 at 13:39
• github./react-navigation/react-navigation/issues/3254 – Gavin Thomas Commented Jun 19, 2018 at 14:15
• I believe you can try this, even though you aren't using a drawer stack, the logic should be the same – Gavin Thomas Commented Jun 19, 2018 at 14:16

2 Answers 2

I think your trying to achieve StacksOverTabs mode of navigation setup,

The mistake you made is Main screen being a normal Component inside which you have rendered the Tab Component i.e createMaterialTopTabNavigator. Hence the Tab Component will not get the correct navigation prop from the StackNavigator

Instead, you have to make Main screen itself a createMaterialTopTabNavigator.

For example,

 const AppNavigator = createStackNavigator({     
     Main: { screen: MainTab}, // MainTab is itself a TabNavigator now
     CScreen: {screen: FormCScreen},
 });

 const MainTab = createMaterialTopTabNavigator(
   {
      A: AScreen,
      B: BScreen,
   },
   {
     tabBarPosition: 'top',

   });
 );

Check out the official examples code in GitHub, inside that navigate to StacksOverTabs

https://github./react-navigation/react-navigation/tree/master/examples/NavigationPlayground/js

Thanks.

You could also have put this at the top of your App class I believe:

static router = AppNavigator.router;

There is more information here: https://reactnavigation/docs/en/mon-mistakes.html#explicitly-rendering-more-than-one-navigator