callstack / callstack/react-native-paper
Flat TextInput label flickers if right prop is rendering by condition
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### 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 | -
贡献指南
调研方向
从提供的 TextInput 复现开始,重点关注在聚焦或输入文本期间条件性的右侧 IconButton 发生变化时 Flat TextInput 的标签。完成的标准是:无论处于右侧图标存在还是右侧图标不存在的状态,标签都能保持稳定位置且不闪烁。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend, mobile
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 42/100