CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stack
kabore aziz
kabore aziz

Reputation: 1

react native navigate between screen

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

Upvotes: 0

Views: 704

Answers (1)

Thanh Chương
Thanh Chương

Reputation: 160

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.

Upvotes: 2

Related Questions