callstack / callstack/react-native-paper
Flat TextInput label flickers if right prop is rendering by condition
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### 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 | -
Contributor guide
Assessment
This issue has not been assessed yet.