Im trying to use Stack navigator in react native in order to go from my "welcome screen" to my next page, "create alarm screen" However, it keeps giving me the error that navigation.navigate is undefined.

I created a MyStack function in an index.js file:

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator initialRouteName='WelcomeScreen'>
      <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
      <Stack.Screen name="CreateAlarmScreen" component={CreateAlarmScreen} />
    </Stack.Navigator>
  );
}

export default MyStack;

This is my WelcomeScreen.js file:

import React, { useEffect, useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Dimensions,Button, Text, View ,TouchableOpacity, Image, SafeAreaView, Component } from 'react-native';
import { backgroundColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';



function WelcomeScreen({navigation}) {
    return (
        <SafeAreaView style= {styles.Container}>
            <View style={styles.CreateAlarmButton}>
                <Button 
                onPress={()=>navigation.navigate('CreateAlarmScreen')}
                title='Create an Alarm'
                color="white"
                />
            </View>
            <View style={styles.ViewAlarmButton}>
                <Button 
                title='View Alarms'
                color="black"
        
                />
            </View>
            
        </SafeAreaView>
    );
}
export default WelcomeScreen;

and then this is my app.js file:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Dimensions, Text, View ,TouchableOpacity, Image, SafeAreaView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

import WelcomeScreen from './app/screens/WelcomeScreen';
import CreateAlarmScreen from './app/screens/CreateAlarmScreen';
import MyStack from './app/Navigation';

export default function App() {

  

  return (
    <NavigationContainer>
      <MyStack/>
      </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'peachpuff',
    justifyContent: 'center',
    alignItems: 'center'
    
  },
});

I really confused on how to fix this issue.

CodePudding user response：

navigation is often populated after the first render, so it will be undefined until it populates. Try navigation?.navigate instead.

CodePudding user response：

you can import use navigation, and then you can declare that variable

import { useNavigation } from '@react-navigation/native';
const navigation = useNavigation();