Blank space where element used to be after animating translateX

I'm running the latest version of react-native (0.44) and react (16.0.0-alpha.6)

While successfully animating translateX via transform, I am left with a blank space where the element used to be.

The animation is started after the component is mounted:

// Animation invoker
componentDidMount () {
    this.animateMoveOut();
}
// Animation function
animateMoveOut () {
    this.animateXValue.setValue(1);
    Animated.timing(
        this.animateXValue,
        {
            toValue: 0,
            duration: 1000,
            easing: Easing.linear
        }
    ).start();
}
// animated stylesheet object
const transform = [{
    translateX: this.animateXValue.interpolate({
        inputRange: [0, 1],
           outputRange: [-300, 0]
        }),
    }];

I render two views in a container view. One on the left that moves out of the picture and leaves a blank space. The right panel (WebView) doesn't flex to full width. How can I do that?

This is the result:

Here's the code:

export default class WebViewExample extends React.Component {
    constructor() {
        super();
        this.state = {
            menuState: 'closed',
            activeTitle: 'Google',
            activeLink: 'https://www.google.com',
            links: [
                {
                    title: 'Google',
                    url: 'https://www.google.com',
                },
                {
                    title: 'Facebook',
                    url: 'https://www.facebook.com',
                },
                {
                    title: 'Twitter',
                    url: 'https://www.twitter.com',
                },
            ]
        };

        this.animateXValue = new Animated.Value(1);
    }

    componentDidMount () {
        this.animateMoveOut();
    }

    render() {
        const transform = [{
            translateX: this.animateXValue.interpolate({
                inputRange: [0, 1],
                outputRange: [-300, 0]
            }),
        }];
        return (

            <View style={styles.container}>
                <Animated.View style={{
                    backgroundColor: '#e7e4ff',
                    transform,
                    display: this.state.menuState === 'closed' ? 'none' : 'inline',
                }}
                >
                    <Button
                        title="Google"
                        icon={{name: 'google', type: 'material'}}
                        onPress={() => this._onNavigateButtonPress('Google')}
                    />
                    <Button
                        title="Facebook"
                        icon={{name: 'facebook', type: 'material-community'}}
                        onPress={() => this._onNavigateButtonPress('Facebook')}
                    />
                    <Button
                        title="Twitter"
                        icon={{name: 'twitter', type: 'material-community'}}
                        onPress={() => this._onNavigateButtonPress('Twitter')}
                    />
                </Animated.View>
                <WebView
                    source={{uri: this.state.activeLink}}
                    style={styles.webView}
                />
            </View>
        )
    }

    _onNavigateButtonPress = function(navid) {
        console.log(' >> >> >> >> >> Navigating webview to ' + navid);
        let navlink = this.state.links.filter((link) => link.title === navid)[0].url;
        this.setState({activeLink: navlink, activeTitle: navid});
    };

    animateMoveIn () {
        this.animateXValue.setValue(0);
        Animated.timing(
            this.animateXValue,
            {
                toValue: 1,
                duration: 1000,
                easing: Easing.linear
            }
        ).start();
    }
    animateMoveOut () {
        this.animateXValue.setValue(1);
        Animated.timing(
            this.animateXValue,
            {
                toValue: 0,
                duration: 1000,
                easing: Easing.linear
            }
        ).start();
    }
}
const styles = StyleSheet.create({
    container: {
        // display: 'flex', // makes no difference
        flexDirection: 'row',
        flex:1,
    },
    webView: {
        // flex: 1, // makes no difference
    },
});