Stack Navigator with Tab Navigator (React Native)

Question

I'm trying to get from screen1 -> screen2 using a stacknavigator, when Screen1 and Screen2 are already inside a tab navigator, and I'm running into some problems. Here is my App.Js (details removed)

import Screen1 from "./screen1";
import Screen2 from "./screen2";

export const tabs = TabNavigator({
Tab1: {
   screen:Screen1,
   navigationOptions: { tabBarLabel: 'Test', tabBarIcon: ({ tintColor }) => <Icon name="doc" size={35} color={tintColor} />,
  },
 }, 
Tab2: {
   screen:Screen2,
   navigationOptions: { tabBarLabel: 'Profile', tabBarIcon: ({ tintColor }) => <Icon name="user" size={35} color={tintColor} />,
 },
} });

 export default tabs;

In my screen1, I'm currently exporting the class screen1, so when I run the code, I get the error that 'navigate' could not be found even though I have the line

  const { navigate } = this.props.navigation;

I got the stack navigator/tab navigator to work on their own, but when I put them together it doesn't seem to work. If instead, I remove the "export" from the screen1 class, I get a error from App.Js saying I need to provide a valid react-screen for Tab2 (Screen2).

Screen1 (details removed)

export default class screen1 extends React.Component {
  static navigationOptions = {
    title: 'Screen1',
  }
  render () {
     const { navigate } = this.props.navigation;
     return ( 
     
      ---- 
     this.props.navigation.navigate('SecondScreen');


   );
  }
}

export const SimpleApp = StackNavigator({
  screen1: { screen: screen1 },
  screen2: { screen: screen2 },
});

HungrySoul HungrySoul · Accepted Answer · 2017-12-26T09:07:30

export default class screen1 extends React.Component {
  static navigationOptions = {
    title: 'Screen1',
  }
  render () {
     const { navigate } = this.props.navigation;
     return ( 
     
      ---- 
    // you need to use the key which is defined in stack navigator.
     this.props.navigation.navigate('screen2');


   );
  }
}

export const SimpleApp = StackNavigator({
  screen1: { screen: screen1 },
  screen2: { screen: screen2 },
});

Stack Navigator with Tab Navigator (React Native)

1 Answers