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
Related
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 }
I have a product screen that shows the details of the product. i.e. "Product Details" and it also shows similar products and upon selecting one of the similar products I want to navigate to the same screen but this time the information will be different.
I'm using context API to update the latest selected product and that's how I'm rendering different information on the same screen.
storeContext.setSelectedProduct(porduct)
navigation.navigate("Product Details")
Is there a way to make it work? I am not sure what more details I should share.
you can re-render the screen again with different data-set or you can use push method of react-navigation to achieve your task.
You can use navigation.push("Product Details") to add the same screen to stack and you can also navigate back to the previous "Product Details" screen using this method.
And then whatever extra details you want to pass can be passed with the navigation function or fetched inside the component using the api methods.
Solution:
navigation.push("Product Details")
You Can check here best Example
Read Official Doc
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.
So basically here's what's going on, I have two navigation flows:
Products flow: I have a StackNavigator with two screens, the first rendering a list of all products in the stock, clicking on one product item would take you to the details screen as expected.
Admin flow: I have another StackNavigator where I'm rendering user products, basically the products that were added by the user (admin) into the stock, he can also add new products, delete, edit existing products. Any changes made by the user to his own products will be reflected in the products flow also since the global state will be updated.
Note: The two flows are conntected and accessible using a DrawerNavigator.
My issue
When the user opens the details screen after clicking on one of his own products and then navigates to the admin flow and deletes that product, I get an on error in the details screen because it's trying to render a javascript object that doesn't exist anymore which of course makes perfect sense.
My solution
So I figured since this error occurs only when the details screen has been already opened, meaning it's already in the navigation state's history, Im attempting to solve the problem by checking if the details screen is present in the routes array each time the delete button is clicked, if it's present, meaning the screen is loaded in memory, I try resetting the navigation state by keeping the previous state as it is and simply filtering out the details screen from the previous routes array and setting the new array as the new routes property.
Here's the code that attempts to reset the navigation state each time the delete button is clicked
navigation.dispatch(state => {
const routes = state.routes.filter(
route => route.name !== 'ProductDetail',
);
return CommonActions.reset({
...state,
routes: routes,
});
});
The problem is when I click on the delete button I get the following error
TypeError: undefined is not an object (evaluating 'action.target')
So where am I missing something? Any insight at all would be much apperciated.
I'm learning react-native with redux and I'm trying to make a kind of social network application.
My problem is: when I'm on a user-1 profile screen and I navigate to user-2 profile, so basically I navigate from Profile.js to Profile.js (same screen) with different props. The problem is when I press the 'back' button, I get the user-2 profile while I should see user-1 profile.
The profile informations are saved in the store with redux.
For navigation I use Actions.sceneKey() from react-native-router-flux.
I already tried :
this.props.navigation.navigate('profile', { key: someRandomKey });
I get "Promise returned from navigate is ignored".
T also tried to save every user profile informations that I visit in an array but I don't know how to manipulate this array when I press back button...