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.
Related
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 am using useInfiniteQuery with FlatList in React Native. In one of item in the list there is toggle functionality. I have successfully used useMutation and it works great.
When user scrolls and reach to end I fetch another page. Let's say I have loaded 5 pages i.e. 5 requests on the server. Now I go to the top on the first page and toggle first record using mutation. I used
onSettled: () => queryClient.invalidateQueries(key)
I observed that this causes all pages fetch in background i.e. again 5 requests on the server to fetch all pages which are already there and only for just one record.
so my question is that is it possible to avoid all page request and refetch only the page which was changed. I tried to look in documentation but couldn't find anything helpful on 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.
I am working on an app that is a report that has multiple participants attached to it. I am using react-redux and my question is how do I manage dynamic number of participants in redux. I have a wizard that stores all info in redux store and at the end of this wizard I want user to tap on Add button in order to add users to this report. I want app user to add as many reprort participants as they want.
Update:
My app has a wizard with 3 steps. First two steps are shown on screens with bunch of checklist items. User checks the boxes and I store everything into the redux store via same reducer. Final step is to add participants of this report and they can be one or many. I have a screen for that but there is only place for one person in the redux. (Each variable is already filled with info from the first paricipant). I need a way to be able to dynamically add participants to redux. At the end I want to store all of this to database. I have one table for the report and one table for participants.
I am new to react native and redux. This is my first app in react
In Sencha, how to create a DataView or List component which renders only 1 item at a time and contains prev/next buttons to navigate data?
Store has pagination enabled to pull only 5 records at a time. Out of these 5 records I want to display only 1 record at a time on the view and with navigation buttons to move forward/backwards. Is there a built-in component for this requirement?
I see few SO posts (Sencha Touch limit number of items in list) suggesting to use 2 stores (DisplayStore to slice the actual data). This didn't work for me. I tested this with static data in the actual store. It still renders all the data in the list. Moreover I am looking for forward/backward navigation buttons too.
If there is no such built-in component (at least close enough), I want to create one for my needs. Please suggest.
You should go with a filter, and two buttons.
The handler for the next button could be alike
var number= list.getStore().first().getId()
list.filter('id', number+1)
If there is anyway to increase a number for the next valid item. Otherwise you need a counter of your current selected item and increase that.