Create your own multi-selected input in React-Native

We can create our multi-selected input in react-native very easily. Let’s say in our demo user can select his favorite brands from a list of options. The user can check/uncheck the inputs.

First, we need to show all the inputs to the user. We can use FlatList to render the items. Like so –

	const BRANDS = [
	{
	name: 'Toyota',
	slug: 'toyota',
	},
	{
	name: 'Mazda',
	slug: 'mazda',
	},
	{
	name: 'Honda',
	slug: 'honda',
	},
	{
	name: 'Tesla',
	slug: 'tesla',
	},
	.....]

	export default function App() {
	const [brands, setBrands] = React.useState(BRANDS);
	const [selectedBrands, setSelectedBrands] = React.useState([]);

	const renderBrands = ({ item, index }) => {
	const { name, slug } = item;

	return (
	<TouchableOpacity
	onPress={() => {}}
	style={[styles.item]}>
	<Text>{name}</Text>
	</TouchableOpacity>
	);
	};

	return (
	<View style={styles.container}>
	<FlatList
	data={brands}
	renderItem={renderBrands}
	numColumns={4}
	scrollEnabled={false}
	/>
	</View>
	);
	}

Then we need to keep track of the items that the user is selecting. We can keep track of them using an array. We have two conditions – When an item is already selected and when the item is not selected. So every time the user clicks on an item we need to check if it has been already selected, if it is already selected then we need to remove the item from the selected items, if not then we need to add the item to the selected items list.

We can also change the color of the button and text according to the condition. This is how our renderBrands function looks like after the proper change.

	const renderBrands = ({ item, index }) => {
	const { name, slug } = item;

	const isSelected = selectedBrands.filter((i) => i === slug).length > 0; // checking if the item is already selected

	return (
	<TouchableOpacity
	onPress={() => {
	if (isSelected) {
	setSelectedBrands((prev) => prev.filter((i) => i !== slug));
	} else {
	setSelectedBrands(prev => [...prev, slug])
	}
	}}
	style={[styles.item, isSelected && { backgroundColor: 'black'}]}>
	<Text style={{ color: isSelected ? "white" : "black"}}>{name}</Text>
	</TouchableOpacity>
	);
	};