'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

BloodyMonkey · Accepted Answer · 2021-07-05 13:59:10Z

1

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

answered Jul 5, 2021 at 13:59

BloodyMonkey

1,6731 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

samridhgupta · Accepted Answer · 2021-07-05 14:06:51Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related