callstack / callstack/react-native-paper
Flat TextInput label flickers if right prop is rendering by condition
- 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
I want to render right IconButton if TextInput is focus and have non empty text, but label is flickering when right IconButton appears/disappears
### Expected behaviour
If i need to render right iconButton by condition, then label keeps his position and doesn't flicker
### How to reproduce?
```
function TextInputDefault(): React.JSX.Element {
const [text, setText] = useState('');
const [isFocused, setIsFocused] = useState(false);
return (
setText('')}
/>
) : null
}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
error={false}
label="Email" //#0062A3
value={text}
onChangeText={(text) => setText(text)}
selectionColor="#317BA8"
cursorColor="#317BA8"
underlineColor="#A3B3C2"
activeUnderlineColor="#007ABE"
textColor="#081C31"
placeholderTextColor="#BFCCD9"
placeholder="Placeholder"
contentStyle={{ backgroundColor: 'transparent' }}
style={{ backgroundColor: '#51667A1A' }}
/>
Email address is invalid!
);
}
```
### Preview
https://github.com/callstack/react-native-paper/assets/98227045/cee707e3-1a18-478e-a0be-19aa38a895af
https://github.com/callstack/react-native-paper/assets/98227045/4abea4bd-d38f-40c3-bad7-0cafb4304459
### Your Environment
| software | version
| --------------------- | -------
| ios | 17.2
| android | 13
| react-native | 0.73.6
| react-native-paper | 5.12.3
| node | 20.5.0
| npm or yarn | 1.22.19
| expo sdk | -
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện TextInput được cung cấp, tập trung vào label của Flat TextInput khi IconButton bên phải có điều kiện thay đổi trong lúc focus hoặc nhập văn bản. Hoàn thành khi label giữ vị trí ổn định mà không nhấp nháy ở cả trạng thái có icon bên phải và trạng thái không có icon bên phải.
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
- 42/100