React Native Components III [Day 3/30 — React Native]

Victor Bruce-Crabbe
2 min readJan 3, 2021

--

Day 3 of #ReactNativeIn30Days

Still exploring and experimenting with React Natives’ components as of day 3. I added an important feature that is very common with lists on mobile apps, the RefreshControl component.

You can read more about this component from the official documentation

RefreshControl Component

The RefreshControl component allows users to fetch new data on their screen when they pull the list down. In simple terms, it adds pull to refresh functionality inside of a ScrollView or ListView(FlatList and SectionList).

What I Built for Day 3

As I mentioned on day 2, I had some challenges styling the course card whiles using the FlatList component and had to fall back on the ScrollView component due to time constraints.

For day 3, I refactored the code to use FlatList instead, and to my surprise, fixing the day 2 problem was quite a breeze.

I then added the pull to refresh functionality to the FlatList component since it is a very common feature associated with lists on mobile apps.

Wrap up:

I’m very happy with what I have been able to achieve today. I’m hoping to build on this knowledge and apply the skills acquired in the projects I’ll be embarking on soon. To view the source code for day 3, kindly click on this link.

Thank you for your time. Any feedback and suggestions are welcomed in the comment section below. See you on day 4!😊

--

--

Victor Bruce-Crabbe
Victor Bruce-Crabbe

Written by Victor Bruce-Crabbe

[Available for Hire]. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

No responses yet