I hope i'm able to explain this properly, and that there isn't already an answer out there. It seems there is still a few design decisions up in the air for apps that have a StackNavigator nested inside DrawerNavigator.
What I'm trying to achieve: I have a link to a "Settings" screen in my DrawerNavigator, similar to a lot of apps. I will use Google Play Music as an example for what I want. Clicking on "Settings" sends you to a new screen with only a "back" / "done" button. The Drawer Menu is not accessible.
Question: How can I add a link in the DrawerNavigator that links to a new card/modal view? I'm guessing it can be achieved my some nested navigator stack, but I haven't been able to get anything that works.
Sample code:
const DashboardNavigator = StackNavigator({
Home: { screen: HomeScreen }
})
const SettingsNavigator = StackNavigator({
Settings: {screen: SettingsScreen}
// I thought adding 'mode': 'modal would give me the functionality
// I'm looking for my it doesn't
}, { mode: 'modal', initialRoute: 'Settings' })
const DrawerNavigation = DrawerNavigator({
Home: {
screen: DashboardNavigator
},
Settings: {
screen: SettingsNavigator
}
})
There is a pull request to allow disabling the Drawer Menu on specific screens so i'm not really worried about that right now, but just navigating to a screen where navigation.goBack() takes me back to the last screen I was on (with the card slide animation).
Was able to get it with this, although I still can access the Drawer menu... Hopefully they add the ability to disable the Drawer soon.
const DrawerComponent = ({ navigation }) => {
return (
<View>
<Button onPress={() => navigation.navigate("SettingsView")} title="settings" />
</View>
)
}
const DashboardNavigator = StackNavigator({
Home: { screen: HomeScreen },
SettingsView: { screen: SettingsScreen }
})
const DrawerNavigation = DrawerNavigator({
Home: {
screen: DashboardNavigator
}
}, { contentComponent: DrawerComponent })
const RootNavigator = StackNavigator({
Root: {
screen: DrawerNavigation
}
})
Related
I am working on a React Native app. When the user loads the app, I want the first screen they see to be a Home screen to tell them about some of the features of the app. Currently, I am using a BottomTabNavigator with nested StackNavigators inside. I have been able to get my Home screen added, but it always shows up the in TabNavigator. Is there a way to make a single tab item not present in any of the screens?
PS. I have tried using a StackNavigator as my parent like the following, but my TabNavigator does not show up:
const AppNavigator = createBottomTabNavigator({
Item1: Item1,
Item2: Item2,
Item3: Item3,
Item4: Item4,
Item5: Item5
});
const MainNavigator = createStackNavigator({
Home: Home,
Content: AppNavigator
}
Any ideas?
UPDATE
If I have screens called Item1, Item2, Item3, Item4, Item5, and Home, I want to make it display Home first. In addition, I want the TabBar visible at the bottom, but it can't include the Home screen.
You likely want to nest your main app tab navigator inside another tab navigator like this:
const AppNavigator = TabNavigator({
Main: { screen: MainScreen },
Settings: { screen: SettingsScreen },
});
export default TabNavigator(
{
Home: { screen: HomeScreen },
App: { screen: AppNavigator },
},
{
navigationOptions: ({ navigation }) => ({
tabBarVisible: false,
}),
}
);
I think SwitchNavigator is what do you need https://reactnavigation.org/docs/en/switch-navigator.html. Try like this
const MainNavigator = createSwitchNavigator({
Home: Home,
Content: AppNavigator
}
If you want TabNavigator you can simply do the same
const MainNavigator = createBottomTabNavigator({
Home: Home,
Content: AppNavigator
}
Create a custom tabBarComponent for your Tab Navigator to use.
Map through the routes in that custom tabBarComponent and don't render anything for that Tab if route.routeName === 'Home'.
const TabBar = props => {
return (
{navigation.state.routes.map((route, i) => {
if (route.routeName !== 'Home') {
return (
<Tab...
I am new to react native, and have come across this issue with navigation. I have a 'main menu' (TabNav) that I want to render on every page.
I have some pages that are not accessible from the main menu (TabNav), but should still have the menu options. I'm not sure how to impliment this. Here is the code I have so far:
const TabNav = createMaterialBottomTabNavigator({
Map: { screen: HomeScreen },
Details: { screen: Details },
});
const extraNav = createStackNavigator(
{
SinglePage: SinglePage,
Tabs: TabNav
}
);
const RootStackNav = createStackNavigator(
{
Tabs: {
screen: TabNav
},
SinglePage: {
screen: extraNav,
}
},
);
I navigate to the single separate page via:
render() {
const { navigation } = this.props;
return (
<View>
<Icon
name='place'
onPress={() => navigation.navigate('SinglePage')}
/>
</View>
);
}
What I want to happen is when I navigate to the single separate page my "main menu" is still present.
Right now I can navigate to all the pages, but on the single separate page the tabs are not available, and I have to hit 'back' to access it again.
You can use this code to nest a stack navigator to a tab navigator
const RootTabNav = createMaterialBottomTabNavigator({
Map: { screen: HomeScreen },
DetailStack: { screen: stackNav},
});
const stackNav= createStackNavigator(
{
SinglePage: { screen: SinglePage}
Details: { screen: Details },
}
);
Its just an example of nesting stack to tabNavigator. I hope this may help you.
I started learning React Native, I know how to create TabNavigator or DrawerNavigator but I need access to props.navigation on landing page where I don't have TabNavigation, how I'am supposed to get it.
I tried this:
const App = createStackNavigator({
LandingScreen: { screen: LandingScreen },
Register: { screen: RegisterScreen },
Login: { screen: LoginScreen}});
But still, this.props are empty object.
And what is stackNavigator in plain language, does it just define navigation in order to be able to use navigation ?
In your LandingScreen you can able to get the this.props.navigation. You can show your TabNavigation as your initial route. You can even set Stack Navigation for each Tab. For React Navigation(v2) Documentation https://reactnavigation.org/docs/en/tab-based-navigation.html
Stack Navigation:
Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
//Stack Navigator
const App = createStackNavigator({
Home: { screen: Tabs }, //You can nest your TabNavigator here, Hence the LandingScreen inside your HomeStack will shown as your Initial screen
Register: { screen: RegisterScreen },
Login: { screen: LoginScreen}});
//Sample Tab Navigator
const Tabs = createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack,
},
{
/* Other configuration remains unchanged */
}
);
const HomeStack = createStackNavigator({
LandingScreen: LandingScreen,
Details: DetailsScreen,
});
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
Details: DetailsScreen,
});
You can get your navigation Prop by using below
//LandingScreen Component
export default LandingScreen extends Component{
static navigationOptions = ({navigation}) => ({ //you can able to destructure your navigation prop here
headerTitle: 'Langing Page'
})
render(){
return(
//your logic here
)
}
}
I'm looking to use DrawerNavigator along with StackNavigator so I can display a header for my screens, everything is working fine but I messed up with the router logic, my issue is that the drawer do not render items but only the first one.
const Router = StackNavigator({
Home: {screen: Screen1},
Other: {screen: Screen2}
}, {
navigationOptions: {
headerStyle: {backgroundColor: '#333333'},
headerTintColor: '#fff'
}
});
const Drawer = DrawerNavigator({
App: {screen: Router},
});
export default Drawer;
Can someone please explain why I'm only seeing the first item in drawer? When trying to fix that I added a second item to drawer config router like that
const Drawer = DrawerNavigator({
App: {screen: Router},
App: {screen: Router},
});
It add a second item to the drawer but with the wrong title, it use title for screen one but the link is correct, it redirect to the second screen. so how can I fix those labels?
Better way of doing this is by creating drawernavigator with custom "contentComponent". This way you will have more control of what titles you want to display in the drawer, on click of title which screen it has to navigate to, background color of the drawernavigator.
So the DrawerNavigator is instantiated like this (from the docs):
const MyApp = DrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
Therefore by doing what you did the first time:
const Drawer = DrawerNavigator({
App: {screen: Router},
});
, you're telling DrawerNavigator that there is only one element to be added to the drawer menu, regardless of what that screen "Router" contains, for DrawerNavigator it is just one element.
So in order to correctly add your screens to the drawer:
const HomeRoute = StackNavigator({
Home: {screen: Screen1},
}, {
navigationOptions: { ... }
});
const OtherRoute = StackNavigator({
Other: {screen: Screen2},
}, {
navigationOptions: { ... }
});
const Drawer = DrawerNavigator({
Home: { screen: HomeRoute },
Other: { screen: OtherRoute }
});
export default Drawer;
I want to make a simple application with stackNavigator and DrawerNavigator (react native).
The application will have a login and a welcome page, I would like it in the login: drawerNavigator does not work and in the welcome page if it works.
The tree would be something like:
StackNavigator:
Login
Register
DrawerNavigator and StackNavigator:
Welcome Page
My Profile
This is my code, what is not good is to show the drawerNavigator in all sections.
const PreLogin = StackNavigator(
{
Login:{
screen: listView,
mode:'modal',
navigationOptions:{
title: 'Login',
}
},
Register: {
screen: Register,
navigationOptions:{
title: 'Registro'
}
},
Profile: {
screen: ListScreenTwo
}
}
);
const Draw = DrawerNavigator({
Home: {
screen: PreLogin,
},
Profile: {
screen: ListScreenTwo
}
});
AppRegistry.registerComponent('eatq', () => Draw);
Sorry for my terrible English, i love your language.