Reverse Animated getting black background

[zmax92]

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>
		);
	}
}

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[zmax92]

Environment section updated...