Przemek Piechota Przemek Piechota - 4 years ago 213
React JSX Question

React native NavigationBar position

I play a little with Navigator in React Native. Unfortunately a Navigationbar appears on the bottom of the screen. Could you tell me please how to put Navigationbar to the top of the screen? Below is my code:

var React = require('react-native');
var {
View,
Text,
StyleSheet,
Navigator
} = React;

var Signin = require('./components/authentication/signin');
var Signup = require('./components/authentication/signup');
var Groceries = require('./components/groceries/groceries.js');
var AddMeal = require('./components/groceries/addMeal.js');

var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
var CustomSceneConfig = Object.assign({}, BaseConfig, {
springTension: 200,
springFriction: 1,
});
var ROUTES = {
signin: Signin,
signup: Signup,
groceries: Groceries,
addmeal: AddMeal,
};

module.exports = React.createClass({
renderScene: function (route, navigator) {
var Component = ROUTES[route.name];
return <Component route={route} navigator={navigator} />;
},

_configureScene: function (route) {
return CustomSceneConfig;
},

render: function () {
return (
<Navigator
style={styles.container}
initialRoute={{name: 'groceries'}}
renderScene={this.renderScene}
configureScene={this._configureScene}
navigationBar={
<View style={styles.navbar}>
<Text style={styles.backButton}>Back</Text>
</View>}
/>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
},
navbar: {
alignItems: 'center',
backgroundColor: '#fff',
borderBottomColor: '#eee',
borderColor: 'transparent',
borderWidth: 1,
justifyContent: 'center',
height: 44,
flexDirection: 'row'
},
});


Regards,
Przemek

Answer Source

Quite simply Navigator doesn’t inject the absolute positioning it uses itself into your custom component, so it’s simply laid out by flexbox.

Navigator.NavigationBar’s default styling is the following (with a background transparency rule):

position: 'absolute',
top: 0,
left: 0,
right: 0,

Simply alter your navber styles to include the above:

navbar: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    alignItems: 'center',
    backgroundColor: '#fff',
    borderBottomColor: '#eee',
    borderColor: 'transparent',
    borderWidth: 1,
    justifyContent: 'center',
    height: 44,
    flexDirection: 'row'
}, [...]
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download