in my app I have a drawer which contains some screens. In each screen there's a common component, let's call it Footer:
For more details, let's take a look at the design of my app:
- The drawer
("Transactions", "Statistics", "Settings" ... are stack navigators)
- The Transactions screen
I tried these approaches:
- Put the Footer component in the same level with the drawer. There's a problem doing this: when the drawer is opened, it's behind the Footer
- Add the Footer component in every screen. This isn't an elegant solution because multiple Footer component will be created, and I have to create a redux state to synchronize these instances of this component.
Note: I'm using react-native version 0.44 and react-navigation version 1.5.2
Related
In React navigation for react native it supports stack navigators which maintain the route history between tabs. I am looking for the same functionality in either nextjs or plain react with react router. I was initially planning to use nextjs, but I cannot figure out how to support this type of functionality.
Example
Side Nav Bar Tabs:
Dashboard
Dashboard List
Dashboard List Details
Settings
Account
Account Details
So say I navigate to Account details and then click the Dashboard tab. Then click the Setting icon again in the left nav bar, I would expect the screen to still be on the Account Details page. Not back on the Settings landing page.
This is all supported by default in react native stack navigators as their routes persist between navigators.
Looking for a way to handle this in reactjs. Nextjs or React-Router are both acceptable.
I'm into PWA development, and I'd like to use React components to build my UI, but not React-native components (otherwise why write PWAs...).
So I am looking for an equivalent to the top-tab-navigator component found here:
https://reactnavigation.org/docs/material-top-tab-navigator/
but without any React-Native dependency!
Changing pages by swiping would be great, even without a visual effect.
So far, I found React components to put tabs on displays inside pages, but nothing with navigator characteristics (full screen views, event on page change, ...).
Any help will be very appreciated.
Thank you!
So far, I found React components to put tabs on displays inside pages, but nothing with navigator characteristics (full screen views, event on page change, ...).
For react application I have to build sidebar menu and appropriate content on right side with dynamic content through navigation. This part is completed and now there are more menus in sidebar in existing application which are developed in different language and that should also be seen exactly like same sidebar and redirect to appropriate pages.
Block 1 will have only my react's application and block 2 can be page from react app or another app according to the navigation from sidemenu.
How can I achieve this?
I'm using react navigation (sidebar) in react native project, but when I click quickly on sidebar menu sidebar doesn't close but background scene is changing. In this way I'm navigating to scene. Even the same issue found on kitchen sink app https://nativebase.io/kitchen-sink-app as the I'm following same.
this.props.navigation.navigate(route);
I am using DrawerNavigator from react-navigation with Redux for my React Native app (using Expo). My Home screen contains a map (using react-native-maps). From Home screen, I navigate to a new screen.
Whenever I click the Back button in this new screen to go back to Home screen: dispatch(NavigationActions.back(), the Home screen always re-render. Is there any way to go back without re-rendering my Home screen and keep all the states and props unchanged?
This is an open issue I think. Try using a stacknavigator inside the drawernavigator instead.