So I am making an app with the react native and expo router and made progress by creating onboarding and sign-in components and I wanted to show onboarding screen for the first time user opens the app after that he directly goes to sign in page.

I have written this code in my index.jsx file :

import { View, Text, Image, ScrollView } from "react-native";
import React, { useEffect, useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import OnBoarding from "./onboarding/onboarding";
import { router } from "expo-router";
import AsyncStorage from "@react-native-async-storage/async-storage";

const Index = () => {
  useEffect(() => {
    const checkAppLaunch = async () => {
      try {
        const val = await AsyncStorage.getItem("@IsAppFirstOpened");

        if (val === null) {
          await AsyncStorage.setItem("@IsAppFirstOpened", "true");
          setIsAppFirstOpened(true);
        } else {
          setIsAppFirstOpened(false);
        }

        console.log(IsAppFirstOpened);
      } catch (error) {}
    };

    // setIsAppFirstOpened(null);
    checkAppLaunch();
  }, []);

  const [IsAppFirstOpened, setIsAppFirstOpened] = useState(null);

  return (
    <SafeAreaView className=" ">
      <ScrollView>
        {IsAppFirstOpened !== null &&
          (IsAppFirstOpened === true ? <OnBoarding /> : router.navigate('/sign-in'))}
      </ScrollView>
    </SafeAreaView>
  );
};

export default Index;

This is my _layout.jsx :

import { View, Text } from "react-native";
import React, { useEffect } from "react";

import { SplashScreen, Stack } from "expo-router";
import { useFonts } from "expo-font";


const Rootlayout = () => {
  const [fontsLoaded, error] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    "Poppins-ExtraBold": require("../assets/fonts/Poppins-ExtraBold.ttf"),
    "Poppins-ExtraLight": require("../assets/fonts/Poppins-ExtraLight.ttf"),
    "Poppins-Light": require("../assets/fonts/Poppins-Light.ttf"),
    "Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"),
    "Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"),
    "Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
    "Poppins-Thin": require("../assets/fonts/Poppins-Thin.ttf"),
  });

  useEffect(() => {
    if (error) throw error;

    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, error]);

  if (!fontsLoaded) {
    return null;
  }

  if (!fontsLoaded && !error) {
    return null;
  }
  return (
    <Stack>
      <Stack.Screen name="index" options={{ headerShown: false }} />
      <Stack.Screen name="(auth)" options={{ headerShown: false }} />
    </Stack>
  );
};

export default Rootlayout;

But I am getting this warning:

Warning: Cannot update a component (ForwardRef(BaseNavigationContainer)) while rendering a different component (Index). To locate the bad setState() call inside Index, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

How can I resolve this?

I also want to know what is the best way of showing onboarding screen for the first time?

I tried to put AsyncStorage into my _layout.jsx file and used the logic on index screen but it gets me more errors.