react-native-chipgroup v1.0.7

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

SelectChip

License

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