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
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 have a StackNavigation like this:
const AppNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: () => ({
title: 'Login',
headerTintColor: 'white',
headerStyle:{
backgroundColor: '#000',
elevation: 0,
showdowOpacity: 0
},
})
},
Home: {
screen: AppDrawerNavigator,
navigationOptions: () => ({
header: null
})
},
});
With a DrawerNavigator nested inside:
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: Home,
navigationOptions: {
drawerLabel: 'Home',
gesturesEnabled: false,
}
},
Favorites: {
screen: Favorites,
navigationOptions: {
drawerLabel: 'Favorites',
}
}
},
{
drawerPosition: 'left',
contentComponent: props => <Drawer {...props} />
});
The initial route of the stack navigator is working fine
Login -> Home
But when I try navigating from Home to Favorites it navigates immediately back to Home after rendering the Favorites screen.
I am using react-navigation#2.11.2 and react-native#0.56.0
With Home being used in both stack and drawer navigator.
There are high chances of name conflicts occurring here.
Try this structure.
const Stack = {
FirstView: {
screen: FirstView
},
SecondView: {
screen: SecondView
},
ThirdView: {
screen: ThirdView
}
};
const DrawerRoutes = {
FirstViewStack: {
name: 'FirstViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'FirstView' })
},
SecondViewStack: {
name: 'SecondViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'SecondView' })
},
ThirdViewStack: {
name: 'ThirdViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'ThirdView' })
},
};
const RootNavigator =
StackNavigator({
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(
DrawerRoutes,
),
},
...Stack
},
{
headerMode: 'none'
}
);
I faced a similar issue when i tried to use a hamburger menu in my Home page (which uses stack navigator to goto other pages).
Check this Git Article also.
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} />
)
}
}
})
Consider the render of the Main component:
render() {
const { isAuthenticated } = this.props;
return (
<View>
{isAuthenticated ? <Dashboard /> : <Login />}
</View>
);
I want to lock the drawer in the Login component. Now i know that i could achieve this if Login wasn't a child of Main this way (in my Router component):
Login: {
screen: Login,
navigationOptions: () => ({
drawerLockMode: 'locked-closed',
}),
},
But since Login is a child of Main and Main has the drawer, Login will automatically have the drawer too. I've tried "overriding" it by calling this in Login:
static navigationOptions = {
drawerLockMode: 'locked-closed',
};
But no success. Here's my Router:
const Stack = {
Main: { screen: Main },
Login: {
screen: Login,
navigationOptions: () => ({
drawerLockMode: 'locked-closed',
}),
},
Outbox: { screen: Outbox },
Dashboard: { screen: Dashboard },
JobList: { screen: JobList },
CreateJob: { screen: CreateJob },
Reporting: { screen: Reporting },
JobDescription: { screen: JobDescription },
};
const DrawerRoutes = {
DrawerStack: {
name: 'DrawerStack',
screen: StackNavigator(
Stack,
{
initialRouteName: C.MAIN,
headerMode: 'none',
navigationOptions: {
gesturesEnabled: false,
},
}),
},
};
export const DrawerNavigation = StackNavigator({
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(DrawerRoutes, {
contentComponent: DrawerPanel,
}),
},
...Stack,
}, { headerMode: 'none' });
Is there a way to achieve this ?
i created drawer navigator and one of option is open facebook page (from app or URL) it's work fine but after the openning facebook page i try to go back and its threwing error..
i try try to fix that with return null after 'catch' and the error disappeare but its return to null page and i need to click back again to actually return to the right page.
what can i do to fix that?
class Root extends Component {
render(){
const { navigation } = this.props.navigation;
const Drawer = DrawerNavigator({
Home:{
screen: HomeScreen,
navigationOptions: {
drawerLabel: 'home',
},
},
FacebookPage: {
screen: () => { Linking.canOpenURL('fb://page/1000000000')
.then((supported) => {
if (!supported) {
Linking.openURL('http://facebook.com/1000000000/')
} else {
Linking.openURL('fb://page/1000000000')
}})
.catch(err => Alert.alert(err))
},
navigationOptions: {
drawerLabel: 'Facebook',
},
},
MyAccount:{
screen: MyAccountScreen,
navigationOptions: {
drawerLabel: "My account",
},
},
},
{
initialRouteName: 'Home',
});
return(
<Drawer/>
)}
}
export default Root;