CODEWITHSUNDEEP
ioslistviewscrollviewreact-native
Dev01
Dev01

Reputation: 14149

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

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

Upvotes: 6

Views: 7838

Answers (1)

jevakallio
jevakallio

Reputation: 35890

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.

Upvotes: 22

Related Questions