callstack / callstack/react-native-paper

Flat TextInput label flickers if right prop is rendering by condition

Abierto
#4,340 0 comentarios 0 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

### 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 | -

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.