Delay Screen Navigation when using TextInput

[saadi-ninjasCode]

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:

Screenrecorder-2023-01-20-11-02-19-934.mp4

[lukewalczak]

Hey @saadi-ninjasCode, could you please extract the specific code to the separated snack?

[saadi-ninjasCode]

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.

[lukewalczak]

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?

[saadi-ninjasCode]

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.

[RichardLindhout]

The textinput is currently really slow indeed!

[lukewalczak]

Hey @saadi-ninjasCode, could you please check whether the delay is visible using the latest version 5.2.0?

[saadi-ninjasCode]

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.

[EvgeniyaGorobets]

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.

[praweshlamsal]

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.

Is there any solution for this ? Have you got one ?

[EvgeniyaGorobets]

@praweshlamsal No, unfortunately. This was for a personal project so I just kept it as is 🤷‍♀️

[mrakus-sofomo]

I got this issue when I used react-native-paper together with react-hook-form. Bare inputs, without form validator, works fine.