react native - undefined is no an object( evaluating _this props.navigation.navigate) when i try to navigate after validate

Question

when i trying to navigate after validate to a listdata it show up with erro as my title ? please help i'm newbie in react native. many appreciate from me thank you guys

Btw my code is kinda weird any recommend for me to boost it up? for better performance and easier to understand?

Here all my code below:

/// import code stuff

const listData = [
  {
    tenhs: "nguyen quang ha",
    lop: "12b",
    gioitinh: "nam"
  },
  {
    tenhs: "nguyen hoag sn",
    lop: "11b",
    gioitinh: "nam"
  },
  
]

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: {
        username: null,
        email: null,
        password: null,
        confirm_password: null,
      },
      errors: {
        username: null,
        email: null,
        password: null,
        confirm_password: null,
      },
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit = (event) => {
    if (this.validate()) {
  
      console.log(this.state);

       this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.username = null;
              input.password = null;
              input.email = null;
              input.confirm_password = null;
              return { input };
       });
         this.setState((prevState) => {
              let errors = Object.assign({}, prevState.errors);
              errors.username = null;
              errors.password = null;
              errors.email = null;
              errors.confirm_password = null;
              return { errors };
       });

       this.props.navigation.navigate('listData');
    }
  }

  /// validate code stuff
  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center',backgroundColor: '#00ffff',}}>
        <View style={{padding:5}}>

        ///screen code stuff
       
        <TouchableOpacity
          onPress={(e)=>{this.handleSubmit(e);}}
        
          style={{
       ///some styles code 
          }}>
          <Text
            style={{
            some styles code
            }}>
            ??ng Ky
          </Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }
}

here is Listdata screen code

import React, { Component } from 'react';
import {
  Text,
  Alert,
  TouchableOpacity,
  Button,
  TextInput,
  View,
  StyleSheet,
} from 'react-native';
import { hScale, vScale, fScale } from "react-native-scales";
import styles from '../one/Styles';

const Listdata = [
    {
      id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
      title: "NguyenHoangSon",
    },
    {
      id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
      title: "NguyenHoangSon",
    },
    {
      id: "58694a0f-3da1-471f-bd96-145571e29d72",
      title: "NguyenHoangSon",
    },
  ];
  

  
  export default Listdata;

question from:https://stackoverflow.com/questions/65840754/undefined-is-no-an-object-evaluating-this-props-navigation-navigate-when-i-tr

Answer 1

There are many things to fix on your code, i will try my best to help you understand how navigation works.

Live Working Example: https://codesandbox.io/s/admiring-hugle-ey1yj?file=/src/screens/DetailsScreen.js

1. You have to setup your navigation correctly on App.js
2. You have specify the components which you want to navigate, eg: HomeScreen , DetailsScreen
3. Screens should return a JSX element, not an array.

Below is an simple example to understand how to navigation between screens.

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

//Screen 1
const HomeScreen = ({ navigation }) =>
{

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

//Screen 2
const DetailsScreen = () => 
{
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}


//App.js
const App = () => 
{

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;