Menu view child component gets hidden when width and height not explicitly defined

[troywatt]

I ran into this issue when trying to render a menu component that was nested inside of another components view which I had no ability to set styles on such as flex: 1 or width and height in order to force layout.

Because of the menu component container view within react-native-side-menu has the style rule

menu: {
    position: 'absolute',
    top: 0,
    left: 0
}

the container has no width or height. Setting an explicit width and height on the menu component with fix this issue.

[alinz]

Can you wrap that component with another View and set the style of that to flex:1? Also can you provide us with some code or screen shot?

[troywatt]

Thanks, I tried your suggestion and it does work but I also have to set the width/height explicitly on the wrapping component
when using a Navigator component, otherwise the content is still hidden by the absolute positioned menu.

Not a big deal, I guess it's more of an implementation detail.

Here is an example.

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

My pull request (#55) was merge in already to fix this, so I'll close this issue.