callstack / callstack/react-native-paper

TextInput with value flickers on render

Abierto
#4,299 0 comentarios 8 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

### Current behaviour
When rendering a TextInput with a value, the component flickers as it loads. Tested with `outlined` and `flat`.

### Expected behaviour
No flicker.

### How to reproduce?
1. open snack
2. open TextInput
3. open and close "New inputs" a few times, you'll feel the flicker. It's much more noticeable on my mobile where everything runs slower than on desktop
https://snack.expo.dev/@willsmithte/react-native-paper-example_v5

### Preview

https://github.com/callstack/react-native-paper/assets/26863411/a6f1d555-13ef-43f4-9dc9-1ab60e638091

### Your Environment

from the official example snack

"color": "*",
"expo-font": "~11.1.1",
"expo-updates": "~0.16.4",
"expo-constants": "~14.2.1",
"expo-keep-awake": "~12.0.1",
"expo-status-bar": "~1.4.4",
"@expo/vector-icons": "^13.0.0",
"react-native-paper": "5.11.3",
"react-native-screens": "~3.20.0",
"@react-navigation/stack": "*",
"react-native-reanimated": "~2.14.4",
"@react-navigation/drawer": "*",
"@react-navigation/native": "*",
"react-native-vector-icons": "9.2.0",
"@react-navigation/elements": "*",
"react-native-gesture-handler": "~2.9.0",
"@react-navigation/bottom-tabs": "^6.4.3",
"react-native-safe-area-context": "4.5.0",
"react-native-vector-icons/FontAwesome": "*",
"@react-native-async-storage/async-storage": "1.17.11",
"react-native-vector-icons/MaterialCommunityIcons": "*"

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Start by running the linked Expo Snack and reproducing the flicker in TextInput with both outlined and flat modes, especially on a slower mobile device. Inspect the TextInput component implementation and compare renders while opening and closing "New inputs". Done means the value renders without visible flicker in both modes.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native, typescript
Área
frontend, mobile
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.