installation

1$ npm i react-native-chips-ui

or

1$ yarn add react-native-chips-ui

Examples

Chip Component Example

variant types -> solid (default) , outlined , disabled
label -> "string"

1import React from "react";
2import { StyleSheet } from "react-native";
3import { Chip } from "react-native-chips-ui";
4
5function App() {
6  // Function to handle press events on chips
7  const onChipItemPress = () => {
8    console.log("pressed");
9  };
10
11  return (
12    <>
13      {/* Chip component for user input */}
14      <Chip
15        label="What's On Your Mind? "
16        style={styles.chip}
17        onPress={onChipItemPress}
18      />
19
20      {/* Disabled Chip component for deletion */}
21      <Chip
22        variant="disabled"
23        label="Delete"
24        style={styles.chip}
25        onPress={onChipItemPress}
26      />
27    </>
28  );
29}
30
31const styles = StyleSheet.create({
32  chip: {
33    alignSelf: "flex-start",
34  },
35});
36
37export default App;
38

Chips component example

itemVariant -> solid(default) , outline, disabled

1import React, { useState } from "react";
2import { StyleSheet } from "react-native";
3import { Chips } from "react-native-chips-ui";
4
5function App() {
6  // State to manage the list of available items for the Chips component
7  const [items, setItems] = useState([
8    { label: "Football", value: "1" },
9    { label: "Cricket", value: "2" },
10    { label: "Tennis", value: "3" },
11    { label: "Table Tennis", value: "4" },
12    { label: "Basketball", value: "5" },
13    { label: "Swimming", value: "6" },
14  ]);
15
16  // State to manage the selected values in the Chips component
17  const [selectedValues, setSelectedValues] = useState(["1", "2"]);
18
19  return (
20    <>
21      {/* Chips component for displaying and selecting items */}
22      <Chips
23        type="filter"
24        itemVariant="outlined"
25        items={items}
26        setItems={setItems}
27        selectedValues={selectedValues}
28        setSelectedValues={setSelectedValues}
29      />
30    </>
31  );
32}
33
34const styles = StyleSheet.create({
35  // Additional styles can be defined here if needed
36});
37
38export default App;
39