Lists

Both our screens will need to display a list of data. There are several core components that can help us do this: ScrollView, FlatList and SectionList. Those last two both feature optimalisations that keep your app performant even when you want to display large amounts of data, but differ in the way they present the data. If we look at the way we want our data to be presented on our screens, it seems apparent that a SectionList would be most apt for Timesheets and a FlatList for Team Members.

SectionList

Let's get to displaying our timeEntries first! Make a db.json with mock data (an object with a timeEntries key and a value of an array of timeEntry objects) in the root of your workspace and make sure you have json server installed. Add a script that makes it easy and fast to run your server. Fetch the timeEntries in your Timesheets component and display them in a SectionList. You'll see that you'll have to format your data to the right structure to display it properly in the list. A good way to practice your Array method skills again!

FlatList

Now it's time to display the teamMembers in a FlatList. The process for this is very similar to what we did before, only this time there's no need to get the data into a pesky new structure. Winning!