Search code examples
react-nativenative-base

Native Base ListItem styles not applying - look broken

I have a fresh install of native base + expo and I'm trying to make a list. Usually, no problem but today something just aint right.

Broken lists

And the code which makes this list.

<Container>
    <Content>
      <List>
        <ListItem avatar>
          <Left>
            <Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
          </Left>
          <Body>
          <Text>Awesome group</Text>
          <Text note>Awesome group</Text>
          </Body>
          <Right>
            <Text>2/13</Text>
          </Right>
        </ListItem>
        <ListItem avatar>
          <Left>
            <Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
          </Left>
          <Body>
          <Text>Awesome group</Text>
          <Text note>Awesome group</Text>
          </Body>
          <Right>
            <Text>1/2</Text>
          </Right>
        </ListItem>
        <ListItem avatar>
          <Left>
            <Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
          </Left>
          <Body>
          <Text>Awesome group</Text>
          <Text note>Awesome group</Text>
          </Body>
          <Right>
            <Text>22/103</Text>
          </Right>
        </ListItem>
      </List>
    </Content>
  </Container>

Really, according to the native base docs, it should actually look like this:

What I expect to see

It seems like it doesn't apply a lot of the styling driven from the props. E.G the note prop on the second line of text doesn't apply and I assume the heights are broken because the avatar prop of the list itself does not apply.

Any suggestions?

Solution

  • Ok so it turns out this is because I had the extends setup like this:

    class App extends React.Component {

    But for NativeBase to pick up things properly, you need to import Component and use it like this

    import React, {Component} from 'react';
class App extends Component {

    And then it all just works :)