react navigation 5.x with react native firebase getInitialNotification method

Viewed 605

I am using react native firebase getInitialNotification method to handle push notification when the app is killed (totally closed and is not in background). I want to navigate the user to a desired screen when the user taps on the push notification.

Current behaviour: The push notification is always received but the navigation is not stable, sometimes work, sometimes does not.

What do I mean by not working: The app opens and show me the home screen, the navigation does not occur.

Expected behaviour: As a user, when I tap on the push notification on the status bar, the app will open and navigate to a desired screen.

I am initializing the the firebase listeners in App.tsx:

class App extends Component {
  componentDidMount() {
    messaging().onNotificationOpenedApp(this.handleSelected);
    messaging().onMessage(this.handleOnMessage);
    messaging()
      .getInitialNotification()
      .then(this.handleSelected);
    RNBootSplash.hide();
  }

  render() {
    return (
      <Provider store={store}>
        <AppContainer/>
      </Provider>
    );
  }
}

Remarks: Where do I initialize the NavigationContainer? In AppContainer as follow:

export default function AppContainer() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <NavigationContainer ref={navigatorRef}>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          gestureEnabled: false,
        }}>
        {isLoggedIn ? (
          <>
            <Stack.Screen name="App" component={AppStack}/>
            <Stack.Screen name="Auth" component={AuthorizationStack}/>
          </>
        ) : (
          <>
            <Stack.Screen name="Auth" component={AuthorizationStack}/>
            <Stack.Screen name="App" component={AppStack}/>
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Where do I handle the navigation? In handleOnMessage method, using navigate object.

Does the navigation works when the app is open in the background? yes always works perfectly. (As you can see in the code, I am using onNotificationOpenedApp for that)

My hypothesis according to my observation:

  • I am using "react-native-bootsplash", maybe this can have conflict with firebase listeners when the app opens from killed state.
  • I am using "@react-navigation/stack", maybe I am initializing the firebase listeners before the NavigationContainer is initialized.
    "@react-native-firebase/app": "^7.1.0",
    "@react-native-firebase/messaging": "^7.1.1",
    "react-native-bootsplash": "^2.2.5",
    "@react-navigation/native": "^5.2.1",
    "@react-navigation/stack": "^5.2.16"
0 Answers
Related