Multi Button Selection using FlatList in React Native

The minimum you need to know to work with FlatLists in React Native

There have been quite a few ways to create a multi-button selection using a FlatListin React Native, Today we will take a look at how to use the FlatListand button components in simple steps. For button components, we are using the react-native-elements library. This is one of the ways to show the user which button they clicked and will not say this one the best way. Before start running we must know how to walk.

What is it?

What is the FlatListcomponent? It’s an easy way to make an efficient scrolling list of data. Not only is it efficient but it’s got an incredibly simple array to work with. If you’ve used or are familiar with the ListView component it’s very similar, just better in (almost) every way. 😀 No longer do you have to format the data — you can just pass it an array of data and get to rendering right away.

Create react-native project

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. Let's create a new React Native project called "multiSelectionButton":

npx react-native init multiselectionButton

The aim of React Native paper is to provide an all-in-one UI kit for creating apps in react native. we are going to use button components from this library.

npm install react-native-paper

Run your project

npx react-native run-android

If you’re on a vanilla React Native project, you also need to install and link react-native-vector-icons. install this npm if you face icon issue.

npm install react-native-vector-icons --save

Basic Usage of FlatList

There are two primary props you need to know about in a FlatList and that’s data and renderItem. The first is an array of data used to create the list, typically an array of objects, and the second is the function that will take an individual element of the data array and render a component for it.

Add below line of code’s in App.js file

import libraries

import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import { Button } from 'react-native-paper';

Array data for listing

const Data = [
{id: 1,first_name: 'Apple',},
{id: 2,first_name: 'Mango',},
{id: 3,first_name: 'Pappaya'},
{id: 4,first_name: 'Orange'},
{id: 5,first_name: 'Banana'},
{id: 6,first_name: 'Kiwi'},
];

onPressHandler — function

// function will call when Button clicked
onPressHandler(id) {
let renderData = [...this.state.renderData];           // making copy of renderData data locally
let selectedFruits = [...this.state.selectedFruits];   // making copy of selectedFruits data locally
for (let data of renderData) {
if (data.id == id) {
data.selected = (data.selected == null) ? true : !data.selected; // making button selcted or not using boolen
if (data.selected) {
selectedFruits.push(data.first_name);  // push selected fruit value to array
} else {
selectedFruits = this.arrayRemove(this.state.selectedFruits, data.first_name)  // remove unselected fruit from array
}
break;
}
}
this.setState({ renderData });  // updating current selected button data to state
this.setState({ selectedFruits });  // updating current selected Fruits data to state
}

arrayRemove — function

// function which remove value from array and return
arrayRemove(arr, value) {
return arr.filter(function (geeks) {
return geeks != value;
});
}

render design

render() {
return (
<View style={styles.container}>
<View style={styles.listContainer}>
<Text style={styles.titleStyle}>Select fruits</Text>
<View style={styles.FlatListContainer}>
<FlatList showsHorizontalScrollIndicator={false}
data={this.state.renderData} // set render data in flatlist
keyExtractor={item => item.id.toString()} // keyExtractor convert INT  'item.id' value to string
renderItem={({ item }) =>
<Button mode="outlined"
color={item.selected == true ? '#ffffff' : '#e1601f'} // color of button will change according to selection
style={
item.selected == true
// style when button is selected
? {
margin: 5, borderRadius: 2,backgroundColor: '#e1601f',
}
// style when button is unSelected
: {
margin: 5, borderRadius: 2, backgroundColor: '#ffffff',
}
}
// onPress will call the function when button is clicked
onPress={() => this.onPressHandler(item.id)} >{item.first_name}
</Button>
} />
</View>
<View>
<Text >{this.state.selectedFruits}  </Text>
</View>
</View>
</View>
)
}
}

styles used in UI component

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: "center",
flexDirection: "row"
},
titleStyle: {
margin: 10,
fontSize: 25,
fontWeight: "bold",
color: "#161616",
letterSpacing: 0.36,
textAlign: "center",
alignSelf: "stretch",
},
FlatListContainer: {
width:"100%",
height: 500,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
listContainer: {
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
},
});

Full source code is available on GitHub.

https://github.com/vasanth1230/multiSelectionButton.git