moving between screens in react native

Question

i'm trying to move between screens in react native but i keep getting an error that navigation.navigate is undefined. how do i get the navigate prop to work in my onpress function ?

this is the Login component

import React, {Component}from 'react';
import {  View, Text } from 'react-native';
import {Card,Input,Button} from 'react-native-elements';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator} from '@react-navigation/stack';

const Login = ({navigation}) => {
console.log(navigation)
return (
    <View>
<Card>

<Text>{'Welcome Back'}</Text>
  <Input placeholder="Username"
  ></Input>
  <Input placeholder="Password"
  ></Input>
<Button title="Sign In"
onPress={()=> navigation.navigate("Products")}/>
<Text>{"Forgot username/password"}</Text>
<Text>{"Not a member? Apply Now"}</Text>


</Card>
    </View>
)
}

export default Login;

This the other component im trying to connect to

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from './login';
import App from '../App';
import Products from './products';

const Stack = createStackNavigator();

function MyStack() {
  return (
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Login"component={Login}/>
    <Stack.Screen name="App" component={App} />
    <Stack.Screen name="Products" component={Products} />
      </Stack.Navigator>
   </NavigationContainer>
     );
    }

export default MyStack;

this is what my app.js looks like. im currently using it to render the background image

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import backgroundCopy from './images/backgroundCopy.jpg'
import Login from './components/login'
import { StyleSheet, View, Image } from 'react-native';


export default function App() {
  return (
    <NavigationContainer>
    <View style={styles.container}>
      <Image 
      source={backgroundCopy}
      style={styles.backgroundImage}
      />
      <Login/>
    </View>
      </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundImage: {
    flex:1,
    width: 400,
    height: 50
  }
});

Answer 1

I believe the problem is because you are not linking your stack navigator to the app. In your MyStack component, try removing your NavigationContainer tags. Also in App.js, instead of rendering the login component, import and render the MyStack component instead.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from './login';
import App from '../App';
import Products from './products';

const Stack = createStackNavigator();

function MyStack() {
  return (
  <Stack.Navigator>
    <Stack.Screen name="Login"component={Login}/>
    <Stack.Screen name="App" component={App} />
    <Stack.Screen name="Products" component={Products} />
  </Stack.Navigator>
     );
    }

export default MyStack;

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import backgroundCopy from './images/backgroundCopy.jpg'
// import your MyStack navigation component
import Login from './components/login'
import { StyleSheet, View, Image } from 'react-native';


export default function App() {
  return (
    <NavigationContainer>
    <View style={styles.container}>
      <Image 
      source={backgroundCopy}
      style={styles.backgroundImage}
      />
      <MyStack /> // Render your stack navigator here instead of login component
    </View>
      </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundImage: {
    flex:1,
    width: 400,
    height: 50
  }
});

This is because "NavigationContainer is responsible for managing your app state and linking your top-level navigator to the app environment".

More details can be found in the documentation here: https://reactnavigation.org/docs/navigation-container

Hope this works!

Answer 2

Here is an example of mine:

const AuthStackNavigator = createStackNavigator();

const AuthNavigator = () => {
    return <AuthStackNavigator.Navigator screenOptions={defaultNavOptions} >
        <AuthStackNavigator.Screen name="AuthRegisterScreen" component={AuthRegisterScreen} />
        <AuthStackNavigator.Screen name="AuthSignInScreen" component={AuthSignInScreen} />
        <AuthStackNavigator.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen} />
    </AuthStackNavigator.Navigator>
}

Believe yours is missied Stack.Navigator and Stack.Screen. If set up that way then your Login Screen should get the navigation prop