I am trying to create an InputAccessoryView for my app. It has a TextInput and a Pressable button.
What I would like to do is, when the TextInput has empty value then hide the button, else show the button using react native animation.
I have come up with the working component that works as expected. And for the animations I am utilizing useNativeDriver: true
.
However, there's an issue:
- When text is empty and I type a word and then pause, then the showing animation is animating smoothly. (as the gif below)
- But when text is empty and I am typing continuously, then the showing animation is animating in a janky way. (as the gif below)
Here is the code and also link to the expo snack:
export default function App() {
const [text, setText] = React.useState('');
const translateY = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
if (text.length > 0) {
// animate the add button to show by coming up
_animateShowAddButton();
} else {
// animate the add button to hide by going down
_animateHideAddButton();
}
// return null
}, [text]);
const _animateShowAddButton = () => {
Animated.timing(translateY, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start();
};
const _animateHideAddButton = () => {
Animated.timing(translateY, {
toValue: 100,
duration: 300,
useNativeDriver: true,
}).start();
};
const onPressFunction = () => {
console.log('onPressFunction');
};
return (
<View style={styles.container}>
<Text style={styles.paragraph}>Some text view</Text>
<View style={styles.myInputAccessory}>
<TextInput
placeholder="Enter text"
style={styles.textInputStyle}
onChangeText={(text) => setText(text)}
/>
<Animated.View
style={[
{
transform: [
{
translateY: translateY,
},
],
},
]}>
<Pressable style={styles.buttonStyle} onPress={onPressFunction}>
<Ionicons name="send" size={24} color="white" />
</Pressable>
</Animated.View>
</View>
</View>
);
}
It seems like the animation is paused (and animates again) whenever the text is changed. Could you help me how to animate the button to show smoothly when the text is not empty?