5

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)?

Rubek Joshi
  • 562
  • 7
  • 22

0 Answers0