I am creating an application to order food online and I want to perform a functionality where the user does not have to scroll or do any action to see reflected on the screen of their device that their order has changed status.
Example: The user enters to see the status of their order and being there on that screen that the user can see how the status of the order is updated without having to scroll.
I don't know if I should use listeners or some way with async and wait
I am using react native with hooks, react navigation 5, axios for API call
Do you know how I could do this? how can I find more information on this.
I appreciate any help you can give me.
There are two ways you can solve this.
Polling - you can create some interval, say 1 second, for axios to refetch the data you need. Wrapping your axios call with setInterval() https://www.w3schools.com/jsref/met_win_setinterval.asp, is one form of this.
Web Sockets - you can create a web socket that maintains a constant connection to your app and server, so when updates happen it is automatically reflected in the UI. You can check out WebSocket support in React Native here: https://reactnative.dev/docs/network.html#websocket-support
Related
i want to send an ID that i get from a database to another screen and i've seen how to do it on google but people only use hook components and i'm new to react native so i don't really understand how to do it.
You can send data from one screen to another using navigation params. Here is example: https://reactnavigation.org/docs/params/.
I want to put credit card number in a field and on clicking a button to retrieve its token. I don't find much information but the thing that I found is:
https://developer.moneris.com/Documentation/NA/E-Commerce%20Solutions/Hosted%20Solutions/Hosted%20Tokenization
I tried with it but still can't make it work. If I put this whole code in webview html part it will call the function on the first screen render. If I try to get the functions out of the webview and use them I can't take the specific iframe with document.getElementById('monerisFrame').contentWindow;
Any thoughts how can I accomplish my task?
You can use Moneris Apis to communicate in React Native :
We can create XML Post Request and connect with the Moneris server with your API Token and Store Id
Follow this blog :
https://medium.com/me/stats/post/7129b5a8b4a2
So I am working on my first React Native project and I am curious as to what the proper way to handle user data is. I have 3 different pages that are: HomePage, ProfilePage, ChatPage. When a user logs in it navigates them to the HomePage.
As of now, I have it to where when the HomePage loads it makes a backend call that retrieves all of the user data and sets it to some states.
Now when the user navigates to a new page like the ProfilePage none of the data is there anymore of course so do I have to make another backend call? So one backend call for each page? Im sure there has to be some way to only make the backend call once. Could I possibly set a global state of some sort? Should I save all the user data to AsyncStorage?
My current File structure is as follows:
App.js -> Contains my React Navigation stack
HomePage.js
ProfilePage.js
ChatPage.js
Thanks for the help!
You can use Redux plus React-Redux.
To say in short redux is a state management library for react. The states will be global to your app accessible across various components inside app. also there will be reactivity.
For more info visit this link
https://react-redux.js.org/
You should use React-Redux and manage your states globally.
i have some heavy API request made through my app. so i want to implement feature that if user hit any API request then after user should navigate through any screen but there is some loading icon indicating that API request is in progress.
For example :-
if user is in create-product screen and after clicking on create product button user should navigate through any screen like profile,,product-view or any other screen while API request is processing but i want to show some loading indicator from any screen that API request is in progress in background.
What you want is a singleton
Which is
A design pattern that ensures that exactly one application-wide instance of a particular class exists. One of the Gang of Four's creational design patterns.
I recommend you read more about it
It will be useful for your case
Here is how to make it with react native
React native- Best way to create singleton pattern
I'm new to React Native and have implemented a 'bodge' to get my app working but I wanted to know the correct way to implement the following...
The user has the option to log out on every page which currently calls a LOGOUT action which tells the reducers to revert back to initial states. It also sets the navigation reducer that I made to go to the 'login' screen. Once componentWillUpdate fires it sees this and then calls Actions.login(). This all works but is definitely not 'clean'.
Any advice on the correct implementation of this set state and redirect flow that I need?
I'm using the latest version of all of the libraries involved.