Nativebase: ListItem Height Cannot Adjust with Content

Created on 28 Feb 2017 · 3Comments · Source: GeekyAnts/NativeBase

Hi,
I'm using nativebase to build a screen of list and listItems. But here's the problem:

Expected behaviour

I want the listItem height to auto adjust to the amount of text inside.

Actual behaviour

The list height is fixed, which leads to texts overflowing. Here's the screenshot:
screenshot 2017-02-28 14 27 44

And here's the code I have to produce the list:

  renderModule(module, j) {
    const {navigate} = this.props.navigation
    const course = this.props.currentCourse
    return (
      <View key={ j }>
        <ListItem itemDivider>
          <Text>{ module.module_title }</Text>
        </ListItem>
        { module.sections.map((section, i) => {
          const sectionInfo = {
            url: section.section_url,
            id: section.section_id
          }
          if(!this.props.isDownloading[section.section_id] && !this.props.files[section.section_id]) {
            return (
              <ListItem key={ i }  icon style={{}}>
                <Body>
                  <Text>{ `${section.title}` }</Text>
                  <Text>content</Text>
                </Body>
                <Right>
                  <Button transparent
                    onPress = { () => this.props.downloadAudio([sectionInfo]) }>
                    <Icon name = 'ios-cloud-download-outline' />
                  </Button>
                </Right>
              </ListItem>
             )
          } else if(this.props.isDownloading[section.section_id] && !this.props.files[section.section_id]) {
            return (
              <ListItem key={ i }  icon style={{}}>
                <Body>
                  <Text>{ ` ${section.title}` }</Text>
                  <Text>content</Text>
                </Body>
                <Right>
                  <Button transparent>
                    <Progress.Pie progress={ this.props.downloadProgress[section.section_id] } size={ 20 } />
                  </Button>
                </Right>
              </ListItem>
            )
          } else if(this.props.files[section.section_id] && !this.props.playing[section.section_id]){
            return (
              <ListItem key={ i }  icon style={{}}>
                <Body>
                  <Text>{ ` ${section.title}` }</Text>
                  <Text>content</Text>
                </Body>
                <Right>
                  <Button transparent
                    onPress = { () => this.playSection(section) }>
                    <Icon name = 'md-arrow-dropright-circle' />
                  </Button>
                </Right>
              </ListItem>
            )
          } else if(this.props.files[section.section_id] && this.props.playing[section.section_id]) {
            return (
              <ListItem key={ i }  icon style={{}}>
                <Body>
                  <Text>{ ` ${section.title}` }</Text>
                  <Text>content</Text>
                </Body>
                <Right>
                  <Button transparent
                    onPress = { () => this.props.pauseSession(section) }>
                    <Icon name = 'ios-pause' />
                  </Button>
                </Right>
              </ListItem>
            )
          }
          })
        }
      </View>
    )
  }

The renderModule component is then included in the render function:

  render(){
    const {name, email} = this.props.user
    const course = this.props.currentCourse
    const {navigate} = this.props.navigation
    return(
      <Container>
        <Header>
          <Left>
            <Button transparent
              onPress={ () => this.props.navigation.goBack(null) }>
              <Icon name='arrow-back' />
              <Text>My Courses</Text>
            </Button>
          </Left>
        </Header>
        <Content >
           <Title style = { {padding: 20} }>{ course.name }</Title>
           { course['modules']
           .map((module, i) => {
              return this.renderModule(module, i)
            })
           }
        </Content>
      </Container>
    )
  }
}

The effect I eventually want is for ListItems to be able to expand (to show more texts) and contract when being clicked on, like in the following example: