Menu view child component gets hidden when width and height not explicitly defined about react-native-side-menu HOT 2 CLOSED

'use strict';

var React = require( 'react-native' );
var deviceScreen = require( 'Dimensions' ).get( 'window' );
var SideMenu = require( 'react-native-side-menu' );
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS,
    TouchableHighlight,
    } = React;


var menuPaneWidth = deviceScreen.width - 72;

var MenuContent = React.createClass({

    onPress: function(){
        this.props.navigator.push({
            component: MenuContent,
            title: 'Next Pane'
        });
    },

    render: function() {
        return (
            <TouchableHighlight style={ styles.container } onPress={ this.onPress.bind( this ) }>
                <View style={ styles.menu }>
                    <Text style={ styles.menuText }>Menu Pane</Text>
                </View>
            </TouchableHighlight>
        );
    }
});

var MenuExample = React.createClass( {
    render: function () {

        // Note: hidden due to no width/height on menu container
        var menuNav = <NavigatorIOS
            itemWrapperStyle={ styles.menu }
            style={{ flex: 1, width: menuPaneWidth, height: deviceScreen.height }}
            initialRoute={{
                component: MenuContent,
                title: 'Menu'
            }} />;

        // Note: works as expected with flex: 1 and explicit width/height on View wrapper
        /*var menuNav = <View style={{ flex: 1, width: menuPaneWidth, height: deviceScreen.height }}>
            <NavigatorIOS
                style={{ flex: 1 }}
                itemWrapperStyle={ styles.menu }
                initialRoute={{
                    component: MenuContent,
                    title: 'Menu'
                }} />
        </View>;*/

        return (
            <SideMenu menu={ menuNav }
                openMenuOffset={ menuPaneWidth }
                style={ styles.container }>
                <View style={ styles.container }>
                    <Text style={ styles.text }>Main Pane</Text>
                </View>
            </SideMenu>
        );
    }
} );

var styles = StyleSheet.create( {

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    menu: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#333333',
    },
    text: {
        fontSize: 20
    },
    menuText: {
        color: '#aaaaaa',
        fontSize: 20
    }
} );

AppRegistry.registerComponent( 'MenuExample', () => MenuExample );