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