Zeng Yong Zeng Yong - 10 months ago 131
React JSX Question

React native. listview can't scroll when it is inside a scrollview. (iOS work, but android not)

[React Native android] Any body know how to make listview scroll when it is embedded in a scrollview? It is work for iOS, but not work for android.


Answer Source

This is not the right way to go. Even if you manage to make this work, it's a bad practice. Remember that the main difference between a ScrollView and a ListView is that the ListView renders only the visible items and recycles them in order to optimize memory usage. By adding the ListView in a ScrollView you're likely to "sabotage" this feature.

Instead of trying to add the ListView in the ScrollView, use only a ListView with items of different type. Something along the lines:

export default class MyListComponent extends Component {
    constructor(props) {

        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = {
            dataSource: ds.cloneWithRows(this.props.data)

    render() {
        return (
                renderRow={(rowData) => this._getViewForType(rowData)}/>

    _getViewForType(rowData) {
        switch (rowData.renderType) {
            case 'type1':
                return <Text>test1</Text>
            case 'type2':
                return <Text>test2</Text>
                // Render your normal/default listview item here.
                return ...

Now before rendering this view, you just need add two extra items in your list of items: one of type "type1" and another one of type "type2".