react-native-material-chips

🔥Easily implement versatile and customizable chips inspired from material design🔥

Demo

Features

• Supports chip types: default, filter, and input
• Provides chip variants: solid, outlined, and disabled for diverse visual styles.
• Easy customization for appearance and behavior

Installation

1$ yarn add react-native-material-chips

Examples

Example of Chip

1import React from 'react';
2import {StyleSheet} from 'react-native';
3import {Chip} from 'react-native-material-chips';
4
5const App = () => {
6  const onChipItemPress = () => {
7    console.log('Item pressed!');
8  };
9
10  return (
11    <>
12        <Chip
13            label="What's on your mind?"
14            style={styles.chip}
15            onPress={onChipItemPress}
16        />
17    </>
18  );
19};
20
21export default App;
22
23const styles = StyleSheet.create({
24  chip: {
25    alignSelf: 'flex-start',
26  }
27});
28

Example of Chips

1import React, {useState} from 'react';
2import {Chips} from 'react-native-material-chips';
3
4const App = () => {
5  const [items, setItems] = useState([
6    {label: 'Football', value: '1'},
7    {label: 'Cricket', value: '2'},
8    {label: 'Tennis', value: '3'},
9    {label: 'Table Tennis', value: '4'},
10    {label: 'Basketball', value: '5'},
11    {label: 'Swimming', value: '6'},
12  ]);
13  const [selectedValues, setSelectedValues] = useState(['1', '2']);
14
15  return (
16    <>
17      <Text variant="subtitle" content="Filter" />
18      <Chips
19        type="filter"
20        itemVariant="outlined"
21        items={items}
22        setItems={setItems}
23        selectedValues={selectedValues}
24        setSelectedValues={setSelectedValues}
25      />
26    </>
27  );
28};
29
30export default App;
31

Note: For more examples, check out example repository.

Props

Here's a props table for both Chip and Chips components:

Chip Component

Prop	Type	Description
variant	ChipItemVariant (Optional)	Chip style variant: 'solid', 'outlined' or 'disabled'. Default is 'solid'.
label	string	The text content of the chip.
onPress	() => void (Optional)	Callback function invoked when the chip is pressed.
leadingIcon	() => React.ReactElement | null (Optional)	Custom function returning a React element for the leading icon.
trailingIcon	() => React.ReactElement | null (Optional)	Custom function returning a React element for the trailing icon.
style	StyleProp<ViewStyle> (Optional)	Custom style for the entire chip container.
labelStyle	StyleProp<TextStyle> (Optional)	Custom style for the chip label text.
leadingIconContainerStyle	StyleProp<ViewStyle> (Optional)	Custom style for the leading icon container.
trailingIconContainerStyle	StyleProp<ViewStyle> (Optional)	Custom style for the trailing icon container.

Chips Component

Prop	Type	Description
containerStyle	StyleProp<ViewStyle> (Optional)	Custom style for the entire chips container.
itemContainerStyle	StyleProp<ViewStyle> (Optional)	Custom style for each chip item container.
itemLabelStyle	StyleProp<TextStyle> (Optional)	Custom style for the chip item label text.
itemLeadingIconContainerStyle	StyleProp<ViewStyle> (Optional)	Custom style for the leading icon container within each chip item.
itemTrailingIconContainerStyle	StyleProp<ViewStyle> (Optional)	Custom style for the trailing icon container within each chip item.
items	ChipItem[]	An array of chip items.
setItems	React.Dispatch<React.SetStateAction<ChipItem[]>>	State setter function for updating chip items.
selectedValues	string[] (Optional)	An array of selected values (for Filter chips).
setSelectedValues	React.Dispatch<React.SetStateAction<string[]>> (Optional)	State setter function for updating selected values.
type	ChipsType (Optional)	Type of chips: 'default', 'filter', or 'input'. Default is 'default'.
itemVariant	ChipItemVariant (Optional)	Variant for chip items: 'solid', 'outlined' or 'disabled'. Default is 'solid'.

License

react-native-material-chips is MIT licensed .