Selectable list view react-native

Selectable list view react-native

Hi Guys, In this article, we are going to learn about Custom Selectable list view react-native, to do this we are using FlatList component and display list and then add selectable functionality in that using one boolean key, this is a most important function which used almost all developers in their application to select data from the list. so you have to implement this feature with good performance i.e. sometimes item selection will slow the app if you add selection functionality in the same class in FlatList, so in this example, we are creating another component for a single item and add selection functionality in this component then render this item in FlatList components, let’s start with an example.

Selectable list view react-native

1. Create a new project

I am using my old project and I have created a component folder for itemView

2. Imports in App.js

3. Create JSON

4. Create ItemListView.js

Imports following components in ItemListView.js

5. ItemListView.js

As you see in above code, I have update state inside this item onPress click and then call the function from main Class to update the main list

6. App.js

Import ItemListView.js from Component folder

Check this full source code for App.js

7. Output

Selectable list view react-native

Thank you 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *