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.
Related
When a API call is happening, Im not able to click any touchables in the screen. They wont respond until the API call is done. Is there any solution for this?
I tried with many react native components like TouchableOpacity, TouchableHighlight, Pressable but the main issue is onPress itself is not trigger when the API call is in process.
You must use async/await or .then while making api calls. if you are not using these your app will stop working until api call completes or promise resolves.
Can you open the dev tool and set show perf monitor on and check the JS FPS?
Async functions usually don't block touchables while they are running in the background. Regardless if you use async/await or .then.
According to what you have provided, it seems that your JS thread is freezing which means there are many processes running in the background.
Can you please share a snippet of the code you are running?
I have a Vue3 app which is giving me multiple errors only when I mount a specific component within my generic modal component. On desktop across browsers I get zero errors and everything works as expected. On iOS (using desktop Safari connected locally to capture console logs) it shows the log below, along with a few other "Maximum recursive updates..." from other components (which have nothing to do with the modal or it's inner template).
I've checked every single component that is listed in the error below ("at~") and every other component that is used in that modal template (it's only one template that breaks) and NONE of them are using a mounted hook, so the "Unhandled exception during mounted hook" doesn't make any sense.
I know this is not much to go on, but has anyone else seen this recursive error happen only in certain components and only in iOS before?
In addition to the above, I've double checked all logic for any recursive issues and have found none. And, if there really were some, I would assume they would show up on desktop as well, not only on iOS.
Pretty stumped here, friends.
The problem seems easier but not working, im working over a spa on webview for apps.
So for example, in some cases I start the web with a main route, like 'localhost/path1/path2'.
So if they press a custom button in topbar (custom component), it goes to 'localhost/path1', here perfect.
The problem is when they press the native back button, or the back arrow in desktop (native).
What happen here is the app is closed or the url is empty in desktop.
I tried to force a push in many ways on load vue with many paths, but not working, I tried to intercept native back and force push to avoid close first time with many paths, but not working anyways.
If someone understand what Im saying and a solve for urls with path/id, and after native back just keep path, instead of close I hope you can help.
Thanks
In my react-native app's code:
I am monitoring AppState changes
When AppState changes to 'inactive' or 'background', I write about 2000 key/value pairs of data to AsyncStorage
When the app starts I read this data
When I test the app on android (didn't test on iOS yet):
If I minimize the app, the data is written as expected. I can see that by closing the app after minimizing it, and restarting it
However, if I click on the 'Recent' button in the navigation bar (which changes AppState to 'inactive') and immediately click on the 'X' button at the top right of the app, the data doesn't seem to be written, or at least not all of it (I am not checking all 2000 values, just few of them). If I try to write only few values, they are written
Question:
The explanation to the above behavior seems to be simple: the app has enough time to perform few operations before I click on 'close', but not to write 2000 values. Is there a way to perform the writing before the app is closed?
Actually it's not recommended to do any async function or anything that could take too long. Because you don't have the control of how much time it will take to write the 2000 values. The app can go to background and the SO can kill the proccess of your app. When the app is in background is the SO that controls it.
I have Ionic app that communicates with Laravel API server side. Thing that bothers me is that elements like buttons and pre-defined text show first, and then after a few milliseconds resources from API load.
I would like the whole page to have that same millisecond pause so that all resources load at the same time, because for instance, my POST call breaks if I click the button to place an order before the server resources are shown on screen.
I have no idea how to google that nor what code part would be useful to paste here, so if anyone had simmilar problem...