React navigation v3.x and push notifications listener using Expo

Question

I am working on a React Native project (wrapped-up using Expo) with react navigation v3. So, now I decided to enable real-time push notifications provided by Expo. My goal is to submit some custom data together with the push notification itself and then, once it goes on the device and I open the notification to navigate/route/redirect the app to a specific screen that I have defined. I have configured the notifications, I get expo tokens, I receive the notification, it goes in the handler but when I try to apply the navigation that I use throughout my whole app:

this.props.navigation.navigate('RouteName', {data:{...}})

I am getting undefined. I guess we are somehow not in the context of react navigation and that's why some other approach is required. I just don't know what it is.

The structure of my app is as follows:

HomeStack.js

import { createStackNavigator } from 'react-navigation';

import HomeScreen from '../screens/HomeScreen'
import MailboxItemsScreen from '../screens/MailboxItemsScreen'
import MailboxItemDetailsScreen from '../screens/MailboxItemDetailsScreen'

export default createStackNavigator({
    Home: HomeScreen,
    MailboxItems: MailboxItemsScreen,
    MailboxItemDetails : MailboxItemDetailsScreen
});

SettingsStack.js

import { createStackNavigator } from 'react-navigation';

import SettingsScreen from '../screens/SettingsScreen'

export default createStackNavigator({
    Settings: SettingsScreen
});

AppNavigator.js

import React from 'react';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

import HomeStack from './HomeStack'
import SettingsStack from './SettingsStack'

const TabNavigator = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
        navigationOptions: {
            tabBarIcon:({tintColor})=>(
              
            )
        }
      },
    Settings: {
        screen: SettingsStack,
        navigationOptions: {
            tabBarIcon:({tintColor})=>(
              
            )
        }
      }
});

export default createAppContainer(TabNavigator);

Then I use the TabNavigator in my App.js. It is quite common structure I just don't know how to do the navigation between screens in my push notification handler method.

user_9125171 · Answer

It is likely that you already added a listner at root component's constructor or componentDidMount() like that: Notifications.addListener(this._handleNotifications)

and as the expo document says, you tried to navigate to other screen in _handleNotifications function.

In my case, although navigation structure is slightly different from yours, I added listner at HomeScreen's componentDidMount() and defined _handleNotifications function within HomeScreen component, not at root component (App.js).

Brief version of my `_handleNotifications function is as below:

_handleNotifications = async (notification) => {
  const {a, b, c} = notification.data;
  const {origin} = notification;

  if (origin === 'selected') {
    this.props.navigation.push('History', { 
      a, 
      b, 
      c, 
    })
  } else { // origin is 'received'
    // show notification at the top of my app instead of navigate to other screen
  }
}

if user press notification, then notification is delivered to my app's _handleNotifications function, and since the origin is 'selected', I pushed to other screen called 'History' with parameters received from notification.data. In my case, that works very well.

Since, the behavior of Android and iOS differs slightly, the event handler should do some more jobs. I implemented it with Expo v32.0.0 and react navigation 3.x.x.

Hope this helps.

React navigation v3.x and push notifications listener using Expo

1 Answers