Header Title not centered in React Native using native-base

Question

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
    }
});

please post your code with code tag and not in an image thanks — Gabriel Diez, Aug 11 '17 at 10:01
Hi - updated post with my code. Removing the padding doesn't help. — Chris_S, Aug 11 '17 at 10:22

score 16 · Accepted Answer · answered Aug 11 '17 at 16:08

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 :

I hope this answer can help you :)

answered Aug 11 '17 at 16:08

Syauqi Rahmat Sugara

659
5
12

How about that @Chris_S , is it working on your project? – Syauqi Rahmat Sugara Aug 14 '17 at 04:21
Hi! Yes - thanks for the help. Looking much better now :) – Chris_S Aug 15 '17 at 07:41
Cool @Chris_S, I'm very pleased can to help you. – Syauqi Rahmat Sugara Aug 15 '17 at 08: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. – Joseph Astrahan Apr 08 '18 at 19:20

Ivy A. · Answer 2 · 2018-09-11T08:06:38.620

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>

score 2 · Answer 3 · answered May 31 '19 at 11:36

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>

score 1 · Answer 4 · answered Jul 22 '19 at 07:50

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>

score 1 · Answer 5 · answered Jul 17 '20 at 13:12

1

<Header>
  <Left style={{flex: 1}} />
  <Body style={{flex: 1}}>
    <Title style={{alignSelf: 'center'}}>Header</Title>
  </Body>
  <Right style={{flex: 1}} />
</Header>

answered Jul 17 '20 at 13:12

Ankit Adlakha

1,436
12
15

score 0 · Answer 6 · answered Jul 12 '18 at 10:05

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 }} />

    )
}

}

Welcome to SO. Please format your answers properly. And please provide some explanation rather than code only. Thanks! — petezurich, Jul 12 '18 at 11:07

score 0 · Answer 7 · answered May 20 '20 at 15:11

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

answered May 20 '20 at 15:11

pewdie2pie

16

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. – Jeremy Caney May 20 '20 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 '20 at 13:35

Header Title not centered in React Native using native-base

7 Answers7