Custom NavBar doesn't move to top position

[mackeee-orange]

MyCode

// Router
<Scene
  key="feed_page"
  hideNavBar={false}
  hideTabBar={true}
  initial={true}
  component={FeedPage}
  navBar={Header}
  icon={FeedIcon}
  sceneStyle={simula_styles.tab_scene}
/>

// Header.js
<View style={my_styles.header_container}>
  <View style={my_styles.header_left}>
    <Icon name="view-list"  size={24} color='white'/>
  </View>
  <View style={my_styles.header_center}>
    ---element---
  </View>
  <View style={my_styles.header_right}>
    <Icon name="search"  onPress={this._toggleSearch} size={24} color='white'/>
  </View>
</View>

// my styles
const my_styles = {
  header_container: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  header_left: {
    width: 50,
    height: 50,
    padding: 13
  },
  header_right: {
    width: 50,
    height: 50,
    padding: 13
  },
  header_center: {
    flex: 4,
    height: 50
  }
}

Expected behaviour

Actual behaviour

I tried:

header_container: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'flex-start'
}

but, NavBar doesn't move to top position.
Why my navbar doesn't move to top position??

[CoteViande]

Did you try to add position: 'absolute', top: 0, left: 0, right: 0 to your header_container?

[wangsha]

suggestion above works (for me).

[mackeee-orange]

@CoteViande yes, I did it. and NavBar moved to top position.
But,
If I choose that method, I have to set NavBar's width with px .
I'd like to make NavBar responsive.

[CoteViande]

And you may also have to set a margin or padding top on your main content too. That's how I do it so I cannot help on the responsiveness of your navbar. Sorry.

[DeveloperAlly]

I tried setting with position: 'absolute' and my navBar disappears :( Any suggestions?

Router.js
<Scene key="api" hideNavBar={false} navBar={HeaderWithIcon} navigationBarStyle={{position: 'absolute', top: 0, left: 0, right:0 }} 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'
  }
};

[DeveloperAlly]

Nevermind... I realise that my HeaderView is wrapped in 2 views and I was not styling the outer one but the inner one. Leaving this here as example code for others if allowed.....

Fix:

In HeaderWithIcon.js

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

[dopey2]

@mackeee-orange you can use width:'100%'