Implementing Recyclerview in Reactnative using Custom component


The RecyclerView is much more powerful, flexible and a major enhancement over ListView.The advantages of Recyclerview are:

  1. ViewHolder Pattern:In a ListView, it was recommended to use the ViewHolder pattern but it was never a compulsion. In case of RecyclerView, it is mandatory use the ViewHolder pattern. This is one of the major differences between the ListView and the RecyclerView.It makes things a bit more complex in RecyclerView but a lot of problems that we faced in the ListView are solved efficiently.
  2. Reuses cells while scrolling up/down — this is possible with implementing View Holder in the listView adapter, but it was an optional thing, while in the RecyclerView it’s the default way of writing adapter.

We tried to implement RecyclerView in reactnative by exposing it as a custom component.The steps to implement it as a module are as follows:

  1. Install the npm module:
  2. Edit settings.gradle file to include the module as follows:
  3. Edit android/app/build.gradle file to add required dependency:

    Run gradle sync to sync the module
  4. Register the module in
  5. Usage in react native:

At present we can pass fontSize,padding and fontColor as props to Recyclerview.

If you want to learn more about RecyclerViews then check out the Android documentation to see what it can do. That’s it for today’s tutorial.

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development