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 (
<View>
<TextInput
right={
isFocused && text ? (
<TextInput.Icon
icon="camera"
forceTextInputFocus={true}
style={{ backgroundColor: 'red' }}
onPress={() => 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' }}
/>
<HelperText type="error" visible={false} padding="none">
Email address is invalid!
</HelperText>
</View>
);
}
Preview
2024-03-13.13.06.09.mov
2024-03-13.13.07.58.mp4
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
-
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?
Preview
2024-03-13.13.06.09.mov
2024-03-13.13.07.58.mp4
Your Environment