How to show a screen once in React Native?

user_5513295 0
Viewed 1527

How can I show the firstScreen to user only once, when they open the app for the first time(like a welcoming screen)? I want user to see secondScreen in next openings.

App.js Screen:

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

import firstScreen from "./src/screens/firstScreen.js";
import secondScreen from "./src/screens/secondScreen,js";

const Stack = createStackNavigator();

function App() {
  
  return (
    <NavigationContainer>
      <Stack.Navigator>
           <Stack.Screen
             name="First"
             component={firstScreen}
             options={{
               headerShown: false,
             }}
           />
          <Stack.Screen
            name="Second"
            component={secondScreen}
            options={{
              headerShown: false,
            }}
          />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
react-native-navigation react-native reactjs
2 Answers

You can store a value in local storage. And maybe check with useEffect and set a state for that check. Then you can render conditionally. Hope that gives you an idea.

user_117298120 
function App() {

  const [showOneTimeScreen, setShowOneTimeScreen] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    /* 
    Check from localstorage or from somewhere should you
    show "OneTimeScreen"
    and setShowOneTimeScreen to needed value , and setLoading to true
    */
  }, []);


  if (loading) {
    return <LoadingScreen />
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {showOneTimeScreen && (
          <Stack.Screen name="OneTimeScreen" component={OneTimeScreen} />
        )}
        <Stack.Screen
          name="Second"
          component={secondScreen}
          options={{
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}




function OneTimeScreen() {

  useEffect(() => {
    /* 
    Set to localstorage or somewhere you want
    that  "OneTimeScreen" has been shown
    */
  }, []);


  ....
}
user_91368520
Related