RecyclerListView – React Native Everything You Need to Know

RecyclerListView – React Native Everything You Need to Know

Post by: Niraj Dhungana

Posted on: Nov 13, 2021

#React Native# RecyclerListView

FlipKart is one of the largest e-commerce companies in India. The most interesting fact is that they also use React Native to develop their mobile applications. They have millions of products on their website. Therefore, loading hundreds or thousands of products on a single render was the great challenge for their engineers.

ScrollView or FlatList components are not capable of rendering large amounts of data. You can watch this video if you want more information on this.

watch video

Let me tell you in short, if we try to render more then 100 items inside the FlatList component then it can cause some performance issues. To solve this FlipKart team built this RecyclerListView Component.

How to set up RecyclerListView?

As we already discussed, RecyclerListView is the most useful component if you want to render large amounts of data. But every good thing comes with some “if and but”. The only drawback of using a RecyclerListView component is, it looks a bit confusing at first.

Like inside the FlatList component we can not pass direct data and render components using renderItem prop. To render data inside RLV first we need to create some helper methods / props like dataProvider, layoutProvider & rowRender.

What is DataProvider?

DataProvider is the prop that we can pass inside the RecyclerListView component and it is the most important prop. This prop will decide when we want to re-render our list items. Like we will get row one and row two inside this function.

1
2
3
4
5
...,
dataProvider: new DataProvider((r1, r2) => {
        return r1 !== r2;
      }),
...

Like here inside this sample code you can see we want to re-render our components only if some changes are found from old row to new row. You can watch this video to get more understanding.

watch video

WHAT IS LayoutProvider?

Like inside the FlatList component we can render multi columns components inside RecyclerListView as well. Also we can define different width and height for different components. For that we need to use layoutProvider prop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 new LayoutProvider(index => {
      ...,
    (type, dim) => {
      switch (type) {
        case 'fake-data':
          dim.width = Dimensions.get('window').width;
          dim.height = 50;
          break;
        default:
          dim.width = Dimensions.get('window').width / 2;
          dim.height = 50;
      }
    }
  );

You can watch this video to get more information.

watch video

What is rowRender?

rowRender prop works like renderItem prop inside the FlatList component. Inside this prop we will get some interesting values which gives us more control over our components. Like you can see inside this below sample code type, data, index and extendState 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
rowRenderer = (type, data, index, extendedState) => {
    switch (type) {
      case 'fake-data':
        return (
          <Text>
            {data.item}
          </Text>
        );

      case 'non-fake-data':
        return (
          <View>
            <Text>
              {data.item}
            </Text>
            {extendedState.someThingHappen ? <Text>Yes Happen</Text> : null}
          </View>
        );

      default:
        return null;
    }
  };

We can use type render different components according to different types and these types are coming from the layoutProvider. You can find all of its information on the video about layoutProvider.

data is the data that we want to render inside this RecyclerListVIew component and simply the index is the index of the single item.

extendState is also one of the most important props inside this RecyclerListVIew component if you want to re-render the list items when some changes happen inside our app or state of our app.

You can see this video for more understanding.

watch video

There are also lots of other useful props you will get on this github link. But the props we discussed above are more than enough for normal use cases. 

Sources That You Need