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?
Related
I want to know which is the best way to send and receive events only within the JS stack. The event which is being emitted should not reach the react-native bridge or simply I don't want the event to reach the android/iOS stack.
I know using NativeEventEmitter, we can send and receive event inside JS stack, but unsure whether this will pass the data through react native bridge. I want a optimised way of sending and receiving events within the JS stack.
Please help me find the right approach.
Thanks.
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.
In React native., How to call REST API on background process when move from one screen to another and also get individual reference of called API when back to that screen to showcase the status of sync API and it will work when application in foreground.
I recommend to use state management like redux to access data from anywhere in your app
and take a look to this liperares
react-native-background-fetch
react-native-background-task
How can I intercept the reloading process on Android (Dev menu -> Reload)?
I want to clear some part of Redux store when is happend the action.
The question provides quite a little insight but seeing that some working is required on the redux store every time there is a reload, you can catch INIT action fired by Redux every time the store is initialised, IMO
Is it possible to pass a javascript function from React Native onto iOS Native components such as a UIButton and execute there?
It is possible, but using events and not by sending JS to native components. Check out react-native docs for detailed information, but generally:
React Native enables you to perform cross-language function calls. You
can execute custom native code from JS and vice versa. Unfortunately,
depending on the side we are working on, we achieve the same goal in
different ways. For native - we use events mechanism to schedule an
execution of a handler function in JS, while for React Native we
directly call methods exported by native modules.