I am trying to navigate from login screen to profile screen after authenticating email and password. Everything else works. I am able to get token from auth api, store it retrieve it. After that I am not able to navigate to the next screen, which throws error

Here's my code:

Update: as per the answer. I corrected the misspell. Now it works!!

import * as React from 'react';
import { useState } from 'react';
import { ActivityIndicator, StatusBar, StyleSheet, TextInput, TouchableOpacity, Image, TouchableHighlight } from 'react-native';
import { Text, View } from '../components/Themed';
import * as SecureStore from 'expo-secure-store';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import navigation from '../navigation';

export default function LoginScreen({navigation}) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [data, setData] = useState([]);

  const doUserLogIn = async() => {
    try {
      const response = await fetch('http://some-server.de/api/login/?email=' email '&password=' password, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        }
      });
      const json = await response.json();
      setData(json);
    } catch (e) {
      console.log('Error1:' e);
    } finally {
      try{
        await SecureStore.setItemAsync('token', JSON.stringify(data.token));
        navigation.navigate('Profile');
      } catch(e) {alert('Error2:' e); }
    }
  }
  return (
    <View  style={styles.container}>
    <StatusBar style="auto" />
    <View style={styles.inputView}>
      <TextInput
        placeholder="Email."
        onChangeText={(email) => setEmail(email)}
      />
    </View>

    <View style={styles.inputView}>
      <TextInput
        placeholder="Passwort."
        onChangeText={(password) => setPassword(password)}
      />
    </View>

    <TouchableOpacity style={styles.loginBtn} onPress={() => doUserLogIn()}>
      <Text style={styles.loginText}>Anmelden</Text>
    </TouchableOpacity>
    </View>
  );
}

Below is the code for my Drawer navigation:

const Drawer = createDrawerNavigator();

function RootNavigator() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Anmelden" component={LoginScreen} />
      <Drawer.Screen name="Profil" component={ProfileScreen} />
      <Drawer.Screen name="Schichten" component={ShiftsScreen} />
      <Drawer.Screen name="Arbeitszeitbericht" component={TimelogScreen} />
    </Drawer.Navigator>
  );
}`

CodePudding user response：

The error means that 'Profile' is not in the same stack of screens as this current page. If you have your stacks separated by "Logged In", then your login stack will not have access to your "Logged In" stack. You could have a condition in place instead:

userLoggedIn ? LoggedInStack : LoginStack

So when the user logs in, it automatically switched to the LoggedInStack which would have "Profile" as its first screen so it goes there directly.