Slow loading in TextInputs labels

[AMDev2023]

Current behaviour

Delay loading in textInputs label, When we using multiple textinput in same screen.

Expected behaviour

Textinputs labels dont take time to load.

How to reproduce?

When using more than 4 or 5 textinput in same screen, Navigating to multiple textinputs screen having this issue(In android simulator Android 12-Nexus 5x)

<TextInput
mode='outlined'
label={<Text style={{ fontSize: 14, fontFamily: 'poppins-500' }}>{label}}
value={value}
style={[{ height: 50 }, style]}
onChangeText={onChangeText}
placeholder={placeholder}
outlineColor={colors.LIGHT_GREY1}
activeOutlineColor={colors.PRIMARY}
outlineStyle={{ borderRadius: 4, borderWidth: 1 }}
contentStyle={[styles.container, multiline && { paddingTop: 12 }]}
textColor={colors.LIGHT_BLACK}
theme={{
colors: {
background: colors.LIGHT_BLUE,
onSurfaceVariant: colors.VERY_LIGHT_GREY,
},
}}
maxLength={maxLength}
keyboardType={keyboardType}
secureTextEntry={passwordVisible}
multiline={multiline}
textContentType={textContentType as any}
autoCapitalize={autoCapitalize as any}
autoCorrect={autoCorrect}
contextMenuHidden={contextMenuHidden}
/>

Preview

https://drive.google.com/file/d/1KbP4KgPucbomRQBp6t0yXLrIXaUJA8z5/view?usp=drive_link

Your Environment

software	version
android	Android 12 (Nexus 5x)
react-native	0.72.6
react-native-paper	5.11.1
node	18.16.0
npm	9.6.5
expo sdk	49.0.5

[souzaluiz]

@AMDev2023 i have same problem in 5.11.5 version

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-12-28.at.14.34.01.online-video-cutter.com.mp4

[badalsaibo]

Related #2602 #2380

[choudhary-github]

I am also facing the same issue of rendering labels after the box Is rendered.

RNP: 5.12.3

[pedrohbl03]

Hi guys, I have the same problem using RNP -> 5.12.2 and RN -> 0.72.7
Has anyone made any progress with this?

The problem occurs on ANDROID RELEASE BUNDLE, but in IOS everything works fine.

[danbeo95]

I am also facing the same issue :(

[neur0ns]

same

[tkrafael]

Same here, think that must be discussed.
My scenario makes margin/padding to change when screen is loaded

[Rohphi]

same

[AMDev2023]

@lukewalczak
Please fix the issue, We are looking for the fix!

[choudhary-github]

It is more horrible when TextInput fields render with value.

[prince272]

Here updates please.

[xbittencourt]

Same here, v5.12.5

[carlosqrib]

Same issue here. Using: expo 51.0.36, react-native 0.74.5, react-native-paper 5.12.5, node 20.

[fozzarelo]

same here..

[marko-mlinarevic]

I'm out this library is becoming useless

[israel-dryer]

same issue. There is an annoying delay when loading the labels. There are 9 TextInput components on the page with default values.

Android 15
Pixel 7a

"react-native": "0.76.6",
"react-native-paper": "^5.13.1",

[felix-lambert]

I’m also experiencing this issue when switching between tabs/screens. The TextInput floating label animation causes a noticeable delay when rendering the screen, especially when there are multiple inputs. This affects the perceived performance of the app.

I'm using react-native-paper with expo-router.

Thanks for looking into this – a fix or optimization would be greatly appreciated!