App flow:
ComponentOne:
Take photos with phone
Send photos to api
Navigate to ComponentTwo
ComponentTwo:
Render component
NOW response from api is received in ComponentOne, after render of ComponentTwo. (Resulting in component not being able to display response since it was received after rendering of component) Desired result is that the loading spinner will spin until response is received from api and when received immediately display it in ComponentTwo.
I am passing state from one component to another, the state, called "loading" starts off as "true" and is supposed to change to "false" when response is received from api, however even though it changes in ComponentOne, ComponentTwo still displays the spinner...
This is how I navigate to second screen and pass the state with it.
this.props.navigation.navigate('ComponentTwo', {loading: this.state.loading});
This is how I receive the state and do the conditional rendering, the spinner is supposed to show until the response is received from the api, currently however it just keeps spinning even when data response is received.
{
this.props.navigation.state.params.loading ?
<Spinner/> :
<Text>Display response from api when it is received</Text>
}
Why does this not work? Why does state not change in second component and render the results, instead it keeps on loading forever. Can you not pass state from one component to another and expect it to change?
Edit: "loading" is set to "false" in ComponentOne right after response is received from api, navigation to ComponentTwo happens before this, therefore I want the spinner to show until data is received.
Edit2: Anyone know how I can do this using redux? I have redux in the project but don't know how I would do so that loading would be set to false when my variable(s) would get a value as response from the api.
I'm not quite sure, that navigate params work like react state/ props.
It is a one way street to pass params onto the next screen. These won't update.
You should instead have a component wrapping this two screen that pass props down. THIS will update if you update the state of the wrapper component.
Wrapper could have a state for photo, and once it's updated with the image url it will trigger a rerender and the props will trickle down to the attached components.
Hope this helps.
Related
how is it possible to implement a native autocompletetextview for react native with java?
how come you don't have any?
You can make you custom component for the same, by calling the api on changetext of text input and on modal you have a flatlist to render the response for the same. But then in this case you have to cancel the fetch call of the previous state if user enters the text very fast otherwise you will end up calling the server many times.
Alternatively you can use the libaries below:
1. http://github.com/mrlaessig/react-native-autocomplete-input
2. https://github.com/maxkordiyak/react-native-dropdown-autocomplete
I hope this helps...Thanks :)
I am new to android. In my android app, I showing the products list. Now I can sync all the products with a single API call. In slow networks, the app getting broken with the timeout error. I want to sync the products by chunks of data and I want to show a loader also. How can I achieve this?
Thanks in advance.
You're looking for something called Pagination. You can get a specific list/chunk of products from your API with a specified 'page' parameter. The 'page' parameter usually starts off with a value of 0 (page=0), then when the user scrolls to the bottom of the list, you increment the 'page' parameter and get the next chunk of data (page=1), So on as the user scrolls to the bottom of the list.
To show a lading to let the user know of data being loaded from the API, simply use a progress bar that can be shown whenever the API call is in progress and hidden when the API call is finished.
I have a project that loads a list from the server. This data will eventually be stored into a database, but for now is stored in memory in a MutableLiveData. A RecyclerView's adapter is watching the data and displaying it. So far everything is working as expected, using a FAB the user can post a new entry which will go at the top of the list, on success I get a 200 and here's the main part where I'm getting lost...
When I want to add a single item to a list stored in a LiveData, the observer is unaware of the delta. I currently make a call to RecyclerView.Adapter.notifyDataSetChanged(), though the ideal in my case would be to call notifyItemInserted(0) or in other cases I can see various other notifications. What the best way to do this? The lifecycle architecture library appears to be very well thought of, I assume I'm missing something simple. I can't imagine having to manually perform a diff between the lists?
Expanding the functionality of an under development app, I need to show to the user a progress notification dialog. Problem is, I cannot get it done right. Furthermore, I cannot dismiss this notifier properly. Have tried with a clock and a variable set to e.g. "5000ms" and then to "0", without any lack.
What I need to achieve is the following functionality:
a. Check if the tag "storeparsedData" is in a TinyDB, populated with the fetched JSON data. I have this done, following #Taifun advice in my relative question.
b. If the tag is not there (empty list), do a getWeb.gotText block to get the JSON data (this is done with procedure "getWebData". This functions right, but takes a while about 1'35'' or more, so need to show something to the user.
c. While fetching JSON data form web, need to show a "ShowProgressDialog" notifier to the user, so I can cope with the smartphone being seemingly freeze.
d. If the tag "storeparseData" is populated with fetched JSON data, dismiss the notifier.
Have tried the following coding, without relevant success:
Can someone help me out, to achieve this functionality in this app? A blocks code or something to follow and learn, will be awesome.
Thank you all in advance for your answers.
[Edit1]
After #Taifun suggestions, the functionality in question seems to be working, but there is a problem."ShowProgressDialog" block never fires, neither on device or companion. Also where should block "DismissProgressDialog" be attached to disable notifier upon JSON data received?
Here is the reviewed blocks code, for checking stored tags in TinyDB. "ShowProgressDialog" never fires as it should. Are there any suggestion for this issue?
Here is the blocks code for the getWeb function to get the JSON data:
Please advise, with a block code if applicable.Thank you all.
Your progressNotifier.AfterChoosing event never will fire, because that event only fires after choosing something from a Notifier.ShowChooseDialog block, but not for Notifier.ShowMessageDialog blocks. Therefore use a Notifier.ShowChooseDialog block instead and set the second button in that block to empty string.
Your while loop will freeeze your app, as you already realized... You do not need the Clock.Timer event at all to check if your data is there.
Just do it like this: after having received your data in the Web.GotText event and having stored the data in TinyDB, then dismiss the progress dialog and display the message "Database is ready".
Update: Instead of storing your list n times inside the for each in list loop, you should store it only once after the for each in list loop is finished... Same for the DismissProgressDialog and ShowAlert block...
What is the purpose of that join block? You might want to remove it...
I'm a beginner at App Inventor and I don't know what I'm doing wrong with the listpicker.
I am trying to create and app to reproduce the music I have stored in my server but when i display the listpicker I can't click any of the options and also I can't go back to the first screen. Here I put my code:
Image 1
Image 2
I tried to remove the line that says call listpicker.open but it only made appear a totally black screen.
The result of the code I just posted is exactly what I spect a list with the name and the link of the 2 songs I already upload to my server but when I click them it didn't do anything.
Thanks for your help.
The Web component works asynchronously, which means, it takes a little bit, until the result is available. The result you will get in the Web.GotText event.
Therefore it does not make sense to call the updateListpicker procedure in the Listpicker.BeforePicking event, because the result still is not available and you get displayed an empty listpicker. The listpicker will be opened, before you have received the result!
Set the listpicker to visible=false and use a button.click event to call the updateListpicker procedure. Then as you already do it in the Web.GotText event, assign the received list to the listpicker and open it.