callstack / callstack/react-native-paper
TextInput with value flickers on render
- 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
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