CODEWITHSUNDEEP
react-nativestyles
devedv
devedv

Reputation: 622

React native toolbar styling

I’m using react native base. I want to centre align the title in iOS and android both, since text is long it hides it with “…”.

I've tried different option unable to fix it. How can I fix it?

Code:

 <Header  iosStatusbar="light-content" androidStatusBarColor='#000' >
<Left>
<Button transparent onPress={() =>  this.navigateCustom("goBack")}>
 <Icon name="arrow-back" />
 </Button>
</Left>

    <Body>
     <Title>CLAP TO SUPPORT US</Title>
   </Body>

  <Right>
  <Button transparent onPress={()=> this.navigateCustom("DrawerOpen") }>
     <IconEvil  name={"menu"}  style={{ color: "rgb(255,255,255)", fontSize:30}}/>
     </Button>
  </Right>
      </Header>

enter image description here

EDIT:

When I apply flex:1 to left right and body it changes nothing but applying flex:4 to body shows the title but it’s not centred

 <Header  iosStatusbar="light-content" androidStatusBarColor='#000' >
<Left style={{flex:1}}>
<Button transparent onPress={() =>  this.navigateCustom("goBack")}>
 <Icon name="arrow-back" />
 </Button>
</Left>

    <Body style={{flex:4}}>
     <Title>CLAP TO SUPPORT US</Title>
   </Body>

  <Right style={{flex:1}}>
  <Button transparent onPress={()=> this.navigateCustom("DrawerOpen") }>
     <IconEvil  name={"menu"}  style={{ color: "rgb(255,255,255)", fontSize:30}}/>
     </Button>
  </Right>
      </Header>

Result: enter image description here

Applying center alignment:

enter image description here

Upvotes: 0

Views: 3395

Answers (2)

Seyha
Seyha

Reputation: 323

This is what i have tested on my device ios simulator, and Samsung Galaxy S7Edge and emulator.

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left  style={{ flex: 1 }}>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body  style={{ flex: 4,  justifyContent: 'center', alignItems: 'center'  }}>
            <Title>Title Center</Title>
          </Body>
          <Right  style={{ flex: 1 }}>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

This is what i have tested and result.

I recommend you to check your React-Native package version and compare.

Here my last version:

"native-base": "^2.3.6",
"react": "16.2.0",
"react-native": "0.52.0",

enter image description here

EDIT: CODE:

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left  style={{ flex: 1 }}>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body  style={{ flex: 4,  justifyContent: 'center', alignItems: 'center'  }}>
            <Title>Title Center</Title>
          </Body>
          <Right  style={{ flex: 1 }}>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

NEXUS S RESULT

enter image description here

Upvotes: 4

Seyha
Seyha

Reputation: 323

React Native (NativeBase) follows Android and iOS guidelines,

The title is on the Left of the header for Android and Center for iOS.

If you want it to be in the center, Please apply:

flex: 1 to <Left>, <Body> and <Right>

Example:

<Left style={{ flex: 1 }}>
</Left>

<Body style={{ flex: 1,  justifyContent: 'center', alignItems: 'center' }}>
    <Title>Home</Title>
</Body>

<Right style={{ flex: 1 }}>
</Right>

Upvotes: 1

Related Questions