React Native Components II [Day 2/30 React Native]
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
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
FlatList is a component for rendering a performant scrollable list.
SectionList
The SectionList works the same as the FlatList. The difference between the two components is that SectionList breaks the list of data into sections.
What I Built For Day 2
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.
Challenges:
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.
Wrap Up:
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😊.
