React-native-router-flux custom navbar renders at the bottom of the view

Question

As stated if I use a custom navBar in react-native-router-flux, and style it with NO position stlyle tag, then the navBar renders at the bottom of the screen...

So, I tried setting style with position: 'absolute', top: 0, right:0, left: 0 and my navBar disappears :( Any suggestions?

Router.js

<Scene 
  key="api" 
  hideNavBar={false} 
  navBar={HeaderWithIcon} 
  component={APITest} 
/>

HeaderWithIcon.js

import React, {Component} from 'react';
import { View, Image, Text } from 'react-native';
import { menuStyles } from './styles';

class HeaderWithIcon extends Component {

  constructor(props) {
    super(props);
  }

    render() {
      const icon =
        require('../../assets/images/myImg.png');

    return (
      <View>
        <View style={[menuStyles.view, this.props.style]}>
          <Image source={icon} style={[menuStyles.icon, this.props.iconStyle]} />
        </View>
      </View>
    );
  }
};

export default HeaderWithIcon;

styles.js

import { HEADER } from '../../global/margins';
import { PRIMARY_COLOUR, SHADOW_COLOUR } from '../../global/colours';

export const menuStyles = {
  view: {
    flexDirection: 'row',
    //height: HEADER.height,
    width: null,
    backgroundColor: PRIMARY_COLOUR,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  //  paddingTop: HEADER.padding,
    shadowColor: SHADOW_COLOUR,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0
  },
  icon: {
    width: HEADER.icon,
    height: HEADER.icon,
    alignSelf: 'center'
  }
};

SimoT SimoT · Accepted Answer · 2017-04-19T02:23:36

<View style={styles.navbarStyle}>

            <View style={styles.navContainer}>

                <TouchableOpacity onPress={()=>Actions.get('drawer').ref.toggle()}>
                    <Image source={require('../../img/menu.png')} resizeMode="contain" color="white" style={styles.menu} />
                </TouchableOpacity>    
                <View style={styles.navbarTitle}>
                    <Text style={styles.title}>NavBar</Text>
                </View>
                <TouchableWithoutFeedback onPress={this.loginUser}>
                    <View style={styles.signIn}>
                        <Text style={styles.title}>Login</Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
</View>

And in order to style it and put it at the top ,remember to give it a position of 'absolute ' and 'top' of 0 :

navbarStyle:{
    flex:1,
    flexDirection:'row',
    alignItems: 'center',
    height ,
    position: 'absolute', //necessary because if no react-native-router-flux will put navbar at bottom ,bug maybe!
    top:0,
    width,
    backgroundColor: '#009688',
    elevation:10

}

PS: for width and height ,better solution is to use Navigator and dimensions :

const {width} = Dimensions.get('window');
const height = Navigator.NavigationBar.Styles.General.NavBarHeight;

React-native-router-flux custom navbar renders at the bottom of the view

2 Answers