The action 'NAVIGATE' with payload was not handled by any navigator [React Native] - reactjs

Question

Hello I have 3 drawer Navigators[Home,List,Contact] and I want to navigate from List Screen to an other Screen called EditScreen this Why I create a Stack Navigator on the List Screen But I got an error when I press the name on the table thet should take me to From the List Screen to The Edit Screen.
App.js
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import COLORS from './src/conts/colors';
import HomeScreen from './Screens/HomeScreen';
import ListScreen from './Screens/ListScreen';
import FormScreen from './Screens/FormScreen';
import EditScreen from './Screens/EditScreen';
const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
const App = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home" screenOptions={{
headerStyle: {
backgroundColor: COLORS.lightkBlue
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="List" component={ListScreen} />
<Drawer.Screen name="Form" component={FormScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
export default App;
ListScreen.js
import React, { useState } from 'react';
import { StyleSheet, SafeAreaView, ScrollView,Text, View, Modal } from 'react-native';
import { DataTable } from 'react-native-paper';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';
import EditScreen from './EditScreen';
const Stack = createNativeStackNavigator();
function Edit() {
return (
<Stack.Navigator>
<Stack.Screen name="Edit" component={EditScreen} />
</Stack.Navigator>
);
}
const List = ({navigation}) => {
const data = [
{id:1,name:"Hassane1",phone:"068888188888",email:"contact#gemail.com"},
{id:2,name:"Hassane2",phone:"068888888288",email:"contact#gemail.com"},
{id:3,name:"Hassane3",phone:"068888388888",email:"contact#gemail.com"},
]
const renderList = data.map((item)=>{
return(
<DataTable.Row key={item.id}>
<DataTable.Cell onPress={() => navigation.navigate("Edit",{item})} >{item.name}</DataTable.Cell>
<DataTable.Cell>{item.email}</DataTable.Cell>
<DataTable.Cell>{item.phone}</DataTable.Cell>
</DataTable.Row>
)
})
return (
<SafeAreaView style={{backgroundColor: COLORS.white, flex: 1}}>
<ScrollView
contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
<Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold'}}>
List of Companies
</Text>
<Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10}}>
Check Our Companies Details
</Text>
<DataTable style={styles.container} >
<DataTable.Header style={styles.tableHeader} >
<DataTable.Title>Name</DataTable.Title>
<DataTable.Title>email</DataTable.Title>
<DataTable.Title>Phone</DataTable.Title>
</DataTable.Header>
</DataTable>
{renderList}
</ScrollView>
</SafeAreaView>
);
};
export default List;
const styles = StyleSheet.create({
container: {
padding: 15,
},
tableHeader: {
backgroundColor: '#F3F4FB',
},
modalButtonView: {
}
});
EditScreen.js
import React, { useState } from 'react';
import {
View,
Text,
TextInput,
SafeAreaView,
Keyboard,
ScrollView,
Alert,
} from 'react-native';
import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';
import Input from '../src/views/components/Input';
import Loader from '../src/views/components/Loader';
const EditScreen = (props) => {
const {id,name,phone,email} = props.route.params.item
const [inputs, setInputs] = React.useState({
name: '',
email: '',
phone: '',
});
const [errors, setErrors] = React.useState({});
const [loading, setLoading] = React.useState(false);
const validate = () => {
Keyboard.dismiss();
let isValid = true;
if (!inputs.name) {
handleError('Please input Company', 'name');
isValid = false;
}
if (!inputs.email) {
handleError('Please input email', 'email');
isValid = false;
} else if (!inputs.email.match(/\S+#\S+\.\S+/)) {
handleError('Please input a valid email', 'email');
isValid = false;
}
if (!inputs.phone) {
handleError('Please input phone number', 'phone');
isValid = false;
}
{/*if (isValid) {
register();
}*/}
};
const handleOnchange = (text, input) => {
setInputs(prevState => ({...prevState, [input]: text}));
};
const handleError = (error, input) => {
setErrors(prevState => ({...prevState, [input]: error}));
};
return (
<SafeAreaView style={{backgroundColor: COLORS.white, flex: 1}}>
<Loader visible={loading} />
<ScrollView
contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
<Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold'}}>
Edit
</Text>
<Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10}}>
Now You Can Edit !
</Text>
<View style={{marginVertical: 20}}>
<Input
onChangeText={text => handleOnchange(text, 'name')}
onFocus={() => handleError(null, 'name')}
iconName="account-outline"
label="Company"
placeholder="Enter your Company Name"
error={errors.name}
defaultValue={name}
/>
<Input
onChangeText={text => handleOnchange(text, 'email')}
onFocus={() => handleError(null, 'email')}
iconName="email-outline"
label="Email"
placeholder="Enter your email address"
error={errors.email}
defaultValue={email}
/>
<Input
keyboardType="numeric"
onChangeText={text => handleOnchange(text, 'phone')}
onFocus={() => handleError(null, 'phone')}
iconName="phone-outline"
label="Phone Number"
placeholder="Enter your phone no"
error={errors.phone}
defaultValue={phone}
/>
<Button title="Save" onPress={validate} />
<Button title="Cancel" onPress={() => props.navigation.navigate("List")} />
</View>
</ScrollView>
</SafeAreaView>
);
};
export default EditScreen;
This is The Error
enter image description here

Answer 1

Your 'Edit' navigator is declared in your Edit() function but the function is never called.
react-navigation does know how to navigate to it since it is never initiated
You should try to call the function at least once at component start so the navigator is initiated

Answer 2

You do not have EditScreen as a screen on the drawers navigation screens in App.js
Try to add:
<Drawer.Screen name="Edit" component={EditScreen} />
On App.js