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
Related
My app uses Firebase authentication and I'm implementing a typical sign-in screen with buttons to sign in with Google, email etc. It's surprisingly difficult. I have a LocalUser class to hold the user's profile (name, email etc), state (whether they're logged in or in the process of logging in etc), and provide methods to start the process when a button is clicked. This seems like an ideal candidate for a ViewModel.
The trouble is, ViewModels mustn't hold a reference to an Activity, but the Google Identity SDK needs such a reference as part of its mechanism for providing its result to my code. I can't think of a way to decouple the ViewModel that doesn't still leave the ViewModel referencing the Activity, albeit indirectly.
Is it OK to just remove the ViewModel inheritance from my LocalUser class and pass it directly to my sign in screen (and from there to each control that needs it)? Is it OK for a Composable to hold a reference to Activity?
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
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 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.
i have to develop a multipage application that includes invocation of several web services.
My first page has a login page. based on the user input i have to traverse to next page while calling the next web service simultaneously. so obviously this all depends on the login page information that has the userid and password and the response from the web service such as personId etc.
i need to store this information temporarily for a particular session but... how to do this?
There are two kinds of page:
There are the UI states as seen by the user. Your Login page and your Next page are examples of these. From the user's perspective they see a succession of pages.
However you are writing an App, a single controlling thing that is in charge of all those "UI pages". I suppose that you are using MobileFirst to create a hybrid application that is effectively executing in a browser. From that browser's perspective you have a single HTML page. This is important, MobileFirst only works with single-page applications.
Now the browser loads the HTML and JavaScript for your single application page and that JavaScript stays resident as the user moves between the different "UI Pages", so the JavaScript can have variables for keeping the state you are asking about. The actual UI navigation from "page" to "page" is usually done by hiding and revealing DIVs.
Hence your WebService call results will be delivered (asynchronously) to some JavaScript function you define, and in the meantime your code can hide the login page and reveal the next page as required. The login data being held in JavaScript variabes.
All of this is simplified by using a framework such as AngularJS which abstracts the messy details of hiding and revealing and dealing with asynch delivery.