CODEWITHSUNDEEP
reactjsreact-native
Przemek Piechota
Przemek Piechota

Reputation: 1703

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

Upvotes: 3

Views: 3959

Answers (3)

Richard Kuo
Richard Kuo

Reputation: 838

on your <Navigator> component, add sceneStyle={{paddingTop: 44}} as one of the props

Following your example:

<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>}
  sceneStyle={{paddingTop: 44}}
/>

Upvotes: 2

Przemek Piechota
Przemek Piechota

Reputation: 1703

Thank you Daniel, this works but there is still one small problem. This navbar overlays scene as it has height: 44. Should I set marginTop: 44 for every scene's most outer component? Or maybe there is a way to set it on navigator level for every scene? Maybe in renderScene method like this:

renderScene: function (route, navigator) {
    var Component = ROUTES[route.name];
    return (
      <View style={{marginTop: 44}}>
        <Component route={route} navigator={navigator} />
      </View>
    );
  },

Is there any better way ?

Upvotes: 4

Daniel Koehler
Daniel Koehler

Reputation: 46

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'
}, [...]

Upvotes: 2

Related Questions