To use RecyclerListView, you must implement three core building blocks:
DataProvider: Manages your data and determines if rows have changed. The constructor takes a comparison function (r1, r2) => boolean. For optimal performance, ensure this function correctly identifies if two rows are different.LayoutProvider: Defines the layout of your list. It requires two functions:- An index-to-type function:
index => type (e.g., determining if a row is a 'FULL' width or 'HALF' width item). - A type-to-dimension function:
(type, dim) => void (sets dim.width and dim.height for a given type).
rowRenderer: A function that returns the React component for a specific type and data: (type, data) => ReactElement.
Note: For grid layouts, it is recommended to use gridlayoutprovider (an export of RLV) starting from v3.0.
import React, { Component } from "react";
import { View, Text, Dimensions } from "react-native";
import { RecyclerListView, DataProvider, LayoutProvider } from "recyclerlistview";
// 1. Define ViewTypes
const ViewTypes = {
FULL: 0,
HALF_LEFT: 1,
HALF_RIGHT: 2
};
// 2. Setup DataProvider
let dataProvider = new DataProvider((r1, r2) => {
return r1 !== r2;
});
// 3. Setup LayoutProvider
let { width } = Dimensions.get("window");
let layoutProvider = new LayoutProvider(
index => {
if (index % 3 === 0) return ViewTypes.FULL;
return ViewTypes.HALF_LEFT;
},
(type, dim) => {
switch (type) {
case ViewTypes.FULL:
dim.width = width;
dim.height = 140;
break;
case ViewTypes.HALF_LEFT:
dim.width = width / 2;
dim.height = 160;
break;
// ... other types
}
}
);
// 4. Setup rowRenderer
const rowRenderer = (type, data) => {
switch (type) {
case ViewTypes.FULL:
return <View><Text>{data}</Text></View>;
// ... other types
default: return null;
}
};
// 5. Render
// <RecyclerListView layoutProvider={layoutProvider} dataProvider={dataProvider.cloneWithRows(data)} rowRenderer={rowRenderer} />
