React Native Components II [Day 2/30 React Native]

cover image for day 2 of #ReactNativeIn30Days

On day 2, I explored React native ListView components. The ListView component renders a list of scrollable elements on the screen. Below is a list of ListView components that are provided out of the box by the framework.

ScrollView is a generic component that renders all its child elements at once. Hence, it is not advisable to use the ScrollView component for a long list of data or dynamic data.

FlatList is a component for rendering a performant scrollable list.

The SectionList works the same as the FlatList. The difference between the two components is that SectionList breaks the list of data into sections.

To implement what I have learned for day 2, I quickly went to dribble to get some inspiration on what to design and build. I finally settled on designing a screen that showcases a list of lessons a registered learner undertaking under a particular course.

I designed this idea in Figma and implemented the design using React Native. Below is an image of the final result for day 2.

Final results for day 2

Initially, I wanted to use the FlatList component to render the list of lessons on the screen. I had that working but later had challenges with the styling. I was running out of time for day 2 and I had to resort to the ScrollView component to render the list of lessons.

Day 2 was fun and I learned a lot. I am hoping to refactor the day 2 code to use the more performant ListView component, FlatList. To get access to the source code for day 2, kindly click on this link.

All suggestions and feedbacks are welcomed😊.

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.