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
Under the hood, FlatList uses the ScrollView component to render scrollable elements. However, unlike generic ScrollView, FlatList displays data lazily to save memory and processing time. Let's begin with the first method of rendering list data in a React Native app using the map function.
React Native ListView is a view component which contains the list of items and displays in a vertical scrollable list. The minimum API to create list view is ListView. DataSource. It populates a simple array of data blobs, and instantiate a ListView component with data source and a renderRow callback.
As opposed to the ScrollView, the FlatList renders only those elements that are currently being displayed on the screen (default: 10 items). Thus, it does not have any impact on the performance of the application. So, it is preferable to use the FlatList Component to display a large list of data.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With