# react-native-expandable-chips-list

> A react native component that lets you build a dynamic expandable chips list.

Latest version **1.0.5** (published 2025-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-expandable-chips-list
pnpm add react-native-expandable-chips-list
yarn add react-native-expandable-chips-list
bun add react-native-expandable-chips-list
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2025-09-11 |
| First published | 2022-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 926.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Daniel Cocos |
| Maintainers | danielcocos |
| Keywords | chips, expandable, list, react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-expandable-chips-list
- Repository: https://github.com/danielcocos/react-native-expandable-chips-list
- Homepage: https://github.com/danielcocos/react-native-expandable-chips-list#readme
- Issues: https://github.com/danielcocos/react-native-expandable-chips-list/issues
- npm.io page: https://npm.io/package/react-native-expandable-chips-list

## Recent versions

- 1.0.5 (latest) — 2025-09-11
- 1.0.4 — 2022-01-09
- 1.0.3 — 2022-01-09
- 1.0.2 — 2022-01-09
- 1.0.1 — 2022-01-09
- 1.0.0 — 2022-01-09

## README

# React Native Expandable Chips List

A react native component that lets you build a dynamic expandable chips list.

<p align="center">
<img src="https://raw.githubusercontent.com/danielcocos/react-native-expandable-chips-list/main/demo.gif" width="600" height="1298">
</p>

## Installation
Run `npm install react-native-expandable-chips-list` in your project directory.

## Usage
```js
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

import ChipsList from 'react-native-expandable-chips-list';

const App = () => {

  return (
    <ChipsList
      data={data}
      activeColor="#FFAC1C"
      inactiveColor="#FFFFFF"
      activeTextColor="#FFFFFF"
      inactiveTextColor="#FFAC1C"
      onItemPress={(item, index) => console.log(item, index)}
      renderContent={(item: string, index: number) => (
        <View style={styles.contentContainer}>
          <Text style={styles.title}>{item}</Text>
          <Text style={styles.subtitle}>{subtitles[index]}</Text>
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    padding: 10,
  },
  title: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: 'bold',
  },
  subtitle: {
    color: '#FFFFFF',
    fontSize: 16,
  },
});

export default App;

```

## Available props

| Name                | Type                | Default                                                           | Description                                    |
|---------------------|---------------------|-------------------------------------------------------------------|------------------------------------------------|
| `data`              | `Array` of `string` | **REQUIRED**                                                      | Array of data that is displayed as chips list. |
| `renderContent`     | `func`              | **REQUIRED**  `(item:string, index:number) => React.ReactElement` | Render the content for every chip in the list. |
| `onItemPress`       | `func`              | **REQUIRED** `(item:string, index:number) => void`                | Called when the item is pressed.               |
| `transparent`       | `bool`              | `false`                                                           | Makes the content view background transparent. |
| `activeColor`       | `string`            | `#0096FF`                                                         | Color of the selected chip.                    |
| `inactiveColor`     | `string`            | `#FFFFFF`                                                         | Color of the unselected chips.                 |
| `activeTextColor`   | `string`            | `#FFFFFF`                                                         | Color of the selected chip title.              |
| `inactiveTextColor` | `string`            | `#0096FF`                                                         | Color of the unselected chips titles.          |
| `hideBorder`        | `bool`              | `false`                                                           | Hides the border of the chips.                 |

---
_Source: https://npm.io/package/react-native-expandable-chips-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._