Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oblador/react-native-collapsible
Animated collapsible component for React Native, good for accordions, toggles etc
https://github.com/oblador/react-native-collapsible
accordion animation collapsible react-native
Last synced: 5 days ago
JSON representation
Animated collapsible component for React Native, good for accordions, toggles etc
- Host: GitHub
- URL: https://github.com/oblador/react-native-collapsible
- Owner: oblador
- License: mit
- Created: 2015-06-07T13:36:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-08-27T20:12:04.000Z (5 months ago)
- Last Synced: 2025-01-14T02:03:23.253Z (12 days ago)
- Topics: accordion, animation, collapsible, react-native
- Language: JavaScript
- Size: 1.16 MB
- Stars: 2,488
- Watchers: 30
- Forks: 453
- Open Issues: 93
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.MD
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-collapsible ★1174 - Animated collapsible component for React Native using the new Animated API with fallback. Good for accordions, toggles etc (Components / UI)
- awesome-react-native - oblador/react-native-collapsible
- awesome-react-native - react-native-collapsible ★1174 - Animated collapsible component for React Native using the new Animated API with fallback. Good for accordions, toggles etc (Components / UI)
- awesome-reactnative-ui - react-native-collapsible - 0e44-11e5-9a16-1da052406eb0.gif)| (Others)
- awesome-react-native - react-native-collapsible ★1174 - Animated collapsible component for React Native using the new Animated API with fallback. Good for accordions, toggles etc (Components / UI)
- awesome-reactnative-ui - react-native-collapsible - 0e44-11e5-9a16-1da052406eb0.gif)| (Others)
- awesome-react-native - react-native-collapsible
- awesome-react-native - react-native-collapsible ★1174 - Animated collapsible component for React Native using the new Animated API with fallback. Good for accordions, toggles etc (Components / UI)
- awesome-react-native-ui - react-native-collapsible ★365 - Animated collapsible component for React Native using the new Animated API with fallback. Good for accordions, toggles etc (Components / UI)
- ReactNativeMaterials - react-native-collapsible
README
# react-native-collapsible
_Animated collapsible component for React Native using the Animated API_
Pure JavaScript, supports dynamic content heights and components that is aware of its `collapsed` state (good for toggling arrows etc).
## Installation
```bash
npm install --save react-native-collapsible
```
## Collapsible Usage
```js
import Collapsible from 'react-native-collapsible';
() => (
);
```
## Properties
| Prop | Description | Default |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | `top` |
| **`collapsed`** | Whether to show the child components or not | `true` |
| **`collapsedHeight`** | Which height should the component collapse to | `0` |
| **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` |
| **`duration`** | Duration of transition in milliseconds | `300` |
| **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
| **`renderChildrenCollapsed`** | Render children in collapsible even if not visible. | `true` |
| **`style`** | Optional styling for the container | |
| **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | `() => {}` |
## Accordion Usage
This is a convenience component for a common use case, see demo below.
```js
import Accordion from 'react-native-collapsible/Accordion';
() => (
);
```
## Properties
| Prop | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| **`sections`** | An array of sections passed to the render methods |
| **`renderHeader(content, index, isActive, sections)`** | A function that should return a renderable representing the header |
| **`renderContent(content, index, isActive, sections)`** | A function that should return a renderable representing the content |
| **`renderFooter(content, index, isActive, sections)`** | A function that should return a renderable representing the footer |
| **`renderSectionTitle(content, index, isActive)`** | A function that should return a renderable representing the title of the section outside the touchable element |
| **`onChange(indexes)`** | A function that is called when the currently active section(s) are updated. |
| **`keyExtractor(item, index)`** | Used to extract a unique key for a given item at the specified index. |
| **`activeSections`** | Control which indices in the `sections` array are currently open. If empty, closes all sections. |
| **`underlayColor`** | The color of the underlay that will show through when tapping on headers. Defaults to black. |
| **`touchableComponent`** | The touchable component used in the Accordion. Defaults to `TouchableHighlight` |
| **`touchableProps`** | Properties for the `touchableComponent` |
| **`disabled`** | Set whether the user can interact with the Accordion |
| **`align`** | See `Collapsible` |
| **`duration`** | See `Collapsible` |
| **`easing`** | See `Collapsible` |
| **`onAnimationEnd(key, index)`** | See `Collapsible`. |
| **`expandFromBottom`** | Expand content from the bottom instead of the top |
| **`expandMultiple`** | Allow more than one section to be expanded. Defaults to false. |
| **`sectionContainerStyle`** | Optional styling for the section container. |
| **`containerStyle`** | Optional styling for the Accordion container. |
| **`renderAsFlatList`** | Optional rendering as FlatList (defaults to false). |
## Demo
## Example
Check full example in the `Example` folder.
```js
import React, { Component } from 'react';
import Accordion from 'react-native-collapsible/Accordion';
const SECTIONS = [
{
title: 'First',
content: 'Lorem ipsum...',
},
{
title: 'Second',
content: 'Lorem ipsum...',
},
];
class AccordionView extends Component {
state = {
activeSections: [],
};
_renderSectionTitle = (section) => {
return (
{section.content}
);
};
_renderHeader = (section) => {
return (
{section.title}
);
};
_renderContent = (section) => {
return (
{section.content}
);
};
_updateSections = (activeSections) => {
this.setState({ activeSections });
};
render() {
return (
);
}
}
```
### Transition backgrounds
If you combine with the [`react-native-animatable`](https://github.com/oblador/react-native-animatable) library you can easily transition the background color between the active and inactive state or add animations.
Lets augment the example above with:
```js
import * as Animatable from 'react-native-animatable';
(...)
_renderHeader(section, index, isActive, sections) {
return (
{section.title}
);
}
_renderContent(section, i, isActive, sections) {
return (
{section.content}
);
}
(...)
```
To produce this (slowed down for visibility):
## Contributing
Interested in contributing to this repo? Have a look at our [Contributing Guide](https://github.com/oblador/react-native-collapsible/blob/master/.github/CONTRIBUTING.MD)
## Maintainers
Joel Arvidsson
Author
## License
[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson and contributors 2015-2021