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:"[email protected]"},
    {id:2,name:"Hassane2",phone:"068888888288",email:"[email protected]"},
    {id:3,name:"Hassane3",phone:"068888388888",email:"[email protected]"},
  ]


  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

CodePudding user response：

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

CodePudding user response：

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