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.  

6e4355c2-5d33-41af-a59d-69ce7012896a.png

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.  

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. 

  1. Keeping track of loading status for query. 

  1. 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 behaviour 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 concatinate the items to the end.  

This shows in the UI seamlessly. 

Manzar

Mobile App Developer

SEO Specialist

Ismile Technologies is looking for a creative and self-motivated SEO (Search Engine Optimization) Specialist who can assist with the development

Read More »

Marketing Coordinator

We are looking for enthusiastic Marketing Coordinator to join our marketing department and provide creative ideas to help achieve our goals. This position will work in the Digital Marketing team, you will be focusing

Read More »

SEO Specialist

Ismile Technologies is looking for a creative and self-motivated SEO (Search Engine Optimization) Specialist who can assist with the development and implementation of SEO strategies. You will be responsible for managing all on-site and off-site SEO activities

Read More »

Senior Digital Marketing Specialist

Responsibilities   Own strategies, execution and optimization of our lead generation & lead nurturing goals through email campaigns, webinar, content marketing, paid media and social media channels.  Convert targeted prospects through calls-to-action, landing pages, and content offers.  Conduct

Read More »

Contact us for a quote, help, or to join the team.

email

service@iSmileTechnologies.com

phone

(732) 347-6245

About Us

iSmile Technologies is a global technology services company.

service@iSmileTechnologies.com
(732) 347-6245

USA

+1 (732) 347-6245
241 Jonathan Way
Bolingbrook, IL 60490

INDIA

2-3-285, Secunderabad Hyderabad 500003

CANADA

3190 Stocksbridge Ave
Oakville, ON L6M 0A7