react-native Navigator (navbar) Hiding View Under Navbar - react-native

Question

I'm having a hard time figuring out which props I need to change in the initial view below the Navbar. Or is there a prop for the navbar I need to change? Basically, the navbar is hiding the top portion of the underlying view. I'm attaching a screen cap here:
Here is my code.
Navigator code:
var routeMapper = {
LeftButton: function(route, navigator, index, navState) {
if(index > 0) {
return (
<TouchableHighlight
underlayColor="transparent"
onPress={() => { if (index > 0) { navigator.pop() } }}>
<Text style={ styles.leftNavButtonText }>Back</Text>
</TouchableHighlight>)
}
else { return null }
},
RightButton: function(route, navigator, index, navState) {
return null;
},
Title: function(route, navigator, index, navState) {
return <Text style={ styles.navbarTitle }>EST4Life</Text>
}
};
module.exports = React.createClass({
renderScene: function(route, navigator) {
var Component = ROUTES[route.name]; // ROUTES['signin'] => Signin
// return the component with props to the current route and the navigator instance
return <Component route={route} navigator={navigator} />;
},
render: function() {
// return an instance of Navigator
return (
<Navigator
style={styles.container}
initialRoute={{name: 'signin'}}
renderScene={this.renderScene}
configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }}
navigationBar={<Navigator.NavigationBar
routeMapper={routeMapper}
style={styles.navBarStyle}
/>}
/>
)
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
navBarStyle: {
backgroundColor: 'gray',
flex: 1,
borderWidth: 1
},
navbarTitle: {
color: 'white',
},
rightNavButtonText: {
color: 'white',
},
leftNavButtonText: {
color: 'white',
},
})
signin.js
module.exports = React.createClass({
render: function() {
if (this.state.user == '') { // this.state.user = '' when signin is initiated
return <View style={styles.container}><Text>Loading...</Text></View>
} else if (this.state.user == null){ // this.state.user == null when user is not logged in
return (
<View style={styles.container}>
<Text>Sign In</Text>
<Text style={styles.label}>Username:</Text>
<TextInput
style={styles.input}
value={this.state.username}
onChangeText={(text) => this.setState({username: text})}
/>
<Text style={styles.label}>Password:</Text>
<TextInput
secureTextEntry={true}
style={styles.input}
value={this.state.password}
onChangeText={(text) => this.setState({password: text})}
/>
<Text style={styles.label}>{this.state.errorMessage}</Text>
<Button text={'Sign In'} onPress={this.onLoginPress} />
<Button text={'I need an account..'} onPress={this.onSignupPress} />
</View>
); // onPress={this.onPress} - pass in the onPress method below to TouchableHighlight
} else { // clear view when user is logged in
return <View><Text></Text></View>
}
}, // end of render
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 4,
borderColor: 'green'
},
input: {
padding: 5, // space between text and inside of box
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 5,
margin: 5,
width: 200,
alignSelf: 'center',
},
label: {
fontSize: 18
}
});
Thanks.
Update: I figured out how to extract the heights involved with the navbar.
Code for use where the component is created:
var NavBarHeight = navigator.props.navigationBar.props.navigationStyles.General.NavBarHeight
var StatusBarHeight = navigator.props.navigationBar.props.navigationStyles.General.StatusBarHeight
var TotalNavHeight = navigator.props.navigationBar.props.navigationStyles.General.TotalNavHeight
Code to use in any scene thereafter:
var NavBarHeight = this.props.navigator.props.navigationBar.props.navigationStyles.General.NavBarHeight
var StatusBarHeight = this.props.navigator.props.navigationBar.props.navigationStyles.General.StatusBarHeight
var TotalNavHeight = this.props.navigator.props.navigationBar.props.navigationStyles.General.TotalNavHeight

Answer 1

Give your signin.js container some marginTop. That will get it done.

Answer 2

Can you try using sceneStyle for navigator? This applies to every scene being rendered using this navigator. So you can try something like { marginTop: 55 } and adjust from there based on the height of your navigation bar.
https://facebook.github.io/react-native/docs/navigator.html#scenestyle