Last item in React Native ListView doesn't appear in full

Question

My problem so far, is following: I'm getting Tweets from Twitter Streaming API, so new data is appended to the bottom of the ListView, however the last item is not displayed in full, ie the last line of text (Text element), and there is no way I can scroll down to see that line.

My code for rendering ListView is:

renderRealtimeSearch() {
    return (
      <View
        tabLabel='Realtime Search'
        style={{padding: 10}}
        >
        <TextInput
          style={{height: 40}}
          placeholder="Type search query..."
          onChangeText={(txt) => this.setState({query: txt})}
        />
        <Button
          onPress={() => this.handleStreamClick()}
          style={styles.buttonStyle}
          title='Submit query'
        />
      {this.state.isStreamOn && <View style={{height: 515}}>
                                  <ListView
                                      ref='list'
                                      onLayout={(event) => {
                                          var layout = event.nativeEvent.layout;
                                          this.setState({
                                              listHeight : layout.height
                                          });
                                      }}
                                      style={styles.realTweetsListView}
                                      dataSource={this.state.realtimeTweets}
                                      renderRow={(rowData) => {
                                                                console.log(rowData.text);
                                                                return (
                                                                  <View>
                                                                    <View style={styles.container}>
                                                                      <Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
                                                                      <Text style={styles.title}>{rowData.author_name}</Text>
                                                                    </View>
                                                                    <View>
                                                                      <Text style={styles.text}>{rowData.text}</Text>
                                                                      <Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
                                                                      <Text style={styles.link}>{rowData.tweet_url}</Text>
                                                                    </View>
                                                                  </View>
                                                                );
                                      }
                                                }
                                      renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
                                      renderFooter={() => {
                                          return (
                                            <View onLayout={(event)=>{
                                              var layout = event.nativeEvent.layout;
                                              this.setState({
                                                  footerY : layout.y
                                              });
                                              }}>
                                            </View>
                                          );
                                      }}
                                  />
                                </View>
        }
      </View>
    );
  }

And in the main render function (just in case this error caused by ScrollableTabView)

  render() {
    return (
      <ScrollableTabView
        renderTabBar={() => <DefaultTabBar />}
        ref={(tabView) => { this.tabView = tabView; }}
      >
        {this.renderTwitterSearch()}
        {this.renderRealtimeSearch()}
        {this.renderDBSearch()}

      </ScrollableTabView>
    );
  }
}

Answer 1

You can simply add a style property with flex=1 on the root component of the listview.

 <View style={{flex: 1}}>
            <ListView
                style={{paddingBottom: 5, marginBottom: 0}}
                enableEmptySections
                dataSource={this.state.albums}
                renderRow={album => <AlbumDetail key={album.title}
                                                 album={album}/>}
            />
  </View>

Answer 2

In case it may be the help to others, I'd post a solution: in order to make this piece of code work, I wrap ListView and its children into ScrollView element, so code would be as follow:

  renderRealtimeSearch() {
    return (
      <View
        tabLabel='Realtime Search'
        style={{padding: 10}}
        >
        <TextInput
          style={{height: 40}}
          placeholder="Type search query..."
          onChangeText={(txt) => this.setState({query: txt})}
        />
        <Button
          onPress={() => this.handleStreamClick()}
          style={styles.buttonStyle}
          title='Submit query'
        />
      {this.state.isStreamOn && <ScrollView style={{height: 520}}>
                                  <ListView
                                      renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
                                      style={styles.realTweetsListView}
                                      dataSource={this.state.realtimeTweets}
                                      renderRow={(rowData) => {
                                                                return (
                                                                  <ScrollView>
                                                                    <View style={styles.container}>
                                                                      <Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
                                                                      <Text style={styles.title}>{rowData.author_name}</Text>
                                                                    </View>
                                                                    <View>
                                                                      <Text style={styles.text}>{rowData.text}</Text>
                                                                      <Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
                                                                      <Text style={styles.link}>{rowData.tweet_url}</Text>
                                                                    </View>
                                                                  </ScrollView>
                                                                );
                                                }
                                      }
                                      renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
                                  />
                                </ScrollView>
        }
      </View>
    );
  }