callstack / callstack/react-native-paper
TextInput with value flickers on render
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
### 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": "*"
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách chạy Expo Snack được liên kết và tái hiện hiện tượng nhấp nháy trong TextInput ở cả hai chế độ outlined và flat, đặc biệt trên thiết bị di động chậm hơn. Kiểm tra phần triển khai của component TextInput và so sánh các lần render khi mở và đóng "New inputs". Hoàn tất khi giá trị được render mà không có hiện tượng nhấp nháy nhìn thấy được ở cả hai chế độ.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- frontend, mobile
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100