Queue navigation until screen is mounted and then navigate

Viewed 694

I am trying to navigate to a certain screen on my bottom-tab-navigator when a user opens the app by clicking a notification.

Looking into the official docs Navigating without the navigation prop, my setup of my main navigator is as follows:

import {navigationRef, isReadyRef} from './root';

const MainNav = _ => {
  if (isLoading) {
    return isFirstTime ? (<OnBoarding />) : (<SplashScreen />);
  }

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {isReadyRef.current = true}}>
        {!token ? <AuthNav /> : <AppNav />}
    </NavigationContainer>
  );
}

My root.js is as follows:

import * as React from 'react';

export const isReadyRef = React.createRef();

export const navigationRef = React.createRef();

export function navigate(name, params) {
  if (isReadyRef.current && navigationRef.current) {
    // Perform navigation if the app has mounted
    navigationRef.current.navigate(name, params);
  } else {
    // You can decide what to do if the app hasn't mounted
    // You can ignore this, or add these actions to a queue you can call later
    console.log('Not mounted yet.')
  }
}

And I had added the OneSignal event listener in my root index.js as following:

const App = _ => {
  useEffect(() => {
    OneSignal.addEventListener('opened', onOpened);
    
    return () => OneSignal.removeEventListener('opened', onOpened);
  }, []);

  return {
    <StoreProvider store={store}>
      <MainNav />
    </StoreProvider>
  }
}

And my onOpened function is as follows:

import {navigate} from '../nav/root';

const onOpened = ({notification}) => {
  if(notification.type == 'New Request'){
    navigate('Notifications');
  }
}

But when I test it as expected Not mounted yet. is printed to console. So I want to

add these actions to a queue you can call later

as stated by the official react navigation docs but I am not sure how to do this. I found react-native-queue but it is no longer being maintained and using a setTimeout just seems like an ugly hack cause the load time varies. So is there a better approach or solution that I can use to navigate only after the loading is done (I am thinking of using redux for this) and my navigators have been mounted (not sure how to do this)?

0 Answers
Related