react native navigate between screen

Question

I have a project in react native in which I wanted to implement a feature. I have three screens

1. slash screen
2. login screen
3. home screen

the slash screens last 1 second and leave on the home screen while the number of times the app has been opened does not exceed 3 times. otherwise we display the login screen to ask for a password

Answer 1

About how to make the splash screen last 1 second, on Splash component, put an useEffect like this:

function Splash({ navigation }) {
useEffect(() => setTimeout(navigation.navigate('Home')),[]);

  return (
    <View>
      <Image />
    </View>
  );
}

About conditional first screen when open the app, you can pass initialRouteName as a prop of Stack.Navigator:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <Stack.Navigator initialRouteName={times < 3 ? Slash : Login}>
      <Stack.Screen name="Slash" component={Slash} />
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Login" component={Login} />
    </Stack.Navigator>
  );
}

Note: my examples above use StackNavigator and on React Navigation v6, it works the same as TabNavigator and other versions of React Navigation.