callstack / callstack/react-native-paper

Flat TextInput label flickers if right prop is rendering by condition

オープン
#4,340 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
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 | -

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。