React Native Chipgroup

react-native-chipgroup is a library that provides custom React Native components for creating interactive chip elements and selectable chip groups. These components are designed to enhance user interaction in React Native applications by offering intuitive and customizable UI elements.

The library includes the following components:

• Chip: A versatile chip component that supports different modes, custom icons, and actions.
• SelectChip: A group of selectable chips allowing users to choose from a set of options, with customizable styling and selection handling.

Installation

Using npm:

  npm i react-native-chipgroup

Note: react-native-responsive-dimensions is a required dependency for react-native-chipgroup. Make sure to install it for proper functionality.

Basic Usage

import React from 'react';
import { View } from 'react-native';
import { Chip, SelectChip } from 'react-native-chipgroup';

const data = [
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 }
];

const App = () => {

  const handleSelect = (item, index) => {
    console.log(`Selected: ${item.value} at index ${index}`);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Chip
        mode="outlined"
        onPress={() => console.log('Chip pressed')}
        isCloseIcon={true}
        onClose={() => console.log('Close icon pressed')}
      >
        Example Chip
      </Chip>

      <SelectChip
        data={data}
        onSelect={handleSelect}
        renderLabel={(item) => item.label}
        defaultSelectedIndex={0}
        containerStyle={{ marginTop: 20 }}
      />

    </View>
  );
};

export default App;

Props

Chip

Prop name	Type	Required	Default value	Description
mode	'flat' | 'outlined'	No	'flat'	The mode of the chip, either 'flat' or 'outlined'.
children	ReactNode	No	-	The content of the chip.
onPress	() => void	No	-	A function called when the chip is pressed.
leftIcon	ReactNode	No	-	An icon to be displayed on the left side of the chip.
rightIcon	ReactNode	No	-	An icon to be displayed on the right side of the chip.
isCloseIcon	Boolean	No	-	Determines whether to show a close icon on the chip.
onClose	() => void	No	-	A function called when the close icon is pressed.
containerStyle	StyleProp<ViewStyle> or undefined	No	-	Optional styling for the container of the Chip component.
style	StyleProp<ViewStyle> or (selected: boolean) => StyleProp<ViewStyle> or undefined	No	-	Optional styling for the chip. It can be either a style object or a function.
labelStyle	StyleProp<TextStyle> or (selected: boolean) => StyleProp<TextStyle> or undefined	No	-	Optional styling for the label of the chip. It can be either a style object or a function.

SelectChip

Prop name	Type	Required	Default value	Description
data	any[]	Yes	-	An array of items to display as tags.
onSelect	(item: any, index: number) => void	No	-	A function called when a tag is selected. It receives the selected item and its index.
renderLabel	(item: any) => string	Yes	-	A function used to render the label of each tag.
containerStyle	StyleProp<ViewStyle> or undefined	No	-	Optional styling for the container of the Tag component.
style	StyleProp<ViewStyle> or (selected: boolean) => StyleProp<ViewStyle> or undefined	No	-	Optional styling for the tags. It can be either a style object or a function.
labelStyle	StyleProp<TextStyle> or (selected: boolean) => StyleProp<TextStyle> or undefined	No	-	Optional styling for the label of the tags. It can be either a style object or a function.
defaultSelectedIndex	number or undefined	No	0	The default index of the selected tag.

License

The library is released under the ISC license. For more information see the License Tab.