react native navigation.navigate not working

Issue

I have a drawer like this :

 MyDrawer= ({navigation }) => {
  const [show, setShow] = useState(true); 

  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent setShow={setShow} {...props} />}>
      <Drawer.Screen name="Feed" component={this.FeedScreen} />
      <Drawer.Screen name="Route" component={this.RouteScreen}
    </Drawer.Navigator>
  );
}

and I have its related component below:

 FeedScreen= ({navigation}) => {
    return (
        <View style={styles.container} >
            <View   style={styles.containerTop} > 
            <Header
                leftComponent={{ icon: 'menu', color: '#fff' , onPress: () =>  navigation.openDrawer()} } 
                centerComponent={{ text: 'device', style: { color: '#fff' } }}
                rightComponent={{ icon: 'home', color: '#fff' }}
            />
            </View >
            <View   style={styles.container2} > 
                      <Text >submit form</Text>
                      <TextInput
                        style={{height: 40}}
                        placeholder="8604893512478963"
                        Name={'imei'}
                        defaultValue=''
                      />
                    <Button title="     login     " onPress={this.handleSubmit} /> 
            </View >
        </View>
    );
}

 RouteScreen = ({navigation}) =>{
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Route Screen</Text>
    </View>
  );
}

by default user see the FeedScreen and after submit it must redirect to routescreen

so

the submit and api are like this :

handleSubmit= ({navigation} ) => {
    var details = {
        'imei':  this.state.imei ,
        'password': 'Password!',
        'action': 'login'
    };
    var formBody = [];
    for (var property in details) {
        var encodedKey = encodeURIComponent(property);
        var encodedValue = encodeURIComponent(details[property]);
        formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

fetch('http://example.com/api.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    Accept: 'application/json', 
  },
  body: formBody
}).then((response) => response.json())
.then((json) =>{if(json.res=='-1'){ ToastAndroid.show('device not found', 1000) }else{navigation.navigate('Route')} } )
.then( this.setState({ visible: !this.state.visible }) )
.catch(error => console.error("error:", error));

}

the api work correct and if id is wrong it show the device not found message but if the user imei is correct the app crash with the error:

error : typeerror :undefined is not an object (evaluating 'navigation.navigate')

i have redirect user ro second screen after the api respose was ok , how can i do this ??

Solution

You are not passing the navigation to the handleSubmit.

<Button title="     login     " onPress={()=>this.handleSubmit(navigation)} /> 

And this would be a parameter like below

handleSubmit= (navigation) => {

Answered By - Guruparan Giritharan