Material Design Inspired Chips In React Native

Description:

A simple React Native component for creating Material Design-inspired chips to help users enter information, make selections, filter content, or trigger actions.

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

How to use it:

1. Install and import the Chips component.

# Yarn
$ yarn add react-native-material-chips
# NPM
$ npm install react-native-material-chips

import React from 'react';
import {StyleSheet} from 'react-native';
import {Chip, Chips} from 'react-native-material-chips';

2. Add a chip or chips to your app.

const App = () => {
  const onChipItemPress = () => {
    console.log('Item pressed!');
  };
  return (
    <>
      <Chip
        label="What's on your mind?"
        style={styles.chip}
        onPress={onChipItemPress}
      />
    </>
  );
};
export default App;

const App = () => {
  const [items, setItems] = useState([
    {label: 'Football', value: '1'},
    {label: 'Cricket', value: '2'},
    {label: 'Tennis', value: '3'},
    {label: 'Table Tennis', value: '4'},
    {label: 'Basketball', value: '5'},
    {label: 'Swimming', value: '6'},
  ]);
  const [selectedValues, setSelectedValues] = useState(['1', '2']);
  return (
    <>
      <Text variant="subtitle" content="Filter" />
      <Chips
        type="filter"
        itemVariant="outlined"
        items={items}
        setItems={setItems}
        selectedValues={selectedValues}
        setSelectedValues={setSelectedValues}
      />
    </>
  );
};
export default App;

3. Available Chips props.

containerStyle?: StyleProp<ViewStyle>;
itemContainerStyle?: StyleProp<ViewStyle>;
itemLabelStyle?: StyleProp<TextStyle>;
itemLeadingIconContainerStyle?: StyleProp<ViewStyle>;
itemTrailingIconContainerStyle?: StyleProp<ViewStyle>;
items: ChipItem[];
setItems: React.Dispatch<React.SetStateAction<ChipItem[]>>;
selectedValues?: string[];
setSelectedValues?: React.Dispatch<React.SetStateAction<string[]>>;
type?: ChipsType; // 'default', 'filter', or 'input'
itemVariant?: ChipItemVariant;

4. Available Chip props.

variant?: ChipItemVariant;
label: string;
onPress?: () => void;
leadingIcon?: () => React.ReactElement | null;
trailingIcon?: () => React.ReactElement | null;
style?: StyleProp<ViewStyle>;
labelStyle?: StyleProp<TextStyle>;
leadingIconContainerStyle?: StyleProp<ViewStyle>;
trailingIconContainerStyle?: StyleProp<ViewStyle>;