I have generated all the pages of my desired application separately with custom components and in the order I want. now to navigate between them, if I want to use the Native Stack Navigator, by default it changes my Header and Drawer and Back button, etc. Then I need to replace them all one by one back to my own design, which is not nice.
Is there any better solution to navigate between pages without replacing my custom design of pages?
i.e By pressing the button on the home page, I simply want to replace the home page with the next page, which I have already designed the full structure including back button in header and title and drawer etc. I don't want it to be automatically replaced with another design depending on the platform, in short.
If You want to disable header of a component in navigation Stack
use
options={{ headerShown: false }
Related
I have an application that pass an order from the screen 1 as a param utilizing this.props.navigation.navigate('Screen',{order}) to the screen 2 and do some stuff in the screen 2. Then I navigate to another screen using the Drawer side menu. When I come back to the screen 2 utilizing the drawer menu the order still in the param (the route was not reseted).
I'm using class Component in my project and when I tried to put something like a reset in the componentWillUnmount, but the react native don't let me do that because this would be a asyncronous call.
In my order class I did (Screen 2):
componentWillUnmout() {
// some code
this.props.navigation.reset();
}
In the Screen 1 I did:
this.props.navigation.navigate('Screen 2', {order});
I tried do what was decribed in this question: https://github.com/react-navigation/react-navigation/issues/6915 but I had no sucess.
How could I reset this params in this conditions? Could I made a listener to reset the route when a navigate to another page in the Drawer Menu?
If your second page is an order details, you better use the stack pile of screens by pushing a new one.
this.props.navigation.push('orderDetails', {order});
Like that, you push a screen at the top of the stack. Navigate function search in your route history and if the screen was already open previously, it came back to it.
I have a basic flutter app with 2 pages and 1 bloc.
The home page displays a list of users (only 2 attributes)
When a user-item is clicked, a detail page displays all attributes
The user data is fetched using a bloc which emits 2 states
AllUsersLoadedState from the api domain.com/users
UserLoadedState from the api domain.com/users/id
Because both home page and detail page is using the same bloc in their BlocBuilder when I navigate to the detail page and hit the back button, the home page is crashed.
Any way to handle it without writing 2 individual bloc?
If you want to share a BLoC between screens, then you should create the BLoC in such a way that it won't be destroyed while those 2 screens are active.
One way of doing this is to provide the BLoC using the Provider package, or as an InheritedWidget. If you use Provider then on each screen you just ask for the BLoC using Provider.of<MyBloc>(context). You will have to read more about Provider to learn how to use it.
Another way is passing the BLoC as a variable to your widget's constructor.
I figured out what was the issue.
Because both pages were using the same bloc they would rebuild on both states while the intended behavior was for the home page to rebuild only on AllUsersLoadedState and detail page to rebuild only on UserLoadedState.
So when I navigate to the detail page and a UserLoadedState is received the home page didn't know how to handle the state and would crash.
The solution is to use the condition parameter in the bloc builder to skip rebuilding on an unwanted state.
I'm trying to create a route for an overlay. This overlay is toggled when pressing a button in my nav. Since its background is transparent/blur, it cannot be a separate site.
My goal is to make google register this path on my sitemap, therefore displaying it as a site link in its search results.
I am using Gridsome.
I'm creating a React Native application using React Navigation for navigation, as well as Redux. I currently have a drawer navigator containing multiple items (such as "Home", "Favorites", "Categories", and "Manufacturers"). Currently all of these just take you to another screen.
However I am trying to make Categories and Manufacturers open up a "sub drawer" or "sub menu", either clearing the current items in the drawer or just opening a fresh drawer, and then showing more specific items (such as "Coupes", "Sedans", and "SUVs" for Categories, and "Audi", "BMW", and "Volkswagen" for Manufacturers, to name a few) along with a back button to return to the previous drawer menu. How do I do something like this?
I'm still new to React Native/Navigation/Redux and I've been searching around for about a week for examples on how to do something like this, but only found one example on freeCodeCamp, which is very similar to what I want but doesn't seem to play well with Redux.
-Edit-
Here's a link to a basic snack:
https://snack.expo.io/SJ37V32zr
It seems likes I am limited by the shoutem builder to having a default Main Navigation, whereby all of the other screens are wrapped by it. Is it possible for me to create a landing page where my users can sign in, and then segue to the Main Navigation? How would I achieve this?
The shoutem.auth (Users) extension does something you're asking for. It displays a screen before any shortcuts (i.e. navigation items) are displayed. It achieves this through the use of a middleware which is implemented throughout the entire Shoutem app, visible in the #shoutem/core package.
You could use a similar pattern to achieve your landing/onboarding page extension.