I am trying to use react-native-router-flux with react-native-statusbar-alert. This work's without any issues until I get to TabBar.
Consider the following code (Of mine).
return (
<View>
<StatusBarAlert
visible={this.state.alert.visible}
backgroundColor={this.state.alert.backgroundColor}
color={this.state.alert.text}
message={this.state.alert.msg}
/>
<Router>
<Scene key="root">
<Scene key="loginPage"
component={Login}
title="Login"
initial={true}
hideNavBar={true}
style={{top: -20}}
hideStatusBar={this.hideStatusBar.bind(this)}
showStatusBar={this.showStatusBar.bind(this)}
/>
<Scene
key="tabbar"
tabs
tabBarStyle={styles.tabBarStyle}
tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}>
<Scene key="tab1" component={Settings} title="Settings" hideNavBar={false} icon={TabIcon}/>
<Scene key="tab2" component={Settings} title="Tab #2" hideNavBar={true} icon={TabIcon}/>
<Scene key="tab3" component={Settings} title="Tab #3" hideNavBar={true} icon={TabIcon}/>
<Scene key="tab4" component={Settings} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
</Scene>
</Scene>
</Router>
</View>
)
It's renders funny. I have tried removing the style: -20 (required by status bar other app).
To remove the issue I have to take the <View> out completely and have the the <Router> as the top level element. This then displays the TabBar perfectly, however...
When it displays perfect like this I have nowhere to stick my <StatusBarAlert> as that needs to be in a <View>. I could stick it in the top of each of my views, but I specifically trying hard to seperate and repeat my code (but struggling!) Very new to ReactNative, much help appreciated!
Screenshot of wrapped wrapped in <View> and <SatusBar> as first node of View.
This is just wrapped in View, no statusbar.
this is just without view (works well)
