React native Question posted in
The official React Native documentation can be found here.

How to make certain pages only appear when the app is first downloaded – React Native

I am creating an app using React Native where I have a few pages that are only to be displayed when the app is first opened, these pages include selecting language and allowing access to location and notification pages.

How can I make these pages appear only once when the app is first downloaded.

Currently, I am storing all pages in a stack in the main ‘App.js’ file.

<NavigationContainer>
  <Stack.Navigator screenOptions={{headerShown:false}}>
    <Stack.Screen name='selectLanguage' component={selectLanguage} />
    <Stack.Screen name='setLocation' component={setLocation} />
    <Stack.Screen name='enableNotifications' component={enableNotifications} />
    <Stack.Screen name='HomePage' component={HomePage} />
  </Stack.Navigator>
</NavigationContainer>
Tags:

2

Answers


  1. 0

    After navigating to the home screen for the first time set your flag in my case IntroShown to 1

    useEffect(()=>{AsyncStorage.setItem("IntoShown", "1")},[])

    then you app.js will look something like

    function App() {
const Stack = createNativeStackNavigator();
const [isShown, setIsShown] = useState("0")
useEffect(() => {
    checkIntro()
}, [])

const checkIntro = async () => {
    let temp = await AsyncStorage.getItem("IntoShown")
    setIsShown(temp)
}

return (
        <Stack.Navigator screenOptions={{ headerShown: false, gestureEnabled: false }}>
            {isShown == "0" && <>
                    <Stack.Screen name='selectLanguage' component={selectLanguage} />
<Stack.Screen name='setLocation' component={setLocation} />
<Stack.Screen name='enableNotifications' component={enableNotifications} />
            </>}
<Stack.Screen name='HomePage' component={HomePage} />

    </Stack.Navigator>
    </Stack.Navigator>
    )
    }

    Login or Signup to reply.
  2. 0

    You can probably do something like this

      const App = () => {
  const [firstLaunch, setFirstLaunch] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    checkFirstLaunch();
  }, []);

  const checkFirstLaunch = async () => {
    const hasLaunched = await AsyncStorage.getItem('hasLaunched');
    if (hasLaunched === null) {
      await AsyncStorage.setItem('hasLaunched', 'true');
      setFirstLaunch(true);
    } else {
      setFirstLaunch(false);
    }
    setIsLoading(false);
  };

  if (isLoading) {
    return (
       <ActivityIndicator />
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {firstLaunch ? (
          <>
            <Stack.Screen name='selectLanguage' component={selectLanguage}/>
            <Stack.Screen name='setLocation' component={setLocation} />
            <Stack.Screen name='enableNotifications' component={enableNotifications} />
              </>
          ) : (
            <Stack.Screen name='HomePage' component={HomePage} />
          )}
          </Stack.Navigator>
        </NavigationContainer>
      );
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search