3 min read
Hi, this is my first post on hashnode. In this post I want to talk about how I implement a multi-selectable
It is about React Native, a way to write cross-platform mobile app using the React JS UI library. I assume you have knowledge on both of them. If not, see here and here for a great introduction.
First let's look at
FlatList is a component in React Native which provides an easy, performant way to implement a scrollable list, something you've seen a lot in mobile apps. A
FlatList requires, essentially, only two props:
data: an array of items, and
renderItem: a function that takes an item and returns a React element, ie. a "renderer".
Let's take a look at this simple example:
Easy, right? The good thing about
FlatList is that it comes with a lot of features out of the box, such as scrolling, multiple columns, infinite scrolling, and even pull to refresh. However, one thing it doesn't support is selection. So we would have to implement our owns.
In most cases, pressing an item goes to a "detailed view" of that item, and long-pressing it to select it. We will adapt this UI norm here. To support pressing/long-pressing, we use a React Native component called
TouchableWithoutFeedback. We will use it to wrap our item view, and use its
onLongPress prop to handle the long-pressing. We will also add a state variable to store the selected item's ID:
It looks good, but it doesn't work! Why? Because we need to tell our
FlatList that something has changed and a re-render is needed. We use its
extraData prop to do so, by setting it to our state variable:
Horray! It works! We have our selectable
Now we move further on, to implement a multi-selectable
It basically has the same idea, but instead of a single state value, we use an array. Moreover, we cannot simply just set/resetting it, because we also need to handle the case when we want to deselect an item. Therefore, the long-press handler will now be a "toggle" function: if the item is not in our array, we push it in; otherwise, we splice it out.
It works pretty well, isn't it? With just a little effort, we have our multi-selectable
Finally, we want to see how scalable it is. Instead of 3 items, we increased it to, say, 50000 items:
(If you have the Expo app, feel free to test it on your device too.)
Turns out it still runs pretty smoothly, thanks to the excellent implementation of
FlatList. Of course it also depends on how complicated your item component is. In fact, they have a whole section on how you can optimize
FlatList. But in our case, it is good to know our way of handling multiple selection won't hurt its performance.
Thank you so much for reading! I hope your find my very first post on hashnode useful.