React Native: ListView not displaying all rows

Question

I'm trying to display a list of rows in a React Native ListView, but it only shows the entries that fit in a single screen, ie, I can't scroll down to see more rows.

Here are the styles:

styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60
  },
  rowContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around'
  }
})

ListView:

return (
      <View style={styles.container}>
        {this.getHeader()}
        <ListView
          dataSource = {this.state.dataSource}
          renderRow = {this.renderRow.bind(this)}/>
      </View>
    )

Row:

return (
      <View style={styles.rowContainer}>
        <Text>{text}</Text>
      </View>
    )

What am I doing wrong?

Answer 1

I had the same issue and found that Listview with wrapper View outside will make ListView not scrollable. The workaround will be removing wrapper View:

return (
    <ListView
      dataSource = {this.state.dataSource}
      renderRow = {this.renderRow.bind(this)}/>
)

Answer 2

I'll post this here in spite of the OP already having found a solution b/c my ListView wouldn't scroll either and it wasn't b/c I was trying to scroll rather than using the mouse to simulate swiping. I am currently using React-Native v0.1.7.

It turned out that the reason my ListView wouldn't scroll & wouldn't reveal the other rows which weren't being initially rendered on screen was that it didn't have a fixed height. Giving it a fixed height solved this issue. Figuring out how to determine what value to use for the height wasn't a simple matter though.

In addition to the ListView on the page there was also a header at the top of the page which had a fixed height. I wanted that ListView to take up the remaining height. Here, either my ability to use the React-Native limited implementation of FlexBox failed me or the implementation did. However, I was unable to get the ListView to fill up the remainder of the space and be able to scroll properly.

What I did was to require the Dimensions package const Dimensions = require('Dimensions'); and then set a variable for the device window's dimensions const windowDims = Dimensions.get('window'); Once I had that done I was able to determine the height of the remaining space and apply that inline to the style of the ListView: <ListView style={{height: windowDims.height - 125}} ... /> where 125 was the height of the header.

Answer 3

What worked for me was to follow this response: https://stackoverflow.com/a/31500751/1164011

Basically, I had

<View>
  <ListView/>
</View>

And what was happening was that the <View> component was getting a height of 0. So I needed to update it to:

<View style={{ flex: 1 }}>
  <ListView/>
</View>

That way <View> gets its height based on the content.