callstack / callstack/react-native-paper
TextInput with value flickers on render
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### 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": "*"
贡献指南
调研方向
首先运行链接的 Expo Snack,并在 outlined 和 flat 两种模式下复现 TextInput 的闪烁,尤其是在速度较慢的移动设备上。检查 TextInput 组件的实现,并比较打开和关闭 "New inputs" 时的渲染结果。在两种模式下值都能渲染且没有可见闪烁,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend, mobile
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100