Complete React Native Tutorial #25 - Using the FlatList Components

Key Takeaways

All right then, gang. So now we fetched all the user book records and we're storing those in some states. In this lesson, I want to access that book state from the books page in the dashboard group and then output all of those books in some kind of list. So currently on that page, the only thing we have is a view and then some text inside it for a title. And below this title is where we're going to list all the books. And we'll be doing that using a native component called flat list. Before we do that though, I just want to bring in the book state from the books context. And to do that, we're going to need to use the use books hook. So, let me come to the top of the file first of all, and I'm just going to paste in the import for that right here. Now, I'm also going to paste in a few more things we'll be needing for this page as well. So, let me just grab those from the course files and add them in. So, we've got the colors object, which is so we can use the primary color from that palette. And then down here we're adding the themed card component as well which we created back near the start of the series. So we'll use this card component probably for each book in the list that we output. All right. So now we can grab the books in this component by saying const then curly braces and then we want to dstructure the books value. Then we can set this equal to the use books hook which we just imported and invoke it. All right. So now we have that book state which we know should be an array of books or an empty array if there's no books in the collection yet made by this user. So now we can start to list the books out on the page. And one of the easiest ways to do that is by using the built-in flat list component from React Native. So let us first of all import that component up here at the top of the file. And then back down in the template, I'm going to add first of all another spacer component to just give this list a little bit of breathing room. And then I'm going to add the flat list component itself. Now, this component is going to render a list of templates for us eventually, one for each item in the list of books data, but it does need us to provide a few different values. So the first one is a data prop which is where we can supply the books array so that now it knows to make a list based on this data. The second one is a prop called key extractor and this should be a function which returns a unique key or ID for each item in this book's data. Now, React Native uses that unique key to keep track of each individual item in the list, much like it would do in regular React applications for the web. And these keys must be unique for each and every list item. So, for the value, we pass the function and that takes in the item as an argument. And this item refers to each individual item in the books array. Okay. So inside this function, we just need to return the property on the item which we want React to use for the key. In our case, that could be an ID property, dollar sign ID that is on the item itself, which app automatically attaches for us when we create a record. Next up, we're going to add a prop called content container styles. Okay? And we're going to set that equal to styles.list so that we can add the styles for this later on. And you can think of this flat list by the way as a little bit like maybe a div element or even a ul element which wraps all the list items inside it. And these container styles which we apply are the styles which we give that content element. All right. So then finally we need another prop called render item. Now this render item value should be a function which returns a template to be rendered for each item in a list. And inside that function, we automatically get access to an argument from which we can destructure the individual item. So basically this function runs for each item in the books array. And each time it runs, we get access to the individual book item, which is what this thing is right here. So from this function, we can just return a template inside parenthesis and then we can output the different property values from each book inside the template like the title and the author. Now, as a root element to this template, I'm going to use the pressable component, which also needs to be imported from the React Native library. And the reason I'm doing this is because later on, we're going to be able to press on these book items to read more about them. It's going to go to a different page. All right. So, inside that pressable component, we're going to use the themed card component so that each book gets rendered as a card on the page. We'll also pass a style prop to it as well, which is going to be equal to styles.card. And we're going to add those styles at the bottom later on. But inside the card, I want to output two bits of data. The title of the book and also the author of the book. And for each of those things, we're going to use the themed text component. Okay. So, let's do the first one for the title of the book. And for this, we're just going to pass a style prop as well, which is equal to styles.title. title just so we can style it later on. And inside the component, we're going to output the item.title value, which is the title property on the book item we have access to. Now, now underneath that, I'm going to use the themed text component again. And this time inside it, I'm going to say written by first of all, then we'll do the curly braces. And then this time, it's going to be item.author to output the author. And then that's pretty much it for the template of each book. Okay. So finally, I just want to come down here and paste in a few styles for the things we just added. So this list one right here, remember, was the value of the content container style prop. So we're just giving that a bit of padding. I think we do. Oh, margin top, sorry. Then we have a class for the card. So this right here. And in there we give it a width of 90% some margin in the horizontal direction vertical margin some padding uh padding left which is a little bit more and a border left which is the primary color you know from the colors object that we imported up here. So that's like the purple color that we gave to a button and then the border left width as well. For the title we have a font size of 20, font weight of bold and margin bottom of 10. So that was for the book title right here where we say styles.title. Okay. So let's save this now and we'll see in a moment if this works. Okay. So we see just the first one. But what I'm going to do is restart the app so we can fetch the up-to-date data because I actually added a few more. So let me go to the profile page then to books. And yeah, now we can see four books on that home screen or rather that book screen. Awesome. And also just to quickly demonstrate something, I just added a few more books just to show you that this actually auto scrolls as well. So when we use the flat list, it automatically scrolls through the data for us without having to put it inside some kind of scrollable component, which is pretty nice.