callstack / callstack/react-native-paper

TextInput with value flickers on render

未关闭
#4,299 0 条评论 8 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。