Rendering another screen in react-native app

Question

I'm experiencing trouble navigating between pages in my react native app. When I attempt to use the button, I get the following error message: TypeError: undefined is not an object (evaluating '_this.props.navigation') I have created my app using numerous js files, and id like to navigate between them using buttons. My App.js file renders to the WelcomeScreen from initializing.

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import RecipesList from "cakeapp/app/screens/RecipesList.js";
import { ImageBackground, StyleSheet, View, Text, Button, navigation } from "react-native";


function WelcomeScreen(props) {
    return (
        <NavigationContainer>
        <ImageBackground
        style={styles.background}
        source={require('cakeapp/app/assets/MainPage.png')}
        >
        <Text style={styles.text}>MyCakeRecipes</Text>
        <View style={styles.homeButton}>
       <Button
        title="Recipes"
        onPress={() => this.props.navigation.navigate('RecipesList')}
        />
        </View>
        </ImageBackground>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    background: {
        flex:1,
        justifyContent: "flex-end",
    },
    text: {
    fontSize: 30,
    fontWeight: "bold",
    color: "white",
    textAlign: "center",
    bottom: 500,
  },
    homeButton: {
        width: '100%',
        height: 40,
        backgroundColor: '#5f7f8a'
    }
})

export default WelcomeScreen;


import React from 'react';
import { Image, ScrollView, View, Text, } from 'react-native';

const imageDis = {
  width: 150,
  height: 150
  //flex:1,
  //justifyContent: "flex-end"

};

const Recipes = () => (
  <ScrollView style={{backgroundColor: '#5f7f8a'}}>
    <Text style={{ fontSize: 20 }}>Chocolate Cake</Text>
    <Image source={require('cakeapp/app/assets/Choc.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Chocolate cupcake</Text>
    <Image source={require('cakeapp/app/assets/ChocCu.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Lemon Cake</Text>
    <Image source={require('cakeapp/app/assets/Lemon.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Lemom meringue</Text>
    <Image source={require('cakeapp/app/assets/LemonM.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Chocolate Berry</Text>
    <Image source={require('cakeapp/app/assets/ChcoBerry.png')} style={imageDis} />
  </ScrollView>
);

export default Recipes

Answer 1

As far as I know, < NavigationContainer> is used in app.js file to define the screens you want to navigate to. And you have to pass navigation as a prop to the component. Your app.js file should look something like this

 const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Welcome" component={WelcomeScreen} /> <Stack.Screen name="Recipes" component={RecipesList} /> </Stack.Navigator> </NavigationContainer> ); };

And your welcomeScreen like this:

 const WelcomeScreen = ({ navigation }) => { return ( <Button title="RecipesList" onPress={() => navigation.navigate('RecipesList') } /> ); };

Let me know if it doesnt work