Today we're going to be talking about list rendering in the React Native framework. We will be covering two different methods to render a list as well as key differences and when one might be preferable to the other. Without further ado let's get started.
So first off lets check out what the list will look like:
Super creative I know.
Now let's check out the styling that will be applied to both methods:
Good times. Lets keep moving.
ScrollView
Now that the exciting parts are out of the way we can check out how the ScrollView component works. First things first we have to import it into our code like so:
We now have access to the component. So what we could do with this is use JavaScript to render JSX for each item by mapping over the array and returning a View component for each element in the array. What happens if this list overflows the screen though? The screen will only display what it can and you can't scroll down the list it will look something like this:
But wait, there are still more items on the list unable to be viewed. That's where ScrollView comes in. Simply wrap your code into a ScrollView component and there you are you have a scroll-able list to view all of the items.
Now all of these items are rendered even if they're not directly on the screen. ScollView just gives you the ability to scroll to the content if it's lower on the page. So when would that be more appropriate? Well, for lists, mostly if it's a set shorter list of items. If you try this on an expansive list it will impact performance because it renders everything even if it's off screen. It can also of course be applied to other content that requires scroll-ability.
FlatList
Now for the FlatList component which to be frank is probably your better bet if you're trying to generate a list. So any guesses as to what the first part of this process is? Bingo, we have to import the component into our code:
The component itself has two key properties(many others to play with as well), the data property and the renderItem property. The data property will be where you specify what your passing into the FlatList component for rendering, in our case it will be items. The renderItem property is where we can specify what we are trying to render per element of our array and it can do item, index, or separator. We will only be using the item in our case so I de-structured the item out: { item }. From there we simply tell it that for each item we want a Text component housing the items name like so:
Not only does it render a list with the same styles as before but it is already scroll-able. A key difference between what this is doing and simply wrapping rendered JSX in a ScrollView is that the FlatList component will only render what's on screen improving performance and making it ideal for lists of larger or unknown sizes. Beyond that it has a lot of useful properties to adjust the list rendering to your liking. Here's a link to it's official docs for reference:
https://reactnative.dev/docs/flatlist.html
That'll be it from me today. Thanks for checking this out and happy coding!
Top comments (0)