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 💳
- Host: GitHub
- URL: https://github.com/malaa-tech/react-native-reanimated-accordion
- Owner: Malaa-tech
- License: mit
- Created: 2023-07-25T14:55:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-04T11:03:47.000Z (8 months ago)
- Last Synced: 2024-11-14T22:42:22.267Z (7 months ago)
- Topics: accordion, android, ios, react-native, reanimated, reanimated3
- Language: TypeScript
- Homepage:
- Size: 466 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
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)