In my app, I have a main stack navigator that contains all my screens. Some of these screens are part of the login flow, and then once the user authenticates, they go to the main part of the app, which contains a bunch of screens that you can navigate between using a drawer menu.
The way I've implemented this is that in my main stack navigator, I have as navigable components <Welcome/>, <Login/>, and <MainStack/>. In <MainStack/> I have a second stack navigator that contains all the screens in the main part of the app, and that stack navigator is wrapped inside a drawer menu. This way, I code the drawer menu only once. So in the primary stack navigator you can navigate between <Welcome/>, <Login/>, and <MainStack/>, and once you're in <MainStack/>, you can navigate between a bunch of other screens, all of which share the same drawer menu.
This all works fine, but RN is giving me a warning that I shouldn't include more than one stack navigator in an app; that I should include everything in just one stack navigator. Does anyone know if there's a clean way I can accomplish everything I'm doing here with only one stack navigator?
Thanks!
Related
I created a shrink animation with Stack Navigator, on snack, https://snack.expo.io/hvv8URsmp , but I haven't been able to replicate it with createBottomTabNavigator.
I saw some github threads that say it's not supported in the same way Stack Navigator is, with this link showing how to do it manually with Animated https://github.com/brentvatne/animated-bottom-navigation-example/blob/master/createAnimatedBottomTabNavigator.js.
While it seems to work, I would love it if I could separate the animation code out into my navigator file, as shown in the snack, rather than be hardcoded into my screen component like in the second link.
Is there a way to migrate the code that I already have working for the stack navigator into an existing bottomTabNavigator?
I'm trying to make a Water Tracker app (I know that already exists, I only want to challenge myself because this is my first project) and I want to use the Stack Navigator (That is already in the app) with the Tab Navigator. I've tried a lot of solution from Medium, Stackoverflow and official React Navigation documentation but none of them works for me. My goal is to have both stack navigator and tab navigator in all the screens. I'm using Expo CLi.
This is the source code:
https://snack.expo.io/XDRjrC7Gf
Can anyone help me with this?
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
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.
Problem
I am creating a social media type app in react native, where the user can create posts, and view other's posts. When the user creates a post, a new "create post" stack navigator screen is shown. I want it to be so that when a user posts their post, the create post screen automatically goes away.
Question
How I can make it so that when a user presses a button on a screen above another screen, the stack navigator screen automatically disappears and takes you back to the default screen?
navigation.goBack
https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back
Closes the active screen
Optionally provide a key, which specifies the route to go back from.
By default, goBack will close the route that it is called from. If the
goal is to go back anywhere, without specifying what is getting
closed, call .goBack(null);