React Hook used for when user first time opens the app so if you want to show tutorial modal or load only onboarding stack in react-navigation & react-native

useGetFirstTime.js

import { useCallback, useLayoutEffect, useState } from "react";
import { useAsyncStorage } from "@react-native-async-storage/async-storage";

const useGetFirstTime = () => {
  const [firstTime, setFirstTime] = useState(false);
  const { getItem, setItem } = useAsyncStorage("FirstTime");
  const readItemFromStorage = useCallback(async () => {
    const item = await getItem();
    setFirstTime(!item);
  }, [getItem]);

  const setModalVisited = useCallback(async () => {
    setFirstTime(true);
    await setItem(true);
  }, [setItem]);

  // using useLayoutEffect to avoid re-rendering
  // so it get value before view mounts
  // of course, the modal won't mount before
  // we check for layout height or the position.
  useLayoutEffect(() => {
    readItemFromStorage();
  }, [readItemFromStorage]);

  return [firstTime, setModalVisited];
};

export default useGetFirstTime;

useGetFirstTime.md

useGetFirstTime

Description:

React Hook used for when user first time opens the app so if you want to show tutorial modal or load only onboarding stack in react-navigation & react-native

Usage:

import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const OnBoardingStack = createStackNavigator();
const AppStack = createStackNavigation();

const OnboardingNavigator = ({ setFirstTime }) => {
  useEffect(() => {
    setFirstTime();
  }, [setFirstTime]);

  return (
    <OnBoardingStack.Navigator>
      <OnBoardingStack.Screen
        name="onBoarding1"
        component={OnBoardingOneScreen}
      />
      <OnBoardingStack.Screen
        name="onBoarding2"
        component={OnBoardingTwoScreen}
      />
    </OnBoardingStack.Navigator>
  );
};

const AppNavigator = () => {
  return (
    <AppStack.Navigator>
      <AppStack.Screen name="App1" component={AppOneScreen} />
      <AppStack.Screen name="App2" component={AppTwoScreen} />
    </AppStack.Navigator>
  );
};

const App = () => {
  const [firstTime, setFirstTime] = useGetFirstTime();

  return (
    <NavigationContainer>
      {firstTime ? <OnboardingNavigator /> : <AppNavigator />}
    </NavigationContainer>
  );
};

export default App;