Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

There is not plenty of space to use in Header - title

See original GitHub issue

Hey guys, I have reviewed some issues related with this problem, but in all cases people are using a short text. I’m no able to change the width of the Title within the Body component. There is plenty of space to use, but the Body component is using a very small portion of the available width.

Also in IOS: if I dont use a right button, the text gets lost:

react-native, react and native-base version

"react-native": "0.55.1",
"native-base": "^2.4.5",

Expected behaviour

To be able to use more width within the Body component, and align the text when there is not right button in IOS

Actual behaviour

Not using plenty of space available for the title and the alignment when there is not right button gets lost

Steps to reproduce (code snippet or screenshot)

const buildHomeBtn = navigation => {
  return (
    <Left>
      <Button transparent onPress={() => navigation.navigate('PatientHome')}>
        <Icon name='ios-home-outline' style={{ color: PRIMARY_DARK }} />
      </Button>
    </Left>

  )
}

const buildLeftArrowIcon = leftIconHandler => {
  console.log('leftIconHandler', leftIconHandler)
  return (
    <Left>
      <Button transparent onPress={leftIconHandler}>
        <Icon name='ios-arrow-back' style={{ color: PRIMARY_DARK }} />
      </Button>
    </Left>
  )
}

const buildRightSideIcon = navigation => {
  return (
    <Right>
      <Button transparent onPress={() => navigation.navigate('DrawerOpen')}>
        <Icon name='menu' style={{ color: PRIMARY_DARK }} />
      </Button>
    </Right>

  )
}

 <Header style={typo.bgWhite}
   androidStatusBarColor={getStatusBarColor(statusBarColor)}
   iosBarStyle='light-content'>
   {leftIconType === 'home' ? buildHomeBtn(navigation) : buildLeftArrowIcon(leftIconClickHandler)}
   <Body>
    <Title style={{ color:'blue', fontSize: 16 }}> RESUMEN DEL SERVICIO </Title>
   </Body>
    {showRightIcon ? buildRightSideIcon(navigation) : null}
</Header>

Is the bug present in both ios and android or in any one of them?

both

Issue Analytics

State:
Created 5 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

4reactions

kentrhcommented, Aug 11, 2019

I solved the truncated titles by putting style={{ flex: 2 }} on the <Body> tag

1reaction

rosemarystanleycommented, Apr 8, 2019

Did anyone find a solution for this? I’m having the same issue. I’m using all three components Left / Body / Right and all of them seem to be cutting off like there’s not enough room when really there is plenty of space.

       <Header>
          <Left>
            <Button transparent onPress={() => this.props.navigation.navigate('Accounts')}>
              <Icon active name='ios-arrow-back' type='Ionicons' />
              <Text>Back</Text>
            </Button>
          </Left>

          <Body>
            <Title>EDIT ACCOUNTS</Title>
          </Body>

          <Right>
            <Button transparent onPress={() => this.setState({ reorder: !this.state.reorder })}>
              {(this.state.reorder ? <Icon active name='close' type='AntDesign' /> : <Icon name='ios-menu' type='Ionicons' />)}
            </Button>
          </Right>
        </Header>

Screen Shot 2019-04-08 at 11 51 59 AM