ReactNative - Why does my custom NavigationBar component render at the bottom of the screen?

Question

I want to display a navigation bar on top of the screen using React's Navigator and this custom NavigationBar component.

I am using the following code, but for some reason the navigation bar renders at the bottom of the screen:

import NavigationBar from 'react-native-navbar'

class MyDebts extends Component {

  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 'persons'
    }
  }

  _renderScene(route, navigator) {
    console.log('render scene with route: ', route)
    return <route.component route={route} navigator={navigator} />
  }

  render() {

    return (
      <Provider store={store}>
        <TabBarIOS selectedTab={this.state.selectedTab}>
          <TabBarIOS.Item
              selected={this.state.selectedTab === 'persons'}
              title='Persons'
              onPress={() => {
                  this.setState({
                      selectedTab: 'persons',
                  })
              }}>
              <Navigator
                initialRoute={{ name: 'Persons', component: PersonsRootComponent }}
                renderScene={this._renderScene}
                navigationBar={<NavigationBar style={styles.nav} title={{title: 'Persons'}}/>}
              />
          </TabBarIOS.Item>
        </TabBarIOS>
      </Provider>
    )
  }
}

const styles = StyleSheet.create({
  nav: {
    height: 160,
    backgroundColor: 'red'
  }
})

The PersonsRootComponent renders properly, but I have no idea why the NavigationBar is placed on the bottom of the screen...

Answer 1

If you want to put the navbar somewhere else other than the bottom, you need absolute positioning on the navbar.

container: { width: width, flexDirection: 'row', position:'absolute', top:0, left:0 },