Slow Rendering of List View

@naqvitalha Hi, I am using realm for my app. realm has zero copy mechanism, so it provides a object which shall point to the data present in the memory. And data at any time can be retrieved using the object (similar to json object array.)

I tried this library with below code, but it takes long time(usually 3/4 seconds) to update te next rows while scrolling.

Can you please suggest, what configuration changes I should make in the code to get smooth and faster list view shall be rendered.

import React, { Component } from "react";
import { View, Text, Dimensions } from "react-native";
import { RecyclerListView, DataProvider, LayoutProvider } from "recyclerlistview";

import * as RmCntact from './src/realm/RmCntcts'
import Cntact from './src/realm/RmCntcts'
let CntactRead = Cntact.objects('Contacts');

var data = [];
console.log(CntactRead[0]);
if(CntactRead && CntactRead.length){
    CntactRead.forEach((v)=>{
        // console.log(v);
        data.push({id:v.id,name:v.name});
    })
//   data = Array.from(CntactRead);
}
else{
  data = [{id:0,name:'Nothing to Show'}];
}

let { width } = Dimensions.get("window");

const ViewTypes = {
    FULL: 0,
    HALF_LEFT: 1,
    HALF_RIGHT: 2
};

let containerCount = 0;

class CellContainer extends React.Component {
    constructor(args) {
        super(args);
        this._containerId = containerCount++;
    }
    render() {
        return <View {...this.props}>{this.props.children}<Text>Cell Id: {this._containerId}</Text></View>;
    }
}

export default class RecycleTestComponent extends React.Component {
    constructor(args) {
        super(args);

        let dataProvider = new DataProvider((r1, r2) => {
            return r1 !== r2;
        });

        this._layoutProvider = new LayoutProvider(
            index => {
                    return ViewTypes.FULL;
            },
            (type, dim) => {
                    dim.width = width;
                    dim.height = 140;
            }
        );

        this._rowRenderer = this._rowRenderer.bind(this);

        this.state = {
            dataProvider: dataProvider.cloneWithRows(CntactRead)
        };
    }

    _rowRenderer(type, data) {
        return (
            <CellContainer style={styles.container}>
                <Text>Data: {data.name}</Text>
            </CellContainer>
        );
    }

    render() {
        return <RecyclerListView 
                layoutProvider={this._layoutProvider}
                dataProvider={this.state.dataProvider} 
                rowRenderer={this._rowRenderer} 
                renderAheadOffset = {2000}
            />;
    }
}
const styles = {
    container: {
        justifyContent: "space-around",
        alignItems: "center",
        flex: 1,
        backgroundColor: "white",
        borderWidth:1,
        borderColor:'gray',
        height:80
    },
};

Can you please provide some suggestions on what I should to get good performance and efficient loading of list view…?

[naqvitalha]

Things to watch out for:

1. Don’t test perf on dev mode. Set dev to off and minify to true.
2. Component being returned in rowRenderer needs to have shouldComponentUpdate defined.
3. rowHasChanged should not be returning true all the time.

You can check the expo sample to get an idea of the performance. It should be very fast. Also, you don’t need to set renderAheadOffset to such large value, default is fine in most cases. Let me know if you need further help. An expo sample with the problem will help me check it out quickly.

[naqvitalha]

@twistedfork88 RN does itself give out a warning about DEV being true. I can add one to RLV context too. But this is one thing every developer should already know. How do you think I can add warnings for point 2/3? Couldn’t think of a way to infer if rowHasChanged will always be true.