TypeError: Cannot read properties of undefined (reading 'props')

Question

I am making a social.networking app using react native. The user can take a picture, click on the save button to navigate to the save screen with the image uri passed as a prop. Here is the code -

App.js

const store = createStore(rootReducer, applyMiddleware(thunk))

const Stack = createStackNavigator()

export default function App() {

    const [loading, setLoading] = useState(false)
    const [loggedIn, setLoggedIn] = useState(false)

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    return (
        <Provider store={store}>
            <NavigationContainer>
                <Stack.Navigator initialRouteName="HomeScreen">
                    <Stack.Screen
                        name="HomeScreen"
                        component={HomeScreen}
                        options={{headerShown: false}}
                    />
                    <Stack.Screen
                        name="CreatePostScreen"
                        component={CreatePostScreen}
                        options={{title: "New Post!"}}
                        navigation={this.props.navigation}   //error line
                    />
                    <Stack.Screen
                        name="SaveImageScreen"
                        component={SaveImageScreen}
                        options={{title: ""}}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </Provider>
    )
}

CreatePostScreen.js

function CreatePostScreen({navigation}) {

    const [hasCameraPermission, setHasCameraPermission] = useState(null)
    const [hasGalleryPermission, setHasGalleryPermission] = useState(null)
    const [type, setType] = useState(Camera.Constants.Type.back)
    const [camera, setCamera] = useState(null)
    const [image, setImage] = useState(null)

    useEffect(() => {
        ~~~~~~~~~~~~~~~
    }, [])

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    const takePicture = async () => {
        if (camera) {
            const data = await camera.takePictureAsync(null)
            setImage(data.uri)
        }
    }    

    return (
        <View style={{flex: 1}}>
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
                <IconButton
                    icon="radiobox-marked"
                    color={Colors.SEA_BLUE}
                    size={35}
                    onPress={() => takePicture()}
                />
                <IconButton
                    icon="check-circle"
                    color={Colors.SEA_BLUE}
                    size={35}
                    onPress={() => navigation.navigate("SaveImageScreen", {image})} //saved image uri is passed to another screen as prop   
                />
            </View>
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        </View>
    )
}

The CreatePostScreen and SaveImageScreen are both stack screens under navigation container in the App.js.

But whenever I run the app, I am getting this error ~

TypeError: Cannot read properties of undefined (reading 'props')

or, sometimes this error ~

TypeError: undefined is not an object (evaluating 'this.props') 

What changes should I make in the code?

Answer 1

Why are you using this.props ? This is not class based component.
You are using functional, you should write something like: export default function App(props) {
And access with props.navigation

Answer 2

remove

navigation={this.props.navigation}

      

Answer 3

You need to remove this

navigation={this.props.navigation}   //error line

this keyword is used for class-based components and your component is a functional component and you don't need to pass navigation ( I see what you are trying to achieve) inorder to navigate through components you can just use the hook from react-navigation as below

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}