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

在滚动视图中包装listview和其他内容..这解决了我的滚动问题。

Answer 4

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.

Answer 5

ListView contains an inner ScrollView so it should work as is. On the simulator your scroll by clicking and dragging the mouse.

Why don't you show the full code, maybe some screenshots?