Boost your productivity with PaginatableList for React Native

PaginationList Logo for blog banner
fb twitter linkedin

We’ve always been huge believers in sharing processes and open sourcing code, so creating a library was a no brainer for us. As experienced React Native mobile developers, we often come across projects that require the same type of functionalities.

Pagination is one of the things we need to implement more often than you would expect. To ease the pain and avoid the redundancy of reinventing the wheel every time, we at TTT Studios created PaginatableList. It makes our lives easier and saves us precious time. And we figured, if we were having these issues, chances are many other developers are experiencing the same thing.

With that said, we invite you to take advantage of the new library we’ve created: PaginatableList for React Native.

What is PaginatableList?

PaginatableList is a library TTT Studios developed for React Native application developers to easily handle pagination. Built on top of React Native’s FlatList, PaginatableList helps you automatically manage list items by providing it with a paginatable API endpoint.

PagintableList is shipped out-of-the-box, fully equipped with some useful features. It dynamically loads more items when users scroll close to the bottom of the loaded list, and has a pull-to-refresh feature. All the list items fetched will be safely stored with Redux and you can access them from anywhere in the application.

List elements including list cells, empty list statuses, list separators, and so on are all highly customizable to allow developers to create whatever list they need. For example, the list cell can be a button, a view, or any component that you have developed.

There is a lot more you can add to the list on top of the dynamic loading and pull-to-refresh features. If your app requires a keyword search or filtering function for the list, the library provides ways for you to overwrite the dynamic item loading function. If you want to add a  👍button to your list cell and store the status of the thumbs up in Redux store, you can also add it via PaginatableList.

Try it out!

Go ahead and give PaginatableList a try! You have the whole TTT Studios mobile team here to support you. Let’s make development work more fun and less repetitive!

How to get started with PaginatableList?

`yarn add @twotalltotems/paginatable-list` or `npm install @twotalltotems/paginatable-list`

Check out the full documentation of PaginatableList at here.