React Native bottom drawer navigation with sub menus? - reactjs

I am looking for a bottom navigator react native component that will allow me to have sub menus pop out of it?
I'm thinking of something that looks like this:
React Native Navigator
I have a hard time believing this doesn't exist. Can anyone point me in the right direction? I would really appreciate it.

I would suggest using something like createBottomTabNavigator from React Navigation
That allows for bottom navigation but would also also you to create more than one row like your mock. See this link for more info: How to create a bottom tab navigator with multiple rows?

Related

using a bottom tab bar from react navigation and move it to the side

Does anyone know how to use the react-navigation bottom tab and move it to the side? or if not, has anyone done that? what was the implementation you used? I'm trying to fix a side bar similar to a bottom tab bar but on the side. thanks
React navigation lets you create your own
Custom navigator bar.
They even have an example with most of the necessary code.
You just have to change the flex-direction of the container.

A Basic Nested Drawer with React Native

I've spent a lot of time searching this board and google in general looking for a basic understanding on nesting the Drawer component in react.
I am trying to figure out how to have a sub-drawer in my drawer menu.
If I open my drawer menu, lets say it contains the items 'Home', 'Menu', and 'Help' - if I click on 'Menu' i do not want the default behavior of routing to the component 'Menu' screen. I would like another drawer that contains another list of items to replace that main drawer view. I can override the default behavior of the Drawer with a custom Drawer, but I can not figure out how to nest a Drawer.
If a visual helps, this repo has a gif of exactly what I want to achieve:
https://github.com/appbaseio-apps/native-kitchensink.
I have no code to share because it's little more than what is in the docs under 'Nesting Navigators'. I feel what I am trying to achieve is super basic, yet, there must be something I am missing. I've come across #react-nested-nav, but looks like it is no longer maintained and broken, so the examples i've come across online that use it, are of no help; I could not get it to work, and it requires an older version of react. Thanks in advance for any help

how to use Parent-child transitions with Material-ui on desktop

I have a list in a drawer that is docked to the browser screen (desktop) and I want to expand the content of the list item to fill the entire drawer when I click on it just like explained in this demo:
I could find ways of doing it using Android but not using react material-ui V1.0.
Has anyone already done something like it?

how to create a navigator like this using react native

I saw this navigator on an App, i would like to create a similar one using react native. Does anyone have any ideas about this?
when i click on the arrow button, it has many direction pop up.

Pushing a view from bottom with NavigatorIOS

I am trying to push a view from the bottom of the screen using react native
Looking at the react native NavigatorIOS documentation I can't find anything.
Any recommendation?
You can do that using Navigator, not NavigatorIOS.
Look at https://facebook.github.io/react-native/docs/navigator.html#configurescene
Here's an example:
https://github.com/aaronksaunders/React-Modal-Nav-Example
Credits to aaronksaunders

Resources