I am currently working on implementing a drawer in my react native app. The issue I am facing is with the closing animation. When I click the close button, the animation seems to blink or flicker, as if it is opening and closing multiple times before finally shutting.
Here is the code snippet where I define the drawer functionality:
export default class Drawer extends Component {
constructor(props) {
super(props);
this.state = {
height: new Animated.Value(0)
}
}
showContent = () => {
Animated.spring(this.state.height, {toValue:130}).start();
}
hideContent = () => {
Animated.spring(this.state.height, {toValue:0}).start();
}
render() {
return (
<View>
<TouchableHighlight
onPress={this.showContent}
underlayColor="transparent"
>
<Text>Show</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={this.hideContent}
underlayColor="transparent"
>
<Text>Hide</Text>
</TouchableHighlight>
<Animated.View style={{height: this.state.height}}>
<Text>Content</Text>
</Animated.View>
</View>
);
}
}