I have been trying to fix this weird problem I am facing with React Native/Expo. I was working on an Authentication page. It is a simple username and password input form. It was going okay for a few weeks until yesterday when the TextInput component started lagging. The weird part is it only lags in my device (Iphone X). When I use a virtual device, it runs fine and there is no lagging when I input something in the TextInput.
I also want to mention that it is not just my code but if a component has more than once TextInput, the TextInput becomes laggy and super slow when anything is typed.
I have tried:
Restarting my phone
Deleting the expo app and downloading it again
Running the app in production mode
Nothing seems to work and the component is still lagging. Has anyone else faced such problem? I have created this simple snack:
https://snack.expo.io/#ayushdev/9d2af8
The issue still persist in this simple snack too.
You should try state colocation here. Other things constant, that is expected to give you at least some speedup.
Separate out the different InputText components in your form, each updating their own states only. This ensures that the entire form is not re-rendered as you change the input in just one of those fields.
Related
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've looked it up on reactnative.dev, and the Text component is supposed to have an 'onTextLayout' prop.
I'm running the React Native version 0.62.2, and the documentation on their site says it applies for 0.62. However, when I try to use the prop in a Text component, I am shown this message:
I need to use this prop to detect when the text starts overflowing into two lines. If anyone has another solution of how I can accomplish this without onTextLayout, that would also be very helpful.
It appears it's not working on react-native-web
http://necolas.github.io/react-native-web/docs/?path=/docs/components-text--children
Just test your app on android/iOS and you will be fine
This is regarding React Native Mobile App Development.
I am facing an issue with "Like" functionality for a List-view Items.
When i like a List-view Items, it works fine and the colour changes to blue instantly. But on existing the app & opening it again, the like count is increased but the colour set to the default again.
Please help me with this issue!
Using React-Native has a long press error
Using TouchableHighlight And TouchableNativeFeedback
Attempted to transition from state RESPONDER_INACTIVE_PRESS_IN to RESPONDER_ACTIVE_LONG_PRESS_IN
My code
This issue usually only appears in android when you are debugging.
This issue https://github.com/facebook/react-native/issues/5823 goes into further detail.
Try turning debugging off and see if you still get the error.
Aligning the clocks on your phone and computer may solve this problem. My experience is that the two clocks do not need to be exact match, just make sure they are not off by more than a few seconds. You can easily achieve this by adjusting one clock manually.
Yes the same issue I faced it, after a much more research I found its's solution that instead of using TouchableHighlight, you can use TouchableOpacity component .
For detail refer this link -
http://androidseekho.com/others/reactnative/how-to-solve-touchable-longpressdelaytimeout-problem-in-react-native/
I'm starting with react native and I have a little experience with React, Because of that I want to use redux, react-router, and react-router-redux, which I have used in the past for a web React app.
All those packages can be used in react-native, except for react-router, the closest I could find is react-router-native which seems to work much like the browser version. So far so good, I made a quick and dirty app to test the router, redux, etc.
But I'm having some issues I can't figure out how to solve or debug: When changing the visuals like the text or some styles, the HMR seems to work fine, applying the changes in real time, but when I change some other module/file, like the container element (where the redux connect() function is called) or some code on the reducers, the HMR doesn't change anything and I have to reload all the app to see the changes.
Here is my code: https://github.com/DenJohX/test-react-router-native It basically just changes the color of some text by toggling a variable in the redux store. Sorry for just linking it but I think its better to show you all the folders and project structure, maybe I'd just goofed something in there or didn't use the correct folder structure.
I'm using https://github.com/jhen0409/react-native-debugger to debug the app, and by the console messages, the HMR does run and patches something but without affecting the current loaded code.
To test the problem, try to edit the colors in src/screens/pageOneContainer.js, the HMR should change the code, re-render the screen, and show the new colors, but they just stays the same.
Thanks in advance.