Table of Contents

Building a scrollable List in React Native using FlatList

React Native helps the users to use the same programming language and model you use to create web applications and native mobile app. And similarily GraphQL and Apollo Client are designed to make data loading management simple and consistent regardless of your backend data.

One of the most common UI feature of mobile application is scrollable list. It is important to get right user experience because we don’t have much screen space in mobile and many apps need to display long list of data. 

So the React native FlatList has all the Feature to build a great Native List view with all the bells and whistles which users expects. Infinite scroll pagination, pull to refresh and smooth rendering performances. 

Read this E-Book to get a pulse on Elasticsearch monitoring.

Are you monitoring your Elasticsearch environment to detect problems like unreliable nodes and out-of-memory errors? Know which metrics to monitor & where to start.

To Start with the setup we need a GraphQL API from which we can load data.

This code looks simple but is actually doing a lot under the hood :

  1. Checking the cache of existence data to avoid extra data overloading.
  2. Keeping track of loading status for query.
  3. Reading data from cache and delivering it to components

There is a Pull to refresh feature that enables you too pull down on the top of a list view to get fresh data.

So, all together its only two lines of codes to connect Apollo and React Native FlatList to add pull to refresh :

And with this code we get fully native refresh behavior in our app. The callback from FlatList wires up nicely to fetchMore method  from Apollo Client Data Object . It reuses the same query but passes a new offset variable to fetch a page of data and then concatenate the items to the end. 

This shows in the UI seamlessly.


Mobile App Developer

Liked what you read !

Please leave a Feedback

Leave a Reply

Your email address will not be published. Required fields are marked *

Join the sustainability movement

Is your carbon footprint leaving a heavy mark? Learn how to lighten it! ➡️

Register Now

Calculate Your DataOps ROI with Ease!

Simplify your decision-making process with the DataOps ROI Calculator, optimize your data management and analytics capabilities.

Calculator ROI Now!

Related articles you may would like to read

Leveraging IT staff augmentation for effective data management and data architecture
Leveraging IT Staff Augmentation for Effective Data Management and Data Architecture 
How IT Staff Augmentation services flexibility and agility to IT departments
How IT staff augmentation services offer flexibility and agility to IT departments 
Educational Empowerment with IT Staff Augmentation in EdTech Advancements
Educational Empowerment with IT Staff Augmentation in EdTech Advancements 

Know the specific resource requirement for completing a specific project with us.


Keep yourself updated with the latest updates about Cloud technology, our latest offerings, security trends and much more.


Gain insights into latest aspects of cloud productivity, security, advanced technologies and more via our Virtual events.

ISmile Technologies delivers business-specific Cloud Solutions and Managed IT Services across all major platforms maximizing your competitive advantage at an unparalleled value.

Request a Consultation