Native Base two headers


Native Base two headers



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




2 Answers
2



I think you are using StackNavigator.


StackNavigator



if yes then change to:


const Navigator = StackNavigator(
{
Landing: { screen: Landing},
Home: { screen: Home}
},
{
headerMode: 'none'
}
);



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


react-navigation


static navigationOptions = {
header: null
};






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

Opening a url is failing in Swift

Possible Unhandled Promise Rejection (id: 0): ReferenceError: user is not defined ReferenceError: user is not defined