Comments (7)
It would be nice if DrawerNavigator
rendered a header that the drawer would render on top of (it currently doesn't seem to render a header at all), then we could do something like this:
const MainNavigator: any = DrawerNavigator({
Dashboard: { screen: Scenes.Dashboard },
Log: { screen: Scenes.Log },
}, {
initialRouteName: 'Dashboard',
});
const PagesNavigator: any = StackNavigator({
Login: { screen: Scenes.Login },
Password: { screen: Scenes.Password },
}, {
initialRouteName: 'Login',
});
const AppNavigator: any = StackNavigator({
Drawer: { screen: MainNavigator },
Pages: { screen: PagesNavigator },
}, {
initialRouteName: 'Drawer',
headerMode: 'none',
});
from react-navigation.
In the examples the drawer renders on top of everything.
I would prefer the drawer underneath a top bar as usual.
from react-navigation.
@Steviey You should be able to put the DrawerNavigator inside a StackNavigator (similar to my example). The StackNavigator will render a header and the drawer will render underneath it.
const MainNavigator = DrawerNavigator({
Dashboard: { screen: Scenes.Dashboard },
Log: { screen: Scenes.Log },
}, {
initialRouteName: 'Dashboard',
});
const AppNavigator = StackNavigator({
Main: { screen: MainNavigator },
}, {
initialRouteName: 'Main',
});
from react-navigation.
I'm totally new to this project, only have seen the examples. During the last days I was busy to provide some install scripts. Could you provide boilerplate code to see it in action?
from react-navigation.
Okay, I've got an insanely ugly hack going here, but it does render a header for the DrawerNavigator which the DrawerLayout slides over top of. I created a custom navigator that renders a CardStack
instead of DrawerScreen
(I did this because the CardStack renders the Header
component which is not currently exported by react-navigation
).
However, the CardStack
does a SlideFromRightIOS
which looks really odd when switching between Drawer Items. Does anyone know how I could override the Transitioner
returned by the CardStack
to do a cross fade instead?
from react-navigation.
This is just what I was looking for. @chrissm79 do you have any code we could try? :)
from react-navigation.
@nonameolsson I was able to get this to work by wrapping my Drawer screens with a StackNavigator
like so:
const MainNavigator: any = DrawerNavigator({
// I created a helper function to generate these single stack navigators
// to reduce boilerplate but this is what it produced
Dashboard: {
screen: StackNavigator({
Index: { screen: Scenes.Dashboard }
})
},
Log: {
screen: StackNavigator({
Index: { screen: Scenes.Log }
})
},
}, {
initialRouteName: 'Dashboard',
});
const PagesNavigator: any = StackNavigator({
Login: { screen: Scenes.Login },
Password: { screen: Scenes.Password },
}, {
initialRouteName: 'Login',
});
const AppNavigator: any = StackNavigator({
Drawer: { screen: MainNavigator },
Pages: { screen: PagesNavigator },
}, {
initialRouteName: 'Drawer',
headerMode: 'none',
});
I did, however, have some weird flickering when changing routes, and I had some issues with trying to navigate out of a nested view (in this example, going from the nested Log
screen to the Password
screen) so for the time being I went back to ex-navigation
but I'm sure I'll be back soon :-)
from react-navigation.
Related Issues (20)
- Adjust the margin of the bottom menu bar HOT 3
- DRAWER ENCERRA O APLICATIVO HOT 10
- Sometimes duplicate tab bar labels appear in bottom tabs HOT 1
- unmountOnBlur shows white screen randomly when switchint tabs HOT 2
- useHeaderHeight changes several times when orientation changes HOT 3
- Navigate into page, increase RAM, navigate back and RAM stays high HOT 1
- When using frosted glass stack to jump in Android mode, ReactNavigation will experience lag and frosted glass will reset HOT 5
- Weird transition in navigation HOT 2
- Invariant Violation: requireNativeComponent: "RNSModalScreen" was not found in the UIManager. HOT 15
- [Bridgeless] [RN 0.74] Event cannot be both direct and bubbling: topFocus HOT 4
- Strange flicker when you scroll up a modal with NativeStack in iOS
- Ripple effect shown twice after clicking one time on material top tab after new architecture enabled. HOT 3
- onStateChange called after screen's mount (useEffect) HOT 6
- MaterialTopTabNavigator Icon Layout Shifting HOT 4
- To prevent the default behavior using e.preventDefault() on `tabPress` event is no longer working HOT 4
- RemoveEventListener error in react-native-navigation@4 HOT 7
- Keyboard is dismissed immediately when focusing on TextInput field on non-outer tabs for `react-native-tab-view` HOT 1
- RemoveEventListener error in react-native-navigation@4 HOT 8
- Bottom Tabs flash when opening keyboard HOT 2
- Bottom Tab Navigator falls out of viewable area HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-navigation.