An open API service indexing awesome lists of open source software.

https://github.com/malaa-tech/react-native-reanimated-accordion

A simple animated expandable section for react native apps using reanimated 💳
https://github.com/malaa-tech/react-native-reanimated-accordion

accordion android ios react-native reanimated reanimated3

Last synced: 7 months ago
JSON representation

A simple animated expandable section for react native apps using reanimated 💳

Awesome Lists containing this project

README

        

# react-native-reanimated-accordion
A simple animated expandable section for react native apps using reanimated

### 🦄 Features
- ✅ Customizable
- ✅ Includes option to not render collapsed compnent. (For less rendring).
- ✅ Uses Reanimated v3

### How we use it





## Installation

```sh
npm install react-native-reanimated-animated-accordion
```
or using yarn
```sh
yarn add react-native-reanimated-animated-accordion
```

⚠️ Make sure you have [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) installed in your project.

## Usage

```tsx | pure
import Expandable from 'react-native-reanimated-animated-accordion';

{
setExpanded(!expanded);
}}
>
Toggle





Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Necessitatibus ab placeat alias commodi voluptatibus possimus
ducimus sit repellat praesentium fugit similique aut quam nemo
libero, aperiam deleniti modi natus quia!


Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Necessitatibus ab placeat alias commodi voluptatibus possimus
ducimus sit repellat praesentium fugit similique aut quam nemo
libero, aperiam deleniti modi natus quia!






```

## Reduce Rendering
If you would like to prevent collapsed components from being rendered, just add a `renderWhenCollapsed={false}`.
this can help if you have heavy collapsed compoennts as it may reduce your boot time + ram.

```tsx | pure

//

```

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)