React Native Navigation: Drawer items not showing or disappearing when setting a flex value - react-native-navigation

Question

Following is my minimal working example. It is 3 basic screens, and a Drawer screen. In the render() method of the DrawerScreen I am populating the drawer screen with the navigation items from the tabs array.
When I set the flex value of the navigationItem everything starts to behave weirdly.
The items don't show up in the drawer screen when reloading the app most of the time
When the items do show up, they disappear after they have been tapped on.
If the navigationItem style in the Stylesheet has no flex value, it works as expected. I don't understand what is happening and have no idea how to fix this.
Code:
const packageName = 'com.rnplayground';
class FirstTab extends React.Component {
render(){
console.log(this.props)
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>FirstTab</Text>
</View>
)
};
}
class SecondTab extends React.Component {
render(){
console.log(this.props)
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>SecondTab</Text>
</View>
)
};
}
class ThirdTab extends React.Component {
render(){
console.log(this.props)
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>ThirdTab</Text>
</View>
)
};
}
class DrawerScreen extends React.Component {
render(){
const {tabs} = this.props;
return(
<View style={styles.navigationContainer}>
{tabs.map((route, index) => {
const navigationLabel = route.title;
return (
<TouchableHighlight
key={route.screen}
onPress={() => {
this.props.navigator.switchToTab({
tabIndex: index
});
}}
underlayColor='blue'
>
<View style={styles.navigationItem}>
<Text style={styles.navigationLabel}>
{navigationLabel}
</Text>
</View>
</TouchableHighlight>
);
})}
</View>
)
};
}
function registerScreens(){
Navigation.registerComponent(`${packageName}.FirstTab`, () => FirstTab );
Navigation.registerComponent(`${packageName}.SecondTab`, () => SecondTab );
Navigation.registerComponent(`${packageName}.ThirdTab`, () => ThirdTab );
Navigation.registerComponent(`${packageName}.DrawerScreen`, () => DrawerScreen );
}
function startApp() {
registerScreens();
const tabs = [
{
screen: `${packageName}.FirstTab`,
title: 'FirstTab',
icon: require('./image.png'),
navigatorStyle: {
tabBarHidden: true,
},
},
{
screen: `${packageName}.SecondTab`,
title: 'SecondTab',
icon: require('./image.png'),
navigatorStyle: {
tabBarHidden: true,
},
},
{
screen: `${packageName}.ThirdTab`,
title: 'ThirdTab',
icon: require('./image.png'),
navigatorStyle: {
tabBarHidden: true,
},
},
];
Navigation.startTabBasedApp(
{
tabs: tabs,
drawer: {
left: {
screen: `${packageName}.DrawerScreen`,
passProps: {
tabs: tabs
},
fixedWidth: 800,
}
},
tabsStyle:{
tabBarHidden: true,
}
},
);
}
startApp();
Stylesheet:
const styles = StyleSheet.create({
navigationContainer:{
flex: 1,
width: '100%',
backgroundColor: 'white',
},
navigationItem: {
flex: 1,
}
});
Here is an imgur link showing the behavior in question.