11

I'm using native-base to create a React Native app:

I'm using the Header Component to display Body, Left and Right elements. According to the docs, the title should automatically center but it does not (as seen below).

Am I missing something simple here? Any help would be appreciated!

import { 
    Container,
    Header,
    Content,
    Left,
    Right,
    Body,
    Title,
    Icon
} from "native-base"

export default class Seminars extends React.Component{

    render(){
        return(
            <Container style={styles.container}>
                <Header style={styles.header}>
                    <Left>
                        <Icon name='arrow-back' />
                    </Left>
                    <Body>
                        <Title>Seminars</Title>
                    </Body>
                    <Right>
                        <Icon name='menu' />
                    </Right>
                </Header>
                <Content contentContainerStyle={styles.content} >
                    <Text>Content Here</Text>
                </Content>
            </Container>
        )
    }
}
const styles = StyleSheet.create({
    container: {

    },
    header: {
        paddingRight: 15,
        paddingLeft: 15
    },
    content: {
        display: "flex",
        flex: 1,
        justifyContent: "center",
        padding: 15
    }
});

enter image description here

5
  • 1
    please post your code with code tag and not in an image thanks Aug 11, 2017 at 10:01
  • And try to remove paddingRight and left you put on header Aug 11, 2017 at 10:03
  • Hi - updated post with my code. Removing the padding doesn't help.
    – Chris_S
    Aug 11, 2017 at 10:22
  • 2
    can you try this : <Title style={{ alignSelf: 'center'}}>
    – Jigar Shah
    Aug 11, 2017 at 11:03
  • That did not work either :(
    – Chris_S
    Aug 11, 2017 at 11:19

7 Answers 7

16

If you want the title to be in the center, you can add flex:1 in Left, Body and Right like this :

    return(
        <Container style={styles.container}>
            <Header style={styles.header}>
                <Left style={{flex:1}}>
                    <Icon name='arrow-back' />
                </Left>
                <Body style={{flex:1}}>
                    <Title>Seminars</Title>
                </Body>
                <Right style={{flex:1}}>
                    <Icon name='menu' />
                </Right>
            </Header>
            <Content contentContainerStyle={styles.content} >
                <Text>Content Here</Text>
            </Content>
        </Container>
    )

And this is the result :

enter image description here

I hope this answer can help you :)

4
  • How about that @Chris_S , is it working on your project? Aug 14, 2017 at 4:21
  • Hi! Yes - thanks for the help. Looking much better now :)
    – Chris_S
    Aug 15, 2017 at 7:41
  • Cool @Chris_S, I'm very pleased can to help you. Aug 15, 2017 at 8:20
  • 3
    I added this to the body tag, style={{flex:1,alignItems:'center'}}, this did the trick. This truly centers it, in your picture you'll notice its slightly off. Apr 8, 2018 at 19:20
6

This answer can help you, worked for me.

        <Header style={{backgroundColor:'#ff2929'}}>
        <Left style={{flex: 1}}>
            <Button transparent style={{width: 65}}>
                <Icon style={{color:"#fff"}} type="MaterialIcons" name={this.props.imageLeft}/>
            </Button>
        </Left>
        <Body style={{flex: 3,justifyContent: 'center'}}>
        <Title style={{color: '#fff',alignSelf:'center'}}>{this.props.headerTitle}</Title>
        </Body>
        <Right style={{flex: 1}}>
            <Button transparent style={{width: 65}}>                    
                <Icon style={{color:this.props.color}} type="MaterialIcons" name={this.props.imageRight}/>
            </Button>
        </Right>
        </Header>
2

You can also try this one:

      <Header>
          <Left style={{ flex: 1 }}>
            <Icon name="arrow-back" />
          </Left>
          <Body style={{ flex: 1 }}>
            <Title style={{ alignSelf: "center" }}>Seminars</Title>
          </Body>
          <Right style={{ flex: 1 }}>
            <Icon name="menu" />
          </Right>
        </Header>
1

I find the best way to do this and its Work for me.

<Header transparent>
    <Left style={{ flex: 1 }}>
        <Icon name='arrow-back' />
    </Left>
    <Body style={{ flex: 1 }}>
        <Title style={{ justifyContent: 'center', color: '#9fabdd' }}>Home</Title>
    </Body>
    <Right style={{ flex: 1 }}>
        <Icon name='arrow-back' />
    </Right>
</Header>
1
<Header>
  <Left style={{flex: 1}} />
  <Body style={{flex: 1}}>
    <Title style={{alignSelf: 'center'}}>Header</Title>
  </Body>
  <Right style={{flex: 1}} />
</Header>
0
static navigationOptions = ({ navigation }) => {
    return {

        headerTitle: (

  <Image  style={{width: 50, height: 10}} alignItems='center' source={require('../assets/zazzy.png')} />
  </View>
 ),
        headerLeft: (
            <View style={{ padding: 10 }}>
                <Ionicons name="ios-apps" color='gold' size={24} onPress={() => navigation.navigate('DrawerOpen')} />
            </View>
        ),
         headerRight: (
            <View style={{ padding: 10 }}>
                <Ionicons name="md-search" color='silver'  size={24} onPress={() => navigation.navigate('DrawerOpen')} />
            </View>
        )

    }
}
render() {
    return (
        <HomeScreenTabNavigator screenProps={{ navigation: this.props.navigation }} />

    )
}

}

1
  • 1
    Welcome to SO. Please format your answers properly. And please provide some explanation rather than code only. Thanks!
    – petezurich
    Jul 12, 2018 at 11:07
0
      <Container style={styles.container}>
            <Header style={styles.header}>
                <Left style={{flex:1}}>
                    <Icon name='arrow-back' />
                </Left>
                <Body style={{flex:1}>
                    <Title style={{width:'100%'}}>Seminars</Title>
                </Body>
                <Right style={{flex:1}}>
                    <Icon name='menu' />
                </Right>
            </Header>
            <Content contentContainerStyle={styles.content} >
                <Text>Content Here</Text>
            </Content>
        </Container>

I found this as a solution when the left and right items are of unequal sizes, works for both android and iOS

2
  • 2
    Outside of the title styling, this appears to be identical to the accepted answer from three years ago. Am I missing something? Does setting the width on the title provide a key difference in addressing the question? If so, I’d recommend editing your answer to make that really clear to readers. May 20, 2020 at 17:41
  • this styling needs to be done if we want it get centered, the width: 100% is the key takeaway
    – pewdie2pie
    Jun 20, 2020 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.