react-native-side-menu Out of phase - react-native

Question

I am working whit react-native-side-menu, but I have a problem whith the menu that I want to display, in fact when I put the menu property this element is showing all the time also when isOpen is set as false. This is my Code:
import React, {Component} from 'react';
import {Dimensions,ListView,ScrollView,StatusBar,Text,TouchableOpacity,View} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {Colors as JoboColors} from '../styles/General';
import SideMenu from 'react-native-side-menu';
//import SideBar from './SideBar';
export default class JobList extends Component {
state = {
isOpen: false,
};
handleMenu = () => {
this.setState({isOpen: !this.state.isOpen});
}
updateMenuState = (isOpen) => {
this.setState({ isOpen});
}
render() {
const myMenu = <UserMenu />;
return (
<SideMenu menu={myMenu}
isOpen={this.state.isOpen}
onChange={this.updateMenuState}>
<View>
<StatusBar
backgroundColor= {JoboColors.orangeC}
barStyle="light-content"
translucent={false}/>
<View style={styles.actionBar}>
<TouchableOpacity style={styles.menuIcon} onPress={this.handleMenu}>
<Icon name="ios-menu" size={32} style={styles.actionBarIcons}/>
</TouchableOpacity>
<Icon name="ios-search" size={30} style={styles.actionBarIcons}/>
</View>
<View style={{backgroundColor: 'white', justifyContent: 'center', flex: 1}}>
<Text>This is the content</Text>
</View>
</View>
</SideMenu>
);
}
}
class UserMenu extends Component {
render() {
return(
<ScrollView style={styles.content}>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
actionBar: {
height: 50,
flexDirection: 'row',
backgroundColor: Colors.orangeA,
alignItems: "center",
padding: 15,
},
actionBarIcons: {
color: "white",
},
menuIcon: {
flex: 2,
},
content: {
backgroundColor: 'blue',
},
});
And this is the view result, please notice that the blue block is the view for the slide-menu. Somebody has a similar problem like this?
Thanks in advance.

Answer 1

Simplified version of answer -
render() {
const myMenu = <UserMenu />;
return (
<View style={{flex:1}}>
<StatusBar backgroundColor="orange" barStyle="light-content" translucent={false}/>
<View style={styles.actionBar}>
<TouchableOpacity style={styles.menuIcon} onPress={this.handleMenu}>
<Text style={styles.actionBarIcons}>menu</Text>
</TouchableOpacity>
<Text style={styles.actionBarIcons}>search</Text>
</View>
<View style={{flex:1}}>
<SideMenu menu={myMenu} isOpen={this.state.isOpen} onChange={this.updateMenuState}>
<View style={{backgroundColor: 'white', justifyContent: 'center', flex: 1}}>
<Text>This is the content</Text>
</View>
</SideMenu>
</View>
</View>
);
}