react-nativereact-native-listview

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


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. error

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>
    );
  }
}

Solution

  • 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>
        );
      }