I have a project in react native in which I wanted to implement a feature.
I have three screens
slash screen
login screen
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
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.
Related
I'm working on an app in React-Native. How I'm trying to achieve this is by using a SignUpCompleted Flag and checking if its true/false to decide if the page should navigate to the next signup screen or just to the homepage. I have 3 screens as part of the sign-up process that I only want to be shown the 1st time the app opens. I have the 3 screens in a StackNavigator and I'm trying to navigate from the last StackNavigator screen to a BottomTabNavigator screen. Sadly I get the following error:
The action 'NAVIGATE' with payload {"name":"HomeStack"} was not handled by any navigator.
My current setup is as follows:
SignUpStack
const SignUpStack = createStackNavigator();
export default function SignUpStackScreen() {
const [signUpCompleted, setSignUpCompleted] = useState(false);
return (
<SignUpStack.Navigator initialRouteName="Welcome" screenOptions={{ headerShown: false }}>
<SignUpStack.Screen name="Welcome" component={WelcomeScreen} initialParams={{signUpCompleted}} />
<SignUpStack.Screen name="Department" component={ChooseDepartment} initialParams={{signUpCompleted}} />
<SignUpStack.Screen name="InputName" component={InputName} initialParams={{signUpCompleted, setSignUpCompleted}}/>
</SignUpStack.Navigator>
);
}
From the InputName component I try to redirect to a BottomTabNavigator Screen called homename
The redirect code is as follows: - in InputName component
<TouchableOpacity
style={[styles.shadow]}
onPress={() => {navigation.navigate("HomeName"); setSignUpCompleted(true)}}
>
The BottomTabNavigator is as follows: - I'm trying to redirect to HomeStack component
-const Tab = createBottomTabNavigator();
export default function Tabs() {
return (
<Tab.Navigator initialRouteName={homeName} >
<Tab.Screen name={ResultsName} component={ResultatenStack} />
<Tab.Screen name={homeName} component={HomeStack} />
<Tab.Screen name={settingsName} component={SignUpStack} />
</Tab.Navigator>
);
}
When using the same navigation method to direct to screens that are in the stack that I already am, it works fine. I hope someone can give me any pointers or help out! If you need any more info feel free to reach out!
PS: I'm very new to react-native so my apologies if I'm missing information.
I geas you are trying to navigate from stack navigator to tab navigator which is not ideal in react native you have to use nesting navigator
what I mean you have to use the tab navigator as a screen inside the stack navigator
this is React Navigation doc for nesting navigator https://reactnavigation.org/docs/nesting-navigators/
I have a functional Drawer navigator that holds a Stack navigator as shown below:
function DrawerNavigator() {
return (
<Drawer.Navigator>
<Drawer.Screen
name="Categories"
component={CategoriesScreen}
... />
),
}}
/>
<Drawer.Screen
...
</Drawer.Navigator>
);
}
...
return (
<>
...
<NavigationContainer onReady={onLayoutRootView}>
...
<Stack.Screen
name="MealCategories"
component={DrawerNavigator}
options={{ headerShown: false }}
/>
While in the 'Favorites' screen, which is registered under the Drawer Navigator, when attempting to navigate to 'Categories' page which is registered under Stack navigator (but pointed to using Drawer navigator) using navigation.navigate(), there's no navigation animation.
const buttonPressHandler = () => {
navigation.navigate("Categories");
};
Yup it seems the drawer navigator has no support for screen animation. So it all looks great when using the drawer to navigate. But if navigating through links in the page or actions, theres no navigation animation between screens. Been hunting for hours now and I think its simply not implemented.
I am making an instagram clone. i have made it upto navigation. but in my expo app the screen which is added 1st after Stack.Navigator (in below case it is homescreen) shows up on th app, but if i change the initial route name to the second screen it has no effect and still the homescreen shows up. However if i add the 2nd screen before the 1st screen in the code below the 2nd screen shows up.
initial route name seems to have no effect.
import Homescreen from './screens/Homescreen';
import NewPostScreen from './screens/NewPostScreen';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRoutName="1" screenOptions={{ headerShown: false }}>
<Stack.Screen name="1" component={Homescreen} options={{ title: 'Home' }} />
<Stack.Screen name="2" component={NewPostScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
The prop name is wrong. The right name is initialRouteName. Please, rename it.
I have a drawer navigator with many child navigators.
On Android, both Header back arrow and navigation bar back button work and go back to previous screens.
E.g., if I navigate to a bScreen1 through the drawer, both buttons get me back to the Home Screen of the App i.e. aScreen1
On IOS, Header back arrow work fine, HOWEVER, swipe back gets me back to my login screen inside the AuthNavigator instead of aScreen1, which has 0 sens to me because it is outside the drawerNavigator, and at the same level inside the RootNavigator. The swipe back does not perform a navigation.goBack().
I have already tried overriding the swipe behavior by adding a listener on 'beforeRemove' event and then calling navigation.goBack(), but the wrong screen still shows up for a instant before moving to the right one (previous one)
...
import { createDrawerNavigator } from '#react-navigation/drawer'
import { createStackNavigator } from '#react-navigation/stack';
const DrawerNavigator = createDrawerNavigator();
const rootStack = createStackNavigator();
...
drawerNavigator() {
return (
<DrawerNavigator.Navigator>
<DrawerNavigator.Screen component={aNavigator} />
<DrawerNavigator.Screen component={bNavigator} />
...
<DrawerNavigator.Screen component={zNavigator} />
</DrawerNavigator.Navigator>
)}
aNavigator() {
return (
<ANavigator.Navigator>
<ANavigator.Screen component={aScreen1} />
...
<ANavigator.Screen component={aScreen10} />
</ANavigator.Navigator>
)}
bNavigator() {
return (
<ANavigator.Navigator>
<ANavigator.Screen component={bScreen1} />
...
<ANavigator.Screen component={bScreen10} />
</ANavigator.Navigator>
)}
<rootStack.Navigator initialRouteName="AuthNavigator" screenOptions={{ headerShown: false }}>
<rootStack.Screen name="AuthNavigator" component={createAuthNavigator} />
<rootStack.Screen name="DrawerNavigator" component={drawerNavigator} />
</rootStack.Navigator>
Ps: I am using all the latest versions of navigation packages
I had the same issue when I set animationEnabled: false, if you set it to true you should be able to swipe to switch screens.
I wanted to open different screen if pressed the text. But unfortunately I don't understand this docs. Is there any other different option, like 'a href' in html? Or could anyone explain this to me?
Install react-navigation
Make edits to App.js
Wrap all of the JSX of App.js in a NavigationContainer with a Stack.Navigator nested under it
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
{Your Screens}
</Stack.Navigator>
</NavigationContainer>
);
Now we set up screens. Each screen will use the StackScreen component and needs a screen name and the screen component itself
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
/>
With this completed, each screen will now have a navigation prop. In the screen where you have your text button set your onPress to something like this:
<Button
title="Navigate to Home"
onPress={()=>props.navigation.navigate("Home")
/>
navigation.navigate identifies the screen you're trying to get to by using the name you provided in App.js Stack.Screen