'navigate' undefined | React Native | Android | in App.js file

Question

I am learning React Native and don't have very much experience with this. I am trying to navigate in the App.js file and it gives "TypeError: Cannot read property 'navigate' of undefined" on this line: this.props.navigation.navigate("BlogScreen", {"postId": notification.data.post_id}); I have tried debugging it and also tried a few solutions already asked for a similar question but none seems to work. The difference b/w those questions and mine I think only is that the navigation code is written in "App.js" file in mine. I will be truly grateful for any help I can get.

Some configuration info from package.json:

"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"axios": "^0.21.1",
"react": "16.13.1",
"react-native": "0.63.4",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",

And following is my App.js file

import React, { Component } from 'react'
import AppNavigation from "./app/src/appnavigation/AppNavigation"
import { Provider } from 'react-redux'
import Store from './app/src/redux/store/Store'
import { MenuProvider } from 'react-native-popup-menu'
import FCMServices from "./app/src/utility/PushNotificationHandler"
class App extends Component {
    componentDidMount() {
        let obj = FCMServices.getInstance(this.FCMServiceCallback);
        obj.setNavigationInstance(this.props.navigation);
        obj.register(this.onRegister, this.onNotification, this.onOpenNotification)
    }

    FCMServiceCallback = () => {
        console.log("FCMServiceCallback")
    }

    onRegister = (fcmToken) => {
        console.log(fcmToken, "fcmToken")
    }

    onNotification = (notification) => {
        console.log(notification, 'notificationnotificationnotification')
    }

    onOpenNotification = (notification) => {
        this.handleNotificationsClick(notification)
    }

    handleNotificationsClick = (notification) => {
        if (!notification.data) {
            return;
        } else {
            this.props.navigation.navigate("BlogScreen", {"postId": notification.data.post_id});
            console.log(notification, 'notificationClicked')
        }
    }

    render() {
        return (
            <Provider store={Store}>
            <MenuProvider>
            <AppNavigation />
            </MenuProvider>
            </Provider>
        );
    }
}
export default App

Answer 1

You need to wrap the whole Render tree with NavigationContainer

import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

Would suggest creating a new Root Stack and move your code in the HomeScreen Component to access the navigation prop. Here's an example of how you can do it.

 // In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

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

export default App;

Helpful links: https://reactnavigation.org/docs/hello-react-navigation#creating-a-stack-navigator

Answer 2

Your App.js don't have the navigation prop. This prop is only given to screens referenced in your Navigator (stack, drawer, ...)

The best way to achieve this is by using deep linking that gives you a general interface to interact with both incoming and outgoing app links.

There is a short tutorial about it

Related issue