Not able to use stack navigator in react native

Question

App.js file:

import 'react-native-gesture-handler';
        import * as React from 'react';
        import { NavigationContainer } from '@react-navigation/native';
        import { createStackNavigator } from '@react-navigation/stack';
        import Navigator from './routes/homeStack';
        import { StyleSheet, Text, View, Button } from 'react-native';

        export default function App(){
          return(

               <Navigator />

          );
        }


        const styles= StyleSheet.create({
          container:{
            fontSize: 24,
          }
        });

EditApollo.js file:

import React,{Component} from 'react';
import {  Platform, StyleSheet, StatusBar, View, Text, TouchableOpacity, FlatList, 
TouchableHighlight} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import firebase from 'firebase';
 if (!firebase.apps.length) {
   firebase.initializeApp({});}
class EditApollo extends Component {
 constructor(props){
  super(props);
    this.state={
    users1:[]
   }
  }
 componentDidMount= () =>{
  firebase.database().ref('users1').once('value').then(snapshot => {
     var items = [];
   snapshot.forEach((child) => {
     items.push({
        email: child.val().email,
        password: child.val().password,
       // price: child.val().price,
     });
  });
  this.setState({ users1: items});
  console.log(this.state.users1)
   });
  }
  render() {
  return(
    <View style={styles.container}>
   <FlatList style={{width:'100%'}} data={this.state.users1} showsVerticalScrollIndicator={false}
   renderItem={elem => (<View style={{elevation:8, marginBottom:13, borderRadius:15, 
  backgroundColor:'#575FCF', padding:20}}>
   <Text style={{fontSize:18, fontWeight:'bold', color:'#fff'}}>{elem.item.email}</Text>
  <Text style={{fontSize:18, fontWeight:'bold', lineHeight:25, color:'#fff'}}>{elem.item.password}  
  </Text>
  <View>
   <TouchableHighlight onPress={() => this.props.navigation.navigate('Edit1')}>
       <View>
             <Icon size={30} color="white" name="edit" />
       </View>
   </TouchableHighlight>        
   <TouchableHighlight>
      <View>
            <Icon size={30} color="white" name="close" />
      </View>
    </TouchableHighlight>        
  </View>
 </View>)}
  />
 </View>
 )
 }
 }
 export default EditApollo;

for navigating my file is homeStack.js

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Login from '../src/pages/Login';
import EditApollo from '../src/pages/EditApollo';
 import Edit1 from '../src/pages/Edit1';

 const screens={
  Login:{
    screen: Login,
    navigationOptions:{
    title: 'Login Page',
    headerStyle:{ backgroundColor:'#333' }
    } 
 },
 EditApollo:{
  screen: EditApollo,
  navigationOptions:{
    title: 'Edit Apollo Records',
    headerStyle:{ backgroundColor:'#333' }
   }
 },
 Edit1:{
    screen: Edit1,
   navigationOptions:{
    title: 'Edit Records',
    headerStyle:{ backgroundColor:'#333' }
   }
 },
 }

const HomeStack = createStackNavigator(screens, {
defaultNavigationOptions:{
    headerTintColor: '#eee',    
    headerStyle:{ height:50 }
 }
  });
export default createAppContainer(HomeStack);

Edit.js file is

import React,{Component} from 'react';
import {  Platform, StyleSheet, StatusBar, View, Text } from 'react-native';
class Edit1 extends Component <{}>{
render(){
    return (
            <View style={styles.container}>
                <Text>hii</Text>
            </View>
        );
        }
    }
 const styles = StyleSheet.create({
 container: {
 flex:1,
 justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#fff',
   },
 });
 export default Edit1;

package.json file:

  {
   "name": "newapp",
   "version": "0.0.1",
   "private": true,
   "scripts": {
  "android": "react-native run-android",
  "ios": "react-native run-ios",
  "start": "react-native start",
  "test": "jest",
 "lint": "eslint ."
 },
 "dependencies": {
 "@react-native-community/masked-view": "^0.1.10",
 "@react-navigation/native": "^5.1.6",
 "@react-navigation/stack": "^5.2.13",
 "firebase": "^7.14.2",
 "react": "16.11.0",
 " react-native": "0.62.2",
 "react-native-elements": "^1.2.7",
 "react-native-gesture-handler": "^1.6.1",
 "react-native-keyboard-spacer": "^0.4.1",
 "react-native-reanimated": "^1.8.0",
 "react-native-safe-area-context": "^0.7.3",
 "react-native-screens": "^2.5.0",
 "react-native-table-component": "^1.2.1",
 "react-native-vector-icons": "^6.6.0",
 "react-navigation": "^4.3.8",
 "react-navigation-drawer": "^2.4.12",
 "react-navigation-stack": "^2.3.13"
 }, 
 "devDependencies": {
 "@babel/core": "7.9.0",
 "@babel/runtime": "7.9.2",
 "@react-native-community/eslint-config": "0.0.5",
 "babel-jest": "24.9.0",
  "eslint": "6.8.0",
 "jest": "24.9.0",
  "metro-react-native-babel-preset": "0.58.0",
  "react-test-renderer": "16.11.0"
 },
"jest": {
 "preset": "react-native",
 "setupFiles": [
   "./node_modules/react-native-gesture-handler/jestSetup.js"
 ]
 }
 }

I want to navigate to Edit1 page but error is in the onPress showing TypeError:undefined is not an object(evaluating '__this2.props.navigation.navigate') What should I do to resolve the error? Why the error is in this.props.navigation.navigate any specific reason?

Answer 1

As your loading EditApollo in your updateApollo you need to pass navigation prop to your EditApollo

In your UpdateApollo.js:

Change:

<EditApollo />

to

<EditApollo navigation={navigation} />

This will fix your error.

Check the images for reference:

On press it is navigating to Edit screen:

Hope this helps!