Question: I have created the header with title and right icon by using native base. However, there are two headers showing on my simulator. I have no idea what is going on. Can someone help me with this? 

```
import React, { Component }from 'react';
import { StyleSheet } from 'react-native';
import { Icon, Button, Container, Header, Content, Left, Right, Body,Text, Title } from 'native-base';

class Landing extends Component {
 render() {
    return (
        <Container>
            <Header>
                <Left />
                <Body>
                    <Title>
                        Title
                    </Title>
                </Body>
                <Right>
                    <Button transparent>
                    <Icon name="ios-menu" onPress={() => 
                    this.props.navigation.navigate('DrawerOpen')} />
                    </ Button>
                </Right>
            </Header>
            <Content contentContainerStyle={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
            <Text> 
                Landing Screen
            </Text>
            </ Content>
        </ Container>
    );
}
}

export default Landing;

```

This is my code and I am seeing something like the picture:[enter image description here](https://i.stack.imgur.com/gWcyu.png)

Answer: 
If you are `react-navigation` then you have to set navigation Options as follows:

```
  static navigationOptions = {
    header: null
  };

```
In [react-router-flux](https://github.com/aksonov/react-native-router-flux) is the same idea of the accepted answer at routes/navigators:

```js
<Scene
      key='dashboardContainer'
      component={(localProps) => <DashboardContainer {...props} {...localProps} />}
      hideNavBar
/>

```