React Native Chips Input

An easy to use custom chips input component, built using NativeBase. This can be used for both react and react native.

Prerequisites

Since this component is built using NativeBase. Please follow NativeBase installation guide to proceed.

Getting Started

npm i react-native-chips-input

yarn add react-native-chips-input

Default Usage

import { ChipsInput } from "react-native-chips-input";

export default App = () => {
  const [searchText, setSearchText] = useState<string>("");
  const [data, setData] = useState<Array<String>>(["Jakson", "Taylor", "Kyle"]);

  useEffect(() => {
    setData((val) => [...val, selectedName]);
  }, [selectedName]);

  return (
    <ChipsInput
      chipsData={data}
      setChipsData={setData}
      searchText={searchText}
      setSearchText={setSearchText}
      containerStyles={{ borderBottomWidth: 1, borderBottomColor: "#D3D9DF" }}
    />
  );
};

Desktop view

Device view

Properties for ChipsInput

| name | description | type | Required | | :-------------------------- | :--------------------------------------------- | :------------------------------------------------- | :------- | | chipsData | Data for chips | Array | True | | setChipsData | Setter function for chips | React.Dispatch<React.SetStateAction<String[]>> | True | | searchText | Value for input | String | True | | setSearchText | Setter function for input value | (value: React.SetStateAction) => void | True | | numberOfVisibleNames | Number for visible names when input is blurred | number | False | | label | Value for input placeholder | String | False | | labelTextColor | Color for input placeholder | ColorValue | False | | inputTextColor | Color for input value | ColorType | False | | containerStyles | Top level container styles | StyleProp | False | | focusedContainerStyles | Container styles when input is focused | StyleProp | False | | inputStyles | Styles for input element | StyleProp | False | | blurredContainerStyles | Container styles when input is blurred | StyleProp | False | | blurredTextStyles | Styles for text when input is blurred | StyleProp | False | | chipBackgroundColor | Chip background color when not selected | ResponsiveValue<ColorType | ILinearGradientProps> | False | | chipTextColor | Chip text color when not selected | ColorType | False | | selectedChipBackgroundColor | Chip background color when selected | ResponsiveValue<ColorType | ILinearGradientProps> | False | | selectedChipTextColor | Chip text color when selected | ColorType | False |

Customised Usage Example

import { ChipsInput } from "react-native-chips-input";

export default App = () => {
  const [searchText, setSearchText] = useState<string>("");
  const [data, setData] = useState<Array<String>>(["Jakson", "Taylor", "Kyle"]);

  useEffect(() => {
    setData((val) => [...val, selectedName]);
  }, [selectedName]);

  return (
    <ChipsInput
      chipsData={data}
      setChipsData={setData}
      searchText={searchText}
      setSearchText={setSearchText}
      numberOfVisibleNames={4} // For invalid numbers (e.g 0, -2), default value of 2 will be considered
      label="Search Text"
      labelTextColor="amber.900"
      inputTextColor="amber.900"
      containerStyles={{ borderBottomWidth: 1, borderBottomColor: "grey" }}
      focusedContainerStyles={{ backgroundColor: "red" }}
      inputStyles={{ textAlign: "center" }}
      blurredContainerStyles={{ height: "50px" }}
      blurredTextStyles={{color: 'black'}}
      chipBackgroundColor="red.100"
      chipTextColor="red.900"
      selectedChipBackgroundColor="amber.100"
      selectedChipTextColor="amber.900"
    />
  );
};

License

react-native-chips-input is LICENSE @ tanish_bawa