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
Related
I want to create an additional page like in the picture below and I want to show the codes I want in the page, I researched but I couldn't get a result. What is the hook name I can do this?
https://prnt.sc/wccy4e
This gist shows how to add a simple nav tab + subnav.
If you want to load specific templates ( perhaps from a plugin ) into a custom nav screen, you need to use bp_register_template_stack, and the code becomes more complicated.
This is an example for adding a custom tab to groups and loading templates via bp_register_template_stack.
I have a use case where I am using stack navigator. I have a homepage where I have some aggregated data and a list which are retrieved from an API.
On clicking on a list item I move to a screen which has more details of that item. There I can add entries for that item. When entries are added using a form, both the homepage as well as the item specific screen need to be updated, which means I need to call the API's again to fetch data. In case no transactions are added I was to avoid this.
What should be the best practice here? should I pass a state variable from homepage and whenever it is updated refresh the screens?
Currently, I am using a willFocus listener, and it makes an API call each time I am on one of these screens. I believe that there can be a better approach than this.
I have one Api for Tab with two screen .The problem is i need in both use this data but:
1) When you open screen with tab,one is loaded but second does not load(i make fetch in both screen in componentDidMount )
2)it is bad to everytime fetch data,Please help me
In order to do avoid unecesssary api calls you can either use a library like redux, the react context api, or a higher order component and then pass the data as props to each component. I think we would need to see more details as to why it’s working in one screen and not another.
Currently, React Navigation only supports goBack(key) which indicates it will go back to the screen previous to the screen supplied.
I have Checkout -> Shipping -> Payment -> Review screens, where it will take the user straight from Checkout to Review if shipping and payment information have already been recorded. However, on Review, if I want to edit shipping information, I would need to do goBack(payment-screen-key), which I have no access to because the user never navigated to the payment screen (thus, no way of storing that key in redux).
Upon searching react-navigation github issues, it doesn't seem like there's a clean way of accomplishing this task. Is there a way to do essentially navigate(routeName) but not add another screen to the stack?
Conceptually you're not going back when you want to edit the shipping information from the review screen if you've gone straight from Checkout to Review, so as you mention backing to that screen doesn't work, and wouldn't make sense.
What about instead re-thinking your checkout flow? For example navigate from Review to the section you want to edit without the possibility to advance from there.
Checkout -> Review -> EditShippingInformation -> goBack(Review) -> EditPaymentInformation -> goBack(Review) -> End
Where EditShippingInformation and EditPaymentInformation includes a form with a save button that leads back to the Review screen rather than navigates forward to the Review screen. Perhaps these EditShippingInformation and EditPaymentInformation screens could be dialogs even?
I have a simple Aurelia application that displays accounts. The default view is a list of accounts. There's also an account details view.
I'd to make the details view open in a modal/dialog over the top of the list view. However, I want the presence of the modal to show up as part of the URL.
I found it easy to use the aurelia-dialog plugin to display the details view, but can't figure out how to get the dialog's presence to show up in the URL.
Another option might be to throw out aurelia-dialog and use a child router to display the details view, then figure out how to make that show and hide as a modal.
And, of course, another possibility is that there's a better way that I just don't see yet.
Has anybody seen or created something like this?
One possibility that occurs to me would be to add the dialog's presence as a parameter to the current route and then call it. You could use the route like /account?dialog=true. Run some tests to ensure that the ?dialog=true still routes to the same page. Then, use that route to check whether that parameter is set and display or hide the dialog window. When you refresh the page, the dialog window should still be open/closed. This also means that whenever you open or close the dialog window, you need to send a new route to the router (basically same route but different parameter).
This isn't a detailed solution but might get you on the right path.