6

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?

5 Answers 5

4

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)}/>
)
1
  • I wasn't dragging the mouse, so there was no problem with the code - listview works with the wrapper view as well for me.
    – tldr
    Apr 9, 2015 at 17:24
4

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.

3
  • This method worked for me - I have my ListView within a View.
    – Adamski
    Jan 31, 2016 at 22:32
  • I don't know if it would solve this problem or whether people will come looking at this thread in the future, but this may have also been solved with v0.22 of React-Native: github.com/facebook/react-native/commit/…
    – flyingace
    Mar 23, 2016 at 18:09
  • This is still an issue in 0.26.1 of React-Native. I had to specify a height to get my ListView to scroll.
    – duncanc4
    May 25, 2016 at 15:18
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.

2

Wrap listview and other contents in scroll view.. That solved my scroll issue.

2
  • But this hardly seems like it should be an acceptable solution, does it? If ListView is meant to have the properties of a ScrollView then why should this parent element have to be added? Not to say the poster is wrong to do so, but rather why is this needed by RN?
    – flyingace
    Jan 16, 2016 at 22:49
  • Although the the ListView have the properties of ScrollView if the thing that contains it doesn't then it won't scroll. So this answer is the correct one if you find your ListView isn't scrolling. Apr 5, 2016 at 8:42
1

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?

2
  • 3
    oh man, I feel like an idiot. I wasn't dragging the mouse, just scrolling down. Ty!
    – tldr
    Apr 9, 2015 at 17:25
  • @tldr wow, me too--this is the first I read one needs to mouse down then drag, so thank you!
    – duhaime
    Mar 11, 2017 at 13:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.