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
Related
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?
I'm trying to create a nested navigation menu with react and
material-ui by following an example I saw on css-tricks but I'm mainly getting stock on how to make the first menu render the second menu when I click one of the arrow links.
I have created a sandbox here with the code since it will be easier nested-navigation-menu
Here is the css-tricks article. Here the menu is one level deep, but I would like to make it two level deep.
Thanks in advance
I'm interested in creating a content nav bar, similar to this one
This screenshot is taken from Material UI's site, but I haven't been able to find a component inside the library that resembles it. Is there one? Is there a way repurpose either a Drawer of an App Bar to replicate it?
Thanks
If it’s always visible on the page that is just a normal div really.
Set it up in your component (or wherever your routes are defined) so it is on every page
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?
Ok. Starting over with this. I see that the SocialBoo theme has something similar in what I want to achieve. If I find that I can work and improve. I Added a new socialboo theme and created blank GUI. Assumed it would be a Commandbehavior but that didnt do the trick, so did adding tabs. Seems like those components are not for that specific bar... However did notice another issue.
How do I get the social actionbar as displayed in the socialboo theme? (Screen shot). Assuming those images etc are part of the default theme, right.
Also, If I create a TouchCommand = bar, title or native. It displays fine in Gingerbread but not ICS. DO you know why is that? (screen shot)
Thanks, in advance.
Those images aren't a part of the theme, they are a part of the specific demo. If you add a Tabs component to the center of the border layout UI you will get thee tabs where the "icon" property will allow you to customize the unselected icon and you can customize the selected icon as well. You can see the full source/resource file of the social boo demo in the docs and demos zip in the download section.
Generally customizing commands is a bit complex because of platform specific constraints, when running on an Actual Android 4 device we use the native ActionBar by default to provide the experience Android users are used to. This is hard for us to simulate so you will only see this properly in the device build. I suggest not relying on commands, it seems that what you are trying to achieve is easily doable with tabs and its possible that's why you had difficulties in your other question.