react-native undefined is not an object ('this.props.navigation.navigate') error

Question

I want to proceed as follows

StackNavigator -> TabNavigator -> StackNavigator

Clicking the button on the screen moves to the tabbed screen and pressing the button on the tabbed screen moves to the other tabless screen.

Component movement errors appear.

Navigator.js

const SignUpScene = createStackNavigator({
 SignUp: {screen: SignUp},
 }, ...

 const SigninScene = createStackNavigator({
  HomeUI: {screen: HomeUI},
  TopTab: {screen: TopTab},
  Screen1: {screen: Screen1},
  SignUpScene: {screen: SignUpScene},
 }, ...

 const HomeScene = createStackNavigator({
  SigninScene: {screen: SigninScene},
 }, ...

 export default class Navigator extends Component {
  render() {
   return(
    <HomeScene />
   );
  }
 }

HomeUI.js

render() {
 const {navigate} = this.props.navigation;
 return (
  <View>
   <Image... />
   <View>
    <TouchableOpacity
     ...
     opPress={() => navigate("TopTab")}>
     <Text> button1 </Text>
    </TouchableOpacity>
    <TouchableOpacity
     ...
     onPress={() => navigate("Screen1")}>
     <Text> button2 </Text>
    </TouchableOpacity>
   </View>
  </View>
 )}

TopTab.js

export default TopTab = createMaterialTopTabNavigator({
 Tab1: {
  screen: Tab1,
  navigationOptions: {...}
 },
 Tab2: {
  screen: Tab2,
  navigationOptions: {...}
 }
})

Tab1.js

render() {
 const {navigate} = this.props.navigation;
 return(
  ...
  <view>
   <Button
    onPress={() => navigate("SignUpScene")} />
    ...
  </View> 
  ...
 )}

The following error occurs:

undefined is not an object ('this.props.navigation.navigate')

How do I resolve it?

Can I see stacks stacked in stacknavigator?

I want to debug

Backkom Backkom · Accepted Answer · 2018-08-24T01:43:50

I solved it. I've separated the class for the screen on Tab1.

export default class example extends Component {
 render() {
  return(
   <Tab1 />
  )
 }
}

I changed the above code to the following:

<Tab1 navigation={this.props.navigation}/>

react-native undefined is not an object ('this.props.navigation.navigate') error

1 Answers