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
Related
Below is my navigation structure.
*Drawer Navigator (
Dashboard
StackNavigator({
Login
Welcome
})
Profile
StackNavigator({
Profile
})
)*
I have a logout button on the Profile page and on click on it I want to take the user back to the login page.
Please help.
Below is my Navigation.js file
const LoginNavigator = createStackNavigator({
Login: LoginScreen,
DashboardScreen: {
screen: DashboardScreen,
},
CaptureWeightScreen: {
screen: CaptureWeightScreen,
navigationOptions: {
headerBackTitle: " ",
headerTintColor: "#000"
}
}
}, {
navigationOptions: {
drawerLabel: 'Dashboard'
}
});
const ProfileNavigator = createStackNavigator({
ProfileScreen: ProfileScreen
}, {
navigationOptions: {
drawerLabel: 'Profile'
}
});
const MainNavigator = createDrawerNavigator({
DashboardNavigator: LoginNavigator,
ProfileNavigator: ProfileNavigator,
}, {
drawerBackgroundColor: Constants.buttonColor
});
export default createAppContainer(MainNavigator)
this.props.navigation.navigate({ routeName: "Login", params: { } })
Is the answer.
Thanks
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.
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'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.