Closed
Description
When creating animation for animated.View, opening animation works as expected, but on reverse of that animation, the animated.View gets black background, even after background color for that animated.View is set before starting reverse animation. Can some one help me with this?
Environment
Environment:
OS: Linux 3.13
Node: 9.2.1
Yarn: 1.3.2
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.52.2 => 0.52.2
import React, { Component } from 'react';
import {
View,
Text,
TouchableHighlight,
Dimensions,
Animated,
Easing
} from 'react-native';
import styles from './styles';
export default class TestScreen extends Component {
constructor(){
super();
this.x_translate = new Animated.Value(0);
this.state = {
bgColor : 'transparent'
}
}
openMenu () {
this.x_translate.setValue(0);
Animated.sequence([
Animated.timing(this.x_translate,
{
toValue: 1,
duration: 250,
easing: Easing.linear,
useNativeDriver: true,
}),
]).start(() => {
this.setState({
bgColor : 'rgba(0,0,0,0.25)'
});
});
}
closeMenu () {
this.setState({
bgColor : 'transparent'
});
this.x_translate.setValue(1);
Animated.timing(
this.x_translate,
{
toValue: 0,
duration: 250,
easing: Easing.linear,
useNativeDriver: true,
}
).start(() => {
//this.props.closeMethod()
})
}
render() {
const menu_moveX = this.x_translate.interpolate({
inputRange: [0, 1],
outputRange: [0, -340]
});
width = Dimensions.get('window').width - 340;
width = width < 0 ? 0 : width;
return (
<View style={{flex: 1}}>
<Text onPress={() => this.openMenu()} style={{color: '#000'}}>Open Menu</Text>
<Animated.View
style={[
styles.sideMenu,
{
transform: [
{
translateX: menu_moveX
}
],
flex: 1,
flexDirection: 'row',
right: -340,
backgroundColor: this.state.bgColor
}
]}
>
<TouchableHighlight
style={{width: width, height: '100%'}}
onPress={() => {
this.closeMenu();
}}>
<Text style={{color: '#fff'}}>Hide Modal</Text>
</TouchableHighlight>
<View style={{backgroundColor: '#181c18', width: 340, height: '100%'}}>
</View>
</Animated.View>
</View>
);
}
}