# react-native-collapsible-list

> A ReactNative collapsible list component

Latest version **2.2.2** (published 2020-03-29) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2020-03-29 |
| First published | 2018-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 79.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hamid Hadi |
| Maintainers | hamidhadi |
| Keywords | react, react-native, collapsible, component |

## Links

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.2 (latest) — 2020-03-29
- 2.2.1 — 2020-03-29
- 2.2.0 — 2020-03-29
- 2.1.0 — 2020-03-28
- 2.0.0 — 2019-10-05
- 1.0.0 — 2018-06-29
- 0.2.0 — 2018-03-06
- 0.1.1 — 2018-03-04
- 0.1.0 — 2018-03-04

## README

# react-native-collapsible-list

A ReactNative collapsible list component

![react-native-collapsible-list example](/demo.gif)

## Installation

You can install this package via `yarn`:

```
yarn add react-native-collapsible-list
```

or `npm`

```bash
npm install react-native-collapsible-list --save
```

## Basic Usage

```js
import React, { Component } from "react";
import { Text, View } from "react-native";
import CollapsibleList from "react-native-collapsible-list";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <CollapsibleList
          numberOfVisibleItems={1}
          wrapperStyle={styles.wrapperCollapsibleList}
          buttonContent={
            <View style={styles.button}>
              <Text style={styles.buttonText}>{buttonText}</Text>
            </View>
          }
        >
          <View style={styles.collapsibleItem}>
            <Text>Hello Collapsable List :)</Text>
          </View>
          <View style={styles.collapsibleItem}>
            <Text>Collapsable List Item</Text>
          </View>
          <View style={styles.collapsibleItem}>
            <Text>Another Collapsable List Item</Text>
          </View>
        </CollapsibleList>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.1)"
  },
  wrapperCollapsibleList: {
    flex: 1,
    marginTop: 20,
    overflow: "hidden",
    backgroundColor: "#FFF",
    borderRadius: 5
  },
  collapsibleItem: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: "#CCC",
    padding: 10
  }
});
```

## Properties

| Prop                 | Type                                                                                                         | Default                                                                                | Description                                                                                                                               |
| :------------------- | :----------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| animationConfig      | [ReactNative.LayoutAnimationConfig](https://facebook.github.io/react-native/docs/layoutanimation#parameters) | `{duration: 700, update: { type: "spring", springDamping: 0.7, property: "scaleXY" }}` | Overrides each property of the default value if specified                                                                                 |
| buttonContent        | `React.ReactNode`                                                                                            | `null`                                                                                 | Content of collapse button                                                                                                                |
| buttonPosition       | `string` (`top` or `bottom`)                                                                                 | `bottom`                                                                               | Position of collapse button                                                                                                               |
| numberOfVisibleItems | `number`                                                                                                     | `1`                                                                                    | Number of visible items when lis is not collapsed                                                                                         |
| onToggle             | `function`                                                                                                   | `null`                                                                                 | Callback function for toggling the list with collapsed parameter which can be `true`(list is collapsed) or `false`(list is not collapsed) |
| wrapperStyle         | `ReactNative.ViewStyle`                                                                                      | `null`                                                                                 | The style of the list wrapper                                                                                                             |

## Contribution

You can fork the repository, improve or fix some part of it and then send the pull requests back if you want to see them here. I really appreciate that. :wink:

## License

Licensed under the [MIT](https://github.com/hamidhadi/react-native-collapsible-list/blob/master/LICENSE).

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