I can't seem to find any answers online about this, but has anyone ever run into a problem with asynchronous functions causing a white screen on install?
I know the async await part of this code is causing the issue:
async syncData(){
await fetchSomeData()
navigate("to my first page");
{
The fetchSomeData() function fetches data from a url and returns a promise.
The app starts in a loading page where the above fetching is. It works fine when I don't have async await, but it doesn't wait for the data to finish fetching before navigating. The weird thing to me is that this only happens on the first install of the app.
edit:
I should try and clarify. The async await works in the sense that it waits properly for the function fetchSomeData() to do its thing. And when I build locally (with starting a metro server and debugging the app on my phone), the app works as intended. But when I build an APK, the async await in this section causes the app to crash and display a white screen (but only after the first install). If I remove the async await, it won't cause a white screen, but obviously, it doesn't wait for the data to fetch.
Related
I have found what seems to be a bug on Android. I have not tested it on IOS.
updateProfilePhoto() is a redux thunk that just sends a PUT request to my node server.
The problem is this, I can upload an image to my node server using fetch. The image is received and saved successfully on the server. If I wait for about 1 second and the upload another image, it goes through successfully. However, if I upload an image and then upload another immediately after the first one goes through, I get the error 'Network request failed' and the second image will not be received on the server.
It seems to me that I cannot constantly upload images back to back really quickly, one will go through, the next one will fail and the next will go through... and so on.
I am testing on an Android Emulator. API level 30. I have not tested on a real device yet, I will try that when I'm able to.
The error happens for the built-in fetch() and XMLHttpRequest. Both behave the same. On XMLHttpRequest I can check the progress and it says 100% and then fails with xhr.status equal to 0.
I need a sure fire way to upload an image to my server without it failing for no reason. I can add a delay of something like 500ms between uploads and show the user that it's loading but that's a silly way to resolve the issue. I can't find out why the upload fails on the second try.
const onSelectProfileImage = (pickerResponse: ImagePickerResponse) =>
{
const uri = pickerResponse?.assets && pickerResponse.assets[0].uri;
const name = pickerResponse?.assets && pickerResponse.assets[0].fileName;
const type = pickerResponse?.assets && pickerResponse.assets[0].type;
if(uri)
{
const photo = new FormData();
photo.append('photo', {name,type,uri});
dispatch(updateProfilePhoto({photo, uri, user_id: id, headers: {...headers,"content-type": "multipart/form-data"}}))
}
}
I've a strange problem in app I'm currently coding.
Here is the story of the app :
I've used React Native's ScrollView as a horizontal slider,
I display maximum 5~6 slides so I don't need to use FlatList for this.
Slides are actually records coming from the database so actually they are some dynamic components
and slider works as expected.
In every slide, there are also are some option buttons (Touchables) to send data to the server.
When the user presses a button app is opening a modal window to confirm and then sending some data to server.
Until now all is okay.
The Problem :
But in some slides of the slider I'm having a strange problem :
"console.log" commands and also network commands to send data to server is not working.
On the screen, I see Buttons(Touchables) are working and also the modal I've coded is also appearing & disappearing according to the state variables. But somehow console.log commands and also network commands are not even executed. Since I can't log anything it's also hard to understand the problem.
Is there anyone had a similar problem ?
Thanks
I've finally solved this problem, wanted to share my experience here.
In the app I was making post requests to the backend with Axios,
but I wasn't interested in the result of this post requests,
they were just log records so the result of backend calls weren't important.
So I didn't use any "await" command or didn't code anything like Promise.then / catch,
just posted with Axios and scrolled to another slide in my app without waiting for the backend.
After the 8th Axios post, app started not to work.
It seems like working .. touchable effects , modals even navigation works
but nothing else was working. Event console.log commands weren't working.
It's an interesting behavior of React Native , but I've understood the situation after reading the blog below :
https://medium.com/#rotemmiz/react-native-internals-a-wider-picture-part-1-messagequeue-js-thread-7894a7cba868#
Basic reason was that in the backend (NodeJS) I didn't return any response,
there wasn't any command like res.send("success") .. so frontend React Native app was waiting for the response.. event if I didn't use any await or Promise it was still trying to get the response and after the 7-8 call it was blocking the main thread.
If there is a way to configure Axios not to wait for the backend to answer for the post request, please write here.
I'm using callkeep to show an incoming call screen when a VoIP push notification is triggered. What I want to accomplish, is to ring the user for just 20 seconds. In case the user never answers, the incoming call screen should just disappear. How can I do that with callkeep?
Should it be modified in the javascript code or in the AppDelegate?
There's a solution, which is done on front end part.
First of all, run
npm i react-native-background-timer
This will help you run scheduled tasks when the app is closed.
Then, you will need to add the listener:
RNCallKeep.addEventListener("didDisplayIncomingCall", onIncomingCallDisplayed);
Which is fired when call is displayed.
And then implement it like this:
const onIncomingCallDisplayed = ({callUUID, handle, fromPushKit, payload,}) => {
BackgroundTimer.setTimeout(() => {
RNCallKeep.endAllCalls();
}, 120000);
};
Where 120000 is time in milliseconds when you want to end the call.
You could also add a backend request to notify your server that the call is rejected.
For an expo app that is not ejected and runs in the background, my goal is to do a location tracking periodically or when location changes.
I am sticking with Expo's base APIs including its Location, TaskManager API.
Location tracking only works for a first couple of times before it completely stops.
Following what was written in the Documentation here: https://docs.expo.io/versions/v32.0.0/sdk/location/, I was able to make an app that tracks location with the API: Location.startLocationUpdatesAsync of Expo. I had also defined a "Expo.TaskManager" and this should log a new location every time a new location is detected.
However, if the app runs in the background for more than a few seconds, geolocation service tracking no longer works. No further logging will not be written in the console.
Define Task:
TaskManager.defineTask(PUSH_LOCATION_IN_BACKGROUND, ({ data, error }) => {
if (error) {
return;
}
if (data) {
const { locations } = data;
console.log('locations are ', locations)
}
});
Start (register) the task:
await Location.startLocationUpdatesAsync('PUSH_LOCATION_IN_BACKGROUND', {
accuracy: Location.Accuracy.Balanced,
distanceInterval:3,
});
I expect that every time I change the location of my device (by either moving to a new location of faking my GPS data), I would receive a logging of the new location if the app runs in the background. However, as soon as the app enters the background, it only logs the data for a couple of times before it completely stops.
I would expect that the app will run stably in the background and if possible, avoid being killed by the OS even if the resource consumption in the device is already high.
And as someone who is not experienced in Android developemnt, do I need to set up an undismissable (user cannot dismiss it nor remove it by clicking on it) notification in order to keep the background task of the app alive? Can I do it with an unejected Expo app.
I am new to React Native.
I tried a lot of ways to upload a file to server and handle progress.
I found that using XMLHttpRequest can achieve this, but when I try to use
var xhr = new XMLHttpRequest();
xhr.addEventListener('progress',function(event){....});
for the first time this code has worked, but after reloading js this code did not work any more and a strange error occurred:
undefined is not a function (evaluating 'request.addEventListener')
What is the problem and how this can be solved?
React is really very strange, something works today and doesn't work tomorrow!
I have found that the componentWillMount method is not run when just reloading the Javascript and not restarting the application. This was a problem for me when i tried to catch an event sent over the react bridge. If you are using this to start the listener it will not be added if you just reload the JavaScript. I simply restart the application every time I changed something and have to test if the code is catching the event.
I have done this on an android device and it worked. Hope this helps you. I will come back if I find an actual solution to the problem and not just a workaround.
You probably don't need this anymore but for others this is the correct way to add an event listener:
xhr.upload.addEventListener('progress', function(event) { console.log(event); });