react-native-paper
react-native-paper copied to clipboard
callstack
Delay Screen Navigation when using TextInput
Current behaviour
When navigating screen B from Screen A. Screen B has some text inputs (even single input). When pressing a button on Screen A, Screen A gets stuck for some seconds (e.g 2 sec). Screen navigation starts after some seconds(e.g 2 sec) When I experiment with React Native text input, I didn't face such delays.
This behaviour can be seen in react-native-paper snack example
Expected behaviour
There will be no such delay in screen navigation.
How to reproduce?
This behaviour can be seen in react-native-paper snack example
Your Environment
| software | version |
|---|---|
| react-native | 0.71.0 |
| react-native-paper | 5.1.3 |
| node | 18.13.0 |
| yarn | 1.22.18 |
Video Recording:
https://user-images.githubusercontent.com/57723965/213628786-0805a728-2a46-496c-9e68-d25031c86fac.mp4
Hey @saadi-ninjasCode, could you please extract the specific code to the separated snack?
Hey @saadi-ninjasCode, could you please extract the specific code to the separated snack?
@lukewalczak , Here is the link of the separated Snack. React Native Paper Text Input Furthermore, I am also attaching a video in the description.
I think the screen with TextInput's is overloaded and needs some optimization. Once I left there only eg 4 of them, there is no delay. Do you experience the similar issue in your project or just on the example snack?
I think the screen with TextInput's is overloaded and needs some optimization. Once I left there only eg 4 of them, there is no delay. Do you experience the similar issue in your project or just on the example snack?
I experience a similar issue in my project. I have 6 inputs on my screen. Then I run the React Native Snack example and I face the same issue there. That's why I report this issue.
When I use the Bare React Native TextInput I didn't face such an issue.
Hey @saadi-ninjasCode, could you please check whether the delay is visible using the latest version 5.2.0?
Hey @saadi-ninjasCode, could you please check whether the delay is visible using the latest version 5.2.0?
I didn't notice any improvement in delay.
I'm facing a similar problem. I've got a recipe app and the RecipeForm screen has quite a few TextInput elements. On my Android phone (Google Pixel 4), there's a huge delay when I navigate to this screen. I tried to use React DevTools to profile my app, but it shows that the initial render of the recipe form takes 71.7ms:
If I hover over any of the components in the profiler (in the image above), it lists the reason for render as "This is the first time this component rendered". Even if I optimize my app to get rid of rerenders, the first render is so slow that the app feels laggy.
I'm on v5.10.3 of react-native-paper, v0.71.1 of react-native, v47.0.0 of expo, and I'm using v7.47.0 of react-hook-form to optimize my form.
I'm facing a similar problem. I've got a recipe app and the
RecipeFormscreen has quite a few TextInput elements. On my Android phone (Google Pixel 4), there's a huge delay when I navigate to this screen. I tried to use React DevTools to profile my app, but it shows that the initial render of the recipe form takes 71.7ms:If I hover over any of the components in the profiler (in the image above), it lists the reason for render as "This is the first time this component rendered". Even if I optimize my app to get rid of rerenders, the first render is so slow that the app feels laggy.
I'm on v5.10.3 of react-native-paper, v0.71.1 of react-native, v47.0.0 of expo, and I'm using v7.47.0 of react-hook-form to optimize my form.
Is there any solution for this ? Have you got one ?
@praweshlamsal No, unfortunately. This was for a personal project so I just kept it as is 🤷♀️
I got this issue when I used react-native-paper together with react-hook-form. Bare inputs, without form validator, works fine.
