https://github.com/hamidhadi/react-native-collapsible-list
A ReactNative collapsible list component
https://github.com/hamidhadi/react-native-collapsible-list
android collapsible dynamic ios list react-native typescript
Last synced: about 1 year ago
JSON representation
A ReactNative collapsible list component
- Host: GitHub
- URL: https://github.com/hamidhadi/react-native-collapsible-list
- Owner: hamidhadi
- License: mit
- Created: 2018-03-04T09:11:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T12:06:48.000Z (over 3 years ago)
- Last Synced: 2025-04-23T13:14:23.190Z (about 1 year ago)
- Topics: android, collapsible, dynamic, ios, list, react-native, typescript
- Language: Objective-C
- Size: 1.76 MB
- Stars: 66
- Watchers: 1
- Forks: 13
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-collapsible-list
A ReactNative collapsible list component
## 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 (
{buttonText}
}
>
Hello Collapsable List :)
Collapsable List Item
Another Collapsable List Item
);
}
}
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).