How to display lists
This post is part of a series, where I document my experiences learning React Native while building my first-ever mobile app. This is also my way of giving back to the React Native community, with tips and insights I note along the journey.
Almost every app will need to display a list of objects. In our case, these lists have a finite amount of objects, but there are many cases where an infinite list is needed (e.g. the feed for a social network app, like Instagram). Let’s try to learn how to display lists in React Native with the new FlatList component.
Most basic way to use FlatList
The two main props you need to pass to FlatList is an array of data and a function that returns a component from each data item.
Cleaning up some warnings
If you notice, even thought the code above works but it gives us a warning that the VirtualizedList (it’s actually what the FlatList is built on) is missing keys for items.
If you’ve rendered an array of components in React, you’ve probably seen this kind of warning before. The VirtualizedList requires a unique key for each component to which is used for caching and for other efficiency reasons. One way to go about this is to have a key prop in each item and uses that. If the data array doesn’t contain items with a key prop, we can provide a function that generates a unique key for each item, as shown below. This should take care of the the warnings.
Pull-to-refresh functionality
A very common functionality with lists in mobile apps is “pull-to-refresh”. This usually signals to the app to fetch new data from the server and re-render the list of objects. It’s actually quite easy to do this with FlatList.
What we need to add is a callback that’s invoked when user does a pull-to-refresh gesture (onRefresh) and a flag telling the FlatList that a refresh is in progress (refreshing). The above code is a simple toy, but you can imagine that the onRefresh handler fetches some data over the network, which may take some time.
Bonus points: infinite scrolling
The app we’re building doesn’t call for infinite scrolling functionality, but I might as well cover it here since I played with it a bit.
In order to get this to work, you’ll need to implement a handler for the onEndReachedprop. The logic in this handler is up to you, but the two main things are that (a) as the name suggests, this is triggered when the user has scrolled to the bottom of the list and (b) you’ll most likely want to update the array of items you feed into the data prop in the handler. For the purpose of this simple demo, let’s assume that at each invocation we append another 10 items to the data array.
You will also need to pass in a value for the onEndReachedThreshold prop. According to the documentation, this sets the threshold in pixels (virtual, not physical) for calling the onEndReached method. You can play with this, but a value of zero is a good starting point.
The below example takes an array of ascending integers as the input data prop and renders a simple orthogonal view. When we reach the end of the list, the onEndReached handler appends some more data to the end of the array, so that we go from [0,..,9] => [0,..,9,10,..,19] and so on.
You’ll notice that we also use of a page piece of state here each time we call moreData. While this isn’t really useful here, you can imagine that in a real-world scenario, where moreData would call an API to fetch paginated data, we’ll need to keep track where we are and which data we request next.
So here we are! We’ve mastered displaying simple lists of (possibly infinite) items in React Native. Pretty neat, if I say so myself. Next up: setting up signup and login screens, hooking them up with AWS Cognito. Things getting real!
If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.
About me
I’m Alex, a software engineer and startup geek. Currently, I’m a co-founder at a startup called AgentRisk, where I’m the VP of Product & Engineering. In a past life, I was part of the founding engineering team at an enterprise cloud storage startup in Silicon Valley, did a bunch of cool cutting-edge projects at Cisco Research, and worked on some really innovative data center network architectures while doing my Master’s at UCSD. I always enjoy learning new technologies and b̵u̵i̵l̵d̵i̵n̵g̵ shipping side-projects all the time.
