How to speed up React Native screen when full of TextInput?

132 Views Asked by At

I have a screen with more or less 12 TextInput. As I open the screen with multiple TextInput, the app starts to lag and FPS seems to drop.

I am using React Native Paper UI library and found out that its TextInput component has performance issue. I switched to using React Native Elements and the lag/FPS drop issue persists.

When I tried to create my own custom TextInput using the built-in from React Native, the performance issue was substantially reduced but it is still not as smooth as the other screen I have that has no TextInput in them.

What best practices or recommendations or suggestions can I follow to make navigating to a screen with multiple TextInput in React Native as smooth as possible?

I have tried using React Navigation Stack instead of Stack; ensured that no unnecessary re-renders happen, and the like.

Does icons on TextInput affect performance?

What I want to achieve is a smooth transition without noticeable FPS drop or delay or lag when opening a screen with multiple TextInput in it. Two to three TextInput are fine but my form design and UI require me to have all TextInput in one screen.

I am on Expo currently running a development build.

Thank you!

0

There are 0 best solutions below