React native text not wrapping on Native Base Title

Question

I can't seem to get my title text to wrap:

let SearchPage = (props) => {
  const menu = (
    <Container>
      <Header style={styles.header}>
        <Left>
          <Button transparent onPress={props.togglePageMenu}>
            <Icon name='menu' />
          </Button>
        </Left>
        <Body>
          <Title style={styles.title} numberOfLines={2}>Search Products</Title>
        </Body>
        <Right>
        </Right>
      </Header>...

styles...:

      title: {
        flexWrap:'wrap',
        flex: 1,
        color: '#9E9E9E',
        fontWeight: '200',
        fontSize: 19
      },
  header: {
    backgroundColor: '#F7F7F7'
  },

What am I doing wrong?

use alignItems: 'flex-start' instead of flexWrap:'wrap'

Codesingh
– Codesingh

2017-05-13 21:15:03 +00:00
Commented May 13, 2017 at 21:15 — Codesingh
– Codesingh, Commented May 13, 2017 at 21:15

BeniaminoBaggins · Accepted Answer · 2017-05-13 21:23:45Z

1

I had to stop using <Title> from Native Base and instead use <Text> from Native Base. I guess Title has some behind the scenes styles that prevent it from wrapping.

answered May 13, 2017 at 21:23

BeniaminoBaggins

12.6k46 gold badges176 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Codesingh Over a year ago

did you try wrap with alignitems?

Collectives™ on Stack Overflow

React native text not wrapping on Native Base Title

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related