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" }
);
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.
Im using react-navigation to build my app, I want to have both tab and stack navigation so I did this:
const FindPage = StackNavigator({
Find: {
screen: Find,
},
Item:{
screen:Item
}
}, {
initialRouteName: 'Find',
});
const ProfilePage = StackNavigator({
Profile: {
screen: Profile,
},
Item:{
screen:Item
}
}, {
initialRouteName: 'Profile',
});
const MyApp = createBottomTabNavigator({
Find: FindPage,
Profile: ProfilePage
}
});
const auth = StackNavigator({
Login:{
screen: Login,
},
Register:{
screen: Register,
},
Main:{
screen: MyApp,
}
},{
initialRouteName: 'Main',
headerMode: 'none'
});
export default auth;
But I dont get it well. this is what the screenshot is
giving:
enter image description here
if you see the tab lost it tab icon and font when im using stacknavigation in tab navigation, this worked for me in another version of react nvigation and cant find anything on the web Please Help !
with reactnavigation2 you can achieve this like in the below code
Read more about it here https://reactnavigation.org/docs/en/bottom-tab-navigator.html
import Ionicions from "react-native-vector-icons/Ionicons";
screen: createBottomTabNavigator(
{
HomeScreen: {
screen: HomeStack,
navigationOptions: {
tabBarLabel: props => <Label name="Home" {...props} />,
tabBarIcon: props => (
<Icon name="ios-home-outline" fillname="ios-home" {...props} />
)
}
}
})
TLDR: I have a Login screen where user logs in and navigates to second screen. There I want to open the menu and have the user name appear as text. How can I pass the user name to the menu? (DrawerNavigator).
Some samples of my code below.
Router:
import MyMenu from './MyMenu';
const MyStack = StackNavigator({
Login: {screen: Login},
Home: {screen: Home}
// more screens...
});
export const MyDrawer = DrawerNavigator({
Main: { screen: MyStack }
},
{ contentComponent: MyMenu }
);
Home Screen:
openMenu() {
this.props.navigation.navigate('DrawerOpen', userName);
}
MyMenu:
render() {
const userName = this.props.navigation.state.params;
return (
<View>
<Text>{userName}</Text>
// more stuff
</View>
);
}
I think this is what you want.
import MyMenu from './MyMenu';
const MyStack = StackNavigator({
Login: {screen: Login},
Home: {screen: Home}
// more screens...
});
export const MyDrawer = DrawerNavigator({
Main: { screen:({navigation}) => <MyStack screenProps={drawerNavigation:navigation}/> }
},
{ contentComponent: MyMenu }
);
Then you can access drawer's navigation from your Stack navigation like below.
this.props.screenProps.drawerNavigation.DO_WHATEVER
You need to pass props to your MyMenu Component:
Router:
export const MyDrawer = DrawerNavigator({
Main: { screen: MyStack }
},
{ contentComponent: (props) => <MyMenu {...props} /> }
);
Home Screen:
openMenu() {
this.props.navigation.navigate('DrawerOpen', {userName: userName});
}
Alright, after spending so much time on this, I finally found a solution.
Simply put, you can only send navigation props when navigating to a new screen - 'DrawerOpen' does not count for this.
To solve this I had to change my structure a little bit, instead of having the DrawerNavigator as the root drawer, I have a StackNavigator as the root drawer.
Before:
const MyStack = StackNavigator({
Login: {screen: Login},
Home: {screen: Home}
// more screens...
});
export const MyDrawer = DrawerNavigator({
Main: { screen: MyStack }
},
{ contentComponent: MyMenu }
);
After:
const MyStack = StackNavigator({
Home: {screen: Home},
// more screens...
});
const MyDrawer = DrawerNavigator({
Main: { screen: MyStack }
},
{ contentComponent: MyMenu }
);
export const RootStack = StackNavigator({
Login: {screen: Login},
Drawer: {
screen: MyDrawer,
navigationOptions: { header: null } } //prevent double header
});
Now in Login screen I navigate to Drawer like this:
_login() {
this.props.navigation.navigate('Drawer', { userName: userName });
}
And finally in MyMenu (which is part of 'Drawer'):
render() {
const { userName } = this.props.navigation.state.params;
return (
<View>
<Text>{userName}</Text>
// more stuff
</View>
);
}
It works!