How can I put a ListView inside a ScrollView using React Native iOS?

6
votes

I'm building an iOS React Native app. I have some test content and then a list of items below it. If I put both the text content and the listview inside a scrollview the listview does't work properly (only shows some of the items) but if I don't put the listview inside the scrollview, the listview scrolls but the text content stays locked to the top of the screen. How do I get the text content to scroll with the listview?

Here's an example of my issue:
https://rnplay.org/apps/GWoFWg

1
ioslistviewscrollviewreact-native

1 Answers

22
votes

You should render the top content using the ListView.renderHeader prop:

class SampleApp extends React.Component {

  _renderHeader() {
    // your header rendering code here
  }

  _renderRow() {
    // your row rendering code here
  }

  render() {
    return (
      <ListView
        renderRow={this._renderRow}
        renderHeader={this._renderHeader}
        />
    );
  }
}

ListView uses ScrollView internally to provide the scrolling behaviour, so wrapping it in another ScrollView is not necessary.