Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Header title never align to center #812

Closed
stefensuhat opened this issue May 4, 2017 · 4 comments
Closed

Header title never align to center #812

stefensuhat opened this issue May 4, 2017 · 4 comments

Comments

@stefensuhat
Copy link

stefensuhat commented May 4, 2017 •
edited

"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
@shivrajkumar
Copy link
Collaborator

@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>

@adinaninacerdine
Copy link

I try this ,it works for me
thanks

@tonilxm
Copy link

tonilxm commented Mar 13, 2018

@wikieswan : thanks bro, works like a charm

@trevor-coleman
Copy link

trevor-coleman commented Mar 28, 2018 •
edited

NativeBase follows Android and iOS guidelines. Thus the title is on the left of the header.

Apple HIG shows a centered title in the nav bar.

screen shot 2018-03-28 at 4 34 42 pm

from Apple Human Interface Guidelines

@GeekyAnts GeekyAnts deleted a comment from wikieswan Mar 29, 2018
@GeekyAnts GeekyAnts locked as off-topic and limited conversation to collaborators Mar 29, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tonilxm @adinaninacerdine @stefensuhat @shivrajkumar @trevor-coleman