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:
- ViewHolder Pattern:In a ListView, it was recommended to use the ViewHolder pattern but it was never a compulsion. In case of RecyclerView, this is mandatory using the RecyclerView.ViewHolder class. 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.
- 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 RecycleView 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:
- Install the npm module:
npm install react-native-recycler-listview
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 MainApplication.java
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.
If you like this post please click ♡ symbol to recommend this post to others.
To read more articles and posts about react native you can visit my blog at:
