I'm trying to implement a left drawer and right drawer for my app. I'm unable to find any usable examples online. I've tried 3-4 examples including the example from react native docs itself and I'm getting undefined is a not an object (evaluating'Component.router). If anyone has a working example of an app with a left and right drawer navigator that would be great. Thanks!
I believe that you could do something like this, create a new file 'AppNav.js' to handle all your navigation/drawers etc~
AppNav.js
const LeftDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'left',
})
const RightDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'right',
})
const RootNavigator = createStackNavigator({
LeftDrawer: { screen: LeftDrawer },
RightDrawer: { screen: RightDrawer }
})
export default AppNav = props => {
return <RootNavigator />
}
EDIT: Plus, on the RootNavigator, before the call of LeftDrawer, you can set the main screen of your app and set it as 'initialRouteName'
Related
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 developing a react native application.
Here i am using this way to navigate between screens, navigatiion works OK. but when i press back button from the 3rd level screen, it comes to the 1st level screen instead of 2st level screen.
how do i fix this? please help me.
const HomePageScreen = createStackNavigator({
HomeLists: {
screen: HomeScreen,
navigationOptions: {
header: null
}
},
HotAdsLists: {
screen: AdsDetailScreen,
navigationOptions: {
title: 'Hot Ads2',
}
},
DetailsScreen: {
screen: DetailsScreen,
},
});
const SearchStack = createStackNavigator({
Home:{
screen:HomePageScreen,
navigationOptions: {
header: null
}
}
},{
initialRouteName: 'Home',
headerMode: 'screen'
});
const DrawerNavigatorExample = createDrawerNavigator({
SearchStack
},{
drawerType: 'slide',
contentComponent: Page2ComponentExample,
drawerBackgroundColor: '#4eb6ce'
});
The stack is working properly
I done the stack manually and it works fine.
have to create a drawer and that drawer I want to use on several screens and inside believe a stack but when it comes to running the app I only get the variable when it comes to creating the stack
const DrawerNav = createDrawerNavigator(
{
screensStack : createStackNavigator({
Welcome: Welcome,
Wellness: Wellness,
Market: Market,
})
},
{
drawerWidth: Dimensions.get("window").width * 0.75,
drawerHeight: Dimensions.get("window").height,
drawerPosition: "left",
contentComponet: DrawerContent
}
)
export default createAppContainer(DrawerNav);
in the drawer only the word screensStack appears
just replace your code with this
const Drawer = createDrawerNavigator(
{
Welcome: { screen: Welcome },
Wellness: { screen: Wellness },
Market: { screen: Market },
},
{
initialRouteName: 'Welcome',
}
)
const AppNavigator = createStackNavigator(
{
Drawer: { screen: Drawer },
},
{
initialRouteName: 'Drawer',
headerMode: 'none',
}
)
const AppContainer = createAppContainer(AppNavigator)
export default () => <AppContainer />
it'll work
The createStackNavigator is located in the drawer. Therefore, when you click a variable in the drawer, you will go to the first screen of the stack navigator.
If you want to make all three variables visible, you need to reposition them.
createAppContainer
createStackNavigator
createDrawerNavigator
Welcome: Welcome,
Wellness: Wellness,
Market: Market,
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} />
)
}
}
})
I'm trying to work my way toward building a drawer navigator using this really nice tutorial/demo
Issue is that although this code works and I can walk through all the screens in my stacknavigator:
const navigator = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: { screen: Dashboard },
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
export default navigator;
But when i try to include, as a first step, consolidating the login scenes into a loginstack and then having that as a screen in another const, it does not work:
const LoginStack = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: { screen: Dashboard },
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
const navigator = StackNavigator({
loginStack: { screen: LoginStack },
//drawerStack: { screen: DrawerNavigation }
}, {
// Default config for all screens
headerMode: 'none',
title: 'Main',
initialRouteName: 'loginStack'
});
export default navigator;
here is the error I am getting:
The link you brought spread a wrong approach out.
I wrote a comment there,
Putting drawer under the StackNavigation is a bad idea and it’s not
fit with any design guide. In iOS, drag to open action is duplicated
with go back action in navigation. In Android, you can find no app
from google use this approach. A drawer should cover StackNavigator
from outside.
You need to change your second StackNavigator to DrawerNavigator. And see 'react-navigation' documents or example for DrawerNavigator.