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.
Related
I am using react-navigation and trying to use drawer navigation only on Home Screen.
My code for navigation configuration is like below.
const WIDTH = Dimensions.get("window").width;
const DrawerConfig = {
drawerWidth: WIDTH * 0.83,
// drawerLockMode: "locked-open",
contentComponent: ({ navigation }) => {
return <SideDrawerScreen navigation={navigation} />;
}
};
const AppNavigator = createStackNavigator(
{
Login: LoginScreen,
Details: DetailsScreen,
Home: {
screen: HomeScreen,
navigationOptions: () => ({
header: null
})
}
},
{ initialRouteName: "Login", headerMode: "none" }
);
const DrawerNavigator = createDrawerNavigator(
{
AppNavigator,
Settings: {
screen: SettingsScreen
}
},
DrawerConfig
);
const AppContainer = createAppContainer(DrawerNavigator);
export default AppContainer;
I just want to enable drawer only on HomeScreen.
I was thinking to create drawer navigator on Homescreen and combine it with stack navigator, but I can't find a way and I don't know even it will work.
Is there any way to make it work??
Wrap your Home with other screens you want to use drawer as below.
const DrawerNavigator = createDrawerNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: () => ({
header: null
})
},
Settings: {
screen: SettingsScreen
}
},
DrawerConfig
);
const AppNavigator = createStackNavigator(
{
Login: LoginScreen,
Details: DetailsScreen,
Home: {
screen: DrawerNavigator,
navigationOptions: () => ({
header: null
})
}
},
{ initialRouteName: "Login", headerMode: "none" }
);
I using React Navigation in my react native app, and I have a simple route, HomeScreen and QScreen should have a access to drawer, but SplashScreen and LoginScreen no!
How can I do this?
This code not working and raise an error in read params in HomeScreen (that called in SplashScreen) :
const MainStack = createStackNavigator({
HomeScreen: { screen: HomePage, navigationOptions: noHeadersNavigationOptions },
QScreen: { screen: QPage, navigationOptions: noHeadersNavigationOptions },
}, {
initialRouteName: 'HomeScreen',
});
const DrawerStack = createDrawerNavigator({
MainStack ,
}, {
initialRouteName: 'MainStack',
});
const Router = createStackNavigator({
SplashScreen: { screen: SplashScreenPage },
LoginScreen: { screen: LoginPage },
HomeScreen: DrawerStack,
}, {
initialRouteName: 'SplashScreen',
}
);
export default createAppContainer(Router);
In SplashScreenPage :
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'HomeScreen', params: params })],
});
this.props.navigation.dispatch(resetAction);
I achieved a similar result using this navigation structure :
MainSwitch
LoginPage
MainDrawer
Page1
Page2
Page3
This is a working example :
https://snack.expo.io/#sanjar/c28tNT
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.
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',
}
);
I want to use the Navigator All togather but i fail to implement this the code which i use for integration is
const MyApp = const MyApp = TabNavigator({
Home: {
screen: HomeScreen,
},
Notifications: {
screen: HomeButton,
},
},
DrawerNavigator({
Home: {
screen: list,
},
SwipeList:{
screen:SwipeLists
},
},{
initialRouteName: 'Home',
contentComponent: SideDrawer,
});
});
const Simple = StackNavigator({
Login: {
screen: Login,
},
signup: {
screen: SignUp,
},
forget:{
screen:forget
},
});
I use this above but this is not correct i am not now how to integrate them plz recmond the way how to integrate the three navigator in react native