react-native-animated-chip

Installation

Add the dependency:

npm i react-native-animated-chip

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native-reanimated": ">= 3.x.x",

Usage

Import

import AnimatedChip from "react-native-animated-chip";

Example Data

const CHIP_DATA: ChipType[] = [
  {
    id: 1,
    text: 'Friends',
  },
  {
    id: 2,
    text: '👨‍👩‍👧‍👦 How I Met Your Mother',
  },
  {
    id: 3,
    text: 'Prison Break',
  },

];

Usage

<AnimatedChip
  activeId={3}
  data={CHIP_DATA}
  onPress={(selected) => {
    console.log(selected);
  }}
/>

Example Project

You can checkout the example project

Simply run

• npm i
• react-native run-ios/android

should work of the example project.

Configuration - Props

Property	Type	Default	Description
data	ChipType[]	[]	An array of chip objects to display
activeId	string | number	null	The ID of the currently active chip
activeBackgroundColor	string	'#d4a8d6'	The background color of the active chip
backgroundColor	string	'#EEE7D1'	The background color of inactive chips
activeTextColor	string	'#7d3577'	The text color of the active chip
buttonStyle	ViewStyle	{}	Additional styles to apply to the chip button
contentContainerStyle	ViewStyle	{}	Additional styles to apply to the container of chips
textStyle	TextStyle	{}	Additional styles to apply to the chip text
textColor	string	'#DCCA92'	The text color of inactive chips
onPress	(chip: ChipType) => void	() => {}	A function that will be called when a chip is pressed, it receives the chip object as its argument

Future Plans

• LICENSE
• Add customizable animation
• Add single and multi selection feature

Change Log

Change log will be here !

Author

Sevval Eygul, sevvalleygull@gmail.com

License

React Native Animated Chip is available under the MIT license. See the LICENSE file for more info.