I'm currently implementing a small React Native app, and here is the navigators I'm currently having:
const RootNav= createStackNavigator(
{
Login: LogInScreen,
},
);
const TabNav = createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Calendar: { screen: CalendarScreen },
Discussion: { screen: DiscussionScreen },
Profile: { screen: ProfileScreen },
},
);
export const SwitchNav = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: RootNav,
MainApp: TabNav,
},
{
initialRouteName: 'AuthLoading',
},
);
Right now in HomeScreen and CalendarScreen there are several Card components which should navigate to another screen named EventScreen with the options to go back to the previous screen which should be another createStackNavigator I think, but I still need help what's the right way to set up the navigators. Thanks in advance.
You can have a parent StackNavigator with EventScreen and TabNav as its children:
const RootNav = createStackNavigator(
{
Login: LogInScreen,
}
);
const HomeNav = createStackNavigator(
{
tabNav: TabNav,
Events: { screen: EventScreen },
}
);
const TabNav = createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Calendar: { screen: CalendarScreen },
Discussion: { screen: DiscussionScreen },
Profile: { screen: ProfileScreen },
}
);
export const SwitchNav = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: RootNav,
MainApp: HomeNav,
},
{
initialRouteName: 'AuthLoading',
}
);
If you feel like you'll need a DrawerNavigation as well in the future, it is a good idea to take care of it now. This article may help.
Related
I am trying to navigate from "Auth" stack to "App" stack.
I got response exactly from backend,(Laravel) but it doesn't navigate to "App" stack.
That is my code.
How to navigate from "SignIn" screen to "Home" screen?
const AuthStack = createStackNavigator({
First: FirstScreen,
SignIn: SignInScreen, //-----> Navigate from here
SignUp: SignUpScreen,
ForgotPass: ForgotPassScreen,
}, {
initialRouteName: 'First'
});
const HomeStack = createStackNavigator({
Home: { screen: HomeScreen },
});
const HistoryStack = createStackNavigator({
History: { screen: HistoryScreen },
});
const RepaymentStack = createStackNavigator({
Repayment: { screen: RepaymentScreen },
});
const ProfileStack = createStackNavigator({
Profile: { screen: ProfileScreen },
});
const AppStack = createBottomTabNavigator(
{
Home: { screen: HomeStack }, //-----> Navigate to here
History: { screen: HistoryStack },
Repayment: { screen: RepaymentStack },
Profile: { screen: ProfileStack },
}
);
export default createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: AuthStack,
App: AppStack,
},
{
initialRouteName: 'AuthLoading',
}
)
);
Assuming your SignIn screen is a class, you should use navigation.navigate
this.props.navigation.navigate('App');
The switch navigator will navigate to the App stack and as Home is the first tab it would be shown.
I'm new to react native, and I've problem with navigating between one of my screen to another.
I'm using stacknavigator like this:
const RootStack = createStackNavigator(
{
Splash: { screen: SplashScreen},
Mobile:{screen:MobileAuthentication} ,
Code:{screen:CodeAuthentication} ,
Home: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
ProfileDetails: { screen: ProfileDetails },
},
{ initialRouteName: 'Splash'}
);
const AppContainer = createAppContainer(RootStack);
In my homeScreen I am using buttomtabnavigator
const bottomTabNavigator = createBottomTabNavigator(
{
A: {
screen: ProfileScreen,
navigationOptions: {
...
}
},
B: {
screen: FilterScreen,
navigationOptions: {
...
}
},
},
{
initialRouteName: 'FilterScreen',
tabBarOptions: {
activeTintColor: '#3F51B5'
}
}
);
const AppContainer = createAppContainer(bottomTabNavigator);
The problem is that when I want to navigate from ProfileScreen to ProfileDetails by onpress then it's not working
<ProfileBtn
onPress={() => {
console.log('item Clicked'),
this.props.navigation.navigate('ProfileDetails')
} }
/>
Maybe you should try to pass "navigation" into your stackNavigator creation, using the options with smthg like this (for each of your stack screen or at least those within which you want to use it) :
options={({route, navigation}) => (
{headerTitle: 'Splash',
route: {route},
navigation: {navigation}}
)}
If that's not the answer, please provide us with the error you get in your console.
My router setup is as below
import { createAppContainer, createDrawerNavigator, createStackNavigator, createSwitchNavigator } from "react-navigation";
import Home from "./components/Home";
import Search from "./components/Search";
import Map from "./components/Map";
import Login from "./components/Login";
import ForgotPassword from "./components/ForgotPassword";
import SideMenu from "./SideMenu";
const DashboardStack = createStackNavigator(
{
Home: { screen: Home },
Search : {screen : Search}
}
);
const MapStack = createStackNavigator(
{
Map: { screen: Map },
}
);
const AuthStack = createStackNavigator(
{
Login: { screen: Login },
ForgotPassword: { screen: ForgotPassword },
}
);
export const DrawerStack = createDrawerNavigator(
{
Dashboard: { screen: DashboardStack },
Map: { screen: MapStack },
},
{
contentComponent: SideMenu,
drawerWidth: 250
}
);
export const AppNavigator = createStackNavigator(
{
Drawer: { screen: DrawerStack },
Auth: { screen: AuthStack },
},
{
// initialRouteName: "Drawer",
headerMode: 'none',
mode: 'modal',
}
);
export default createAppContainer(DrawerStack);
Everything working fine, just a small issue. When I navigate to search screen from home and then switch to the Map screen with parameters, those parameters are not reaching to the Map screen.
My current setup is at codepan
Your problem is that your MapStack and your Map screen both have the same name, 'Map'.
Just replace the MapStack route to something else like 'MapStack' and you'll get the params.
See here: https://snack.expo.io/SyTFUPZUB
export const DrawerStack = createDrawerNavigator(
{
Dashboard: { screen: DashboardStack },
MapStack: { screen: MapStack },
},
{
contentComponent: SideMenu,
drawerWidth: 250
}
);
#sfratini is right
The issue is indeed "Map" key being present in two places.
So navigation.navigate("Map") will navigate to MapStack.
Navigating to stack means going to current screen of that stack which defaults to initialRouteName or first screen in the stack.
To verify this, add another screen as first screen in MapStack and check the behaviour.
So, solution to your issue is to rename "Map" key to something else, as suggested by #sfratini.
It works fine by just adding map screen to dashboard stack
const DashboardStack = createStackNavigator(
{
Home: { screen: Home },
Search : {screen : Search},
Map: { screen: Map }
}
);
then use
this.props.navigation.getParam('name', 'name is coming')
to get the name params value
here is the code
https://snack.expo.io/HyEFZeyLB
you can reach the parameters in your Map screen like following:
update this :
render() {
return (
<SafeAreaView style={styles.container}>
<Text>Map</Text>
</SafeAreaView>
)
}
to this :
render() {
return (
<SafeAreaView style={styles.container}>
<Text>{this.props.navigation.state.params.name}</Text>
</SafeAreaView>
)
}
and you have to put your Map screen in with home and search Stack like following:
import { createAppContainer, createDrawerNavigator, createStackNavigator,
createSwitchNavigator } from "react-navigation";
import Home from "./components/Home";
import Search from "./components/Search";
import Map from "./components/Map";
import Login from "./components/Login";
import ForgotPassword from "./components/ForgotPassword";
import SideMenu from "./SideMenu";
const DashboardStack = createStackNavigator(
{
Home: { screen: Home },
Search : {screen : Search},
Map: { screen: Map },
}
);
const AuthStack = createStackNavigator(
{
Login: { screen: Login },
ForgotPassword: { screen: ForgotPassword },
}
);
export const DrawerStack = createDrawerNavigator(
{
Dashboard: { screen: DashboardStack },
},
{
contentComponent: SideMenu,
drawerWidth: 250
}
);
export const AppNavigator = createStackNavigator(
{
Drawer: { screen: DrawerStack },
Auth: { screen: AuthStack },
} ,
{
// initialRouteName: "Drawer",
headerMode: 'none',
//mode: 'modal',
}
);
export default createAppContainer(DrawerStack);
the result from your snak :
hope this will help.
const RootStack = MultiNavigator({
Splash: {
screen: Splash
},
Registration: {
screen: Registration
},
WelcomeScreen: {
screen: WelcomeScreen
},
HomeScreen: {
screen: HomeScreen
}
}, {
initialRouteName: "HomeScreen",
},
);
what ever i rendered as initial page , some space is coming at top side. I have to avoid it. I used header: null/none/false. But no result.Thanks in advance.
I have fixed this issue, by using headerMode: none.
const RootStack = MultiNavigator({
Splash: {
screen: Splash
},
Registration: {
screen: Registration
}
}, {
initialRouteName: "Registration",
headerMode: "none"
});
I want to know if it's possible to handle login screen after the button login pressed,
I have a router.js:
export const TabLoged= TabNavigator({
Home: {
screen: HomeStack,
},
MyPatient:{
screen: MyPatientStack
},
MyAccount: {
screen: MyAccount,
}
});
export const Tab = TabNavigator({
Home: {
screen: HomeStack,
},
Login: {
screen: LoginStack,
}
});
export const Root = StackNavigator({
Tab: {
screen: Tab,
}
},{headerMode:'none'})
In export const Root I want to change the code looks like :
export const Root = StackNavigator({
Tab: {
// here i want to set the `alredyLogin` to be boolean, but i dont know how to do that
screen: alreadyLogin ? TabLoged : Tab,
}
},{headerMode:'none'})
Refer to this question I dont get it how to handle this issue, so I want to know there's another way to archive my goal?
To achieve desired behavior you can use SwitchNavigator. There is a really good example for it in the doc. You can check it here.
SwitchNavigator reference
SwitchNavigator(RouteConfigs, SwitchNavigatorConfig)
Example from docs
const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = StackNavigator({ SignIn: SignInScreen });
export default SwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);