Nativebase: Header title never align to center

Created on 4 May 2017 · 4Comments · Source: GeekyAnts/NativeBase

"native-base": "^2.1.3",
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",

Here is my code

// Topbar.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import {
    Container,
    Header,
    Left,
    Right,
    Button,
    Icon,
    Body,
    Title,
} from 'native-base';
import getTheme from '../../../native-base-theme/components';
import commonColor from '../../../native-base-theme/variables/commonColor';
import { StyleProvider } from 'native-base';

class TopBar extends Component {
    state = {};

    render() {
        return (
            <StyleProvider style={getTheme(commonColor)}>
                <Header>
                    <Left><Button transparent><Icon name="menu" /></Button></Left>
                    <Body><Title>Title</Title></Body>
                    <Right><Button transparent><Icon name="menu" /></Button></Right>
                </Header>
            </StyleProvider>
        );
    }
}

export default TopBar;

//App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import { DrawerNavigator } from 'react-navigation';
import { Container, Content, Footer, FooterTab } from 'native-base';
import { TopBar } from './components';
import getTheme from '../native-base-theme/components';
import platform from '../native-base-theme/variables/platform';
import { StyleProvider } from 'native-base';

class App extends Component {
    state = {};
    componentDidMount() {
        SplashScreen.hide();
    }

    render() {
        return (
            <StyleProvider style={getTheme(platform)}>
                <Container>
                    <TopBar title="Ziggy" />

                    <Content>
                        <Text>
                            Welcome to Ziggy Page!
                        </Text>
                    </Content>

                    <Footer>
                        <FooterTab>
                            <Text>Person</Text>
                        </FooterTab>
                    </Footer>
                </Container>
            </StyleProvider>
        );
    }
}

export default App;

Result

screenshot_20170504-111517

Source

stefensuhat

Most helpful comment

@stefensuhat NativeBase follows Android and iOS guidelines. Thus the title is on the left of the header. If you want it to be in the center, apply flex: 1 to <Left>, <Body> and <Right>

shivrajkumar on 4 May 2017

👍18

All 4 comments

@stefensuhat NativeBase follows Android and iOS guidelines. Thus the title is on the left of the header. If you want it to be in the center, apply flex: 1 to <Left>, <Body> and <Right>

shivrajkumar on 4 May 2017

👍18

I try this ,it works for me
thanks