React Native Wait Navigation is an efficient solution to handle the initial navigation in your React Native applications.
You can install this package using npm or yarn as per your preference.
npm i react-native-wait-navigation
yarn add react-native-wait-navigation
Start by importing the necessary modules:
import { createRef } from 'react';
import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native';
import { useWaitNavigation } from 'react-native-wait-navigation';
Next, create a reference for the NavigationContainer:
export const navigationRef = createRef<NavigationContainerRef>();
In your App component, use the useWaitNavigation()
hook to delay the navigation until certain conditions are met (e.g. closing the SplashScreen, handling deeplinks):
export default function App() {
useWaitNavigation(navigationRef, () => {
closeSplashScreen();
});
return (
<NavigationContainer ref={navigationRef}>
{/* Rest of your app code */}
</NavigationContainer>
);
}
By employing this library, you can manage your navigation in the application effectively, ensuring a smoother user experience.