I am new to react-native. for learning, I created a sample project. I want to navigate to another page by pressing the text inside the drawer. So I am facing an error

TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

I added sample code

import React,{Component} from "react";
import { StyleSheet, Text, View ,ImageBackground,} from "react-native";

export default class DrawerContent extends Component{

    render(){
        return(
            <View style={Styles.container}>
                <ImageBackground source={require('../../assets/drawerbg.jpg')}>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Home')}>Home</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Profile')}>Profile</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Settings')}>Settings</Text>
                </ImageBackground>
            </View>
        )
    }
}

CodePudding user response：

You need to navigate to a component to give it the navigation prop, if not, use the withNavigation method to export your component to give you the prop:

import React,{Component} from "react";
import { StyleSheet, Text, View ,ImageBackground,} from "react-native";
import { withNavigation } from 'react-navigation';

class DrawerContent extends Component{

    render(){
        return(
            <View style={Styles.container}>
                <ImageBackground source={require('../../assets/drawerbg.jpg')}>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Home')}>Home</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Profile')}>Profile</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Settings')}>Settings</Text>
                </ImageBackground>
            </View>
        )
    }
}

export default withNavigation(DrawerContent )

or you can use the useNavigation method like it's used in here for react navigation 6.

CodePudding user response：

All components rendered inside DrawerNavigator must inherit navigation props from DrawerNavigator.

DrawerNavigator must be the parent of all other navigators (Tabs and Stacks).

With those guidelines let us refactor our code as below:

import React, { Component } from "react";
import { StyleSheet, Text, View, ImageBackground } from "react-native";

import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";

class DrawerContent extends Component {
  render() {
    return (
      <View style={Styles.container}>
        <ImageBackground source={require("../../assets/drawerbg.jpg")}>
          <Text
            style={Styles.TextFiled}
            onPress={() => this.props.navigation.navigate("Home")}
          >
            Home
          </Text>

          <Text
            style={Styles.TextFiled}
            onPress={() => this.props.navigation.navigate("Profile")}
          >
            Profile
          </Text>

          <Text
            style={Styles.TextFiled}
            onPress={() => this.props.navigation.navigate("Settings")}
          >
            Settings
          </Text>
        </ImageBackground>
      </View>
    );
  }
}

const MainNavigation = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>
        {/* Other screens here */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default MainNavigation;

Review this line <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}> on how we're passing navigation props from drawer to child component.

CodePudding user response：

Solved the answer by useNavigation

import React,{Component} from "react";
import { StyleSheet, Text, View ,ImageBackground,} from "react-native";
import { useNavigation } from "@react-navigation/native";

const DrawerContent =() => {
    const navigation = useNavigation()
        return(
            <View style={Styles.container}>
           

                <Text style={Styles.TextFiled}
                onPress = {()=>navigation.navigate('Home') }>Home</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> navigation.navigate('Profile')}>Profile</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> navigation.navigate('Settings')}>Settings</Text>
               
            </View>
        )
    }

export default DrawerContent