Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/animate-react-native/accordion
A React Native Accordion component, powered by React Native Reanimated layout animation that's capable of rendering and animating content that has a dynamic height.
https://github.com/animate-react-native/accordion
react-native react-native-accordion react-native-reanimated
Last synced: about 10 hours ago
JSON representation
A React Native Accordion component, powered by React Native Reanimated layout animation that's capable of rendering and animating content that has a dynamic height.
- Host: GitHub
- URL: https://github.com/animate-react-native/accordion
- Owner: animate-react-native
- License: mit
- Created: 2024-11-20T13:55:57.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-20T14:57:26.000Z (about 1 month ago)
- Last Synced: 2024-12-19T08:41:45.440Z (7 days ago)
- Topics: react-native, react-native-accordion, react-native-reanimated
- Language: TypeScript
- Homepage: https://www.animatereactnative.com
- Size: 1.33 MB
- Stars: 93
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
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 Accordion
https://github.com/user-attachments/assets/3906847e-c609-4f85-b5e5-b2bb68cef901
[](https://www.npmjs.org/package/@animatereactnative/accordion) [](https://expo.io/) [](https://www.npmjs.com/package/@animatereactnative/accordion) [](https://www.npmjs.com/package/@animatereactnative/accordion) 
React Native Accordion component, a cross-platform accordion component, powered by Reanimated, that's capable of displaying dynamic height content and animate the layout changes/transitions between Collapsable and Expandable states.
If you are going to use this component along with other components (as siblings), it is recommended to use `Accordion.Sibling` and wrap the Siblings with it. This is because the exposed `Sibling` component will use Layout animations as well so there are no layout shifts or sudden movements, keeping everything smooth.
- 🔋 Powered by Reanimated
- 📱 Works with Expo
- ✅ Cross-platform (iOS, Android, Web - wip)
- ⚡️ 60-120fps
- 🪝 Works with any React Native element/component
- 🎼 Composition ready
- ⌨️ Written in TypeScript
## Installation
```sh
npm install @animatereactnative/accordion
```
> Also, you need to install [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), and follow their installation instructions.
## Usage
```js
import { Accordion } from '@animatereactnative/accordion';
// ...
export function Example() {
return (
AnimateReactNative.com
Visible !expanded
Always visible
Expanded content
{loading && }
{data & }
);
}
```
## Props
```
Accordion = {
/**
* The main component that will handle the state of the accordion.
*
* @param isOpen boolean
* @param onChange (value: boolean) => void
*/
Accordion
/**
* The header of the accordion.
*/
Header,
/**
* The component that will wrap any children and it will apply a rotation to it.
*
* @param children
* @param rotation clockwise | counter-clockwise
*/
HeaderIcon
/**
* This is the content that will be displayed when the accordion is open
*/
Expanded,
/**
* This is the content that will be displayed when the accordion is closed
*/
Collapsed,
/**
* This is the content that will always be displayed
*/
Always,
/**
*
* This is a component that will add the layout transition to any
* sibling components. Useful when you are rendering other components
* that are not direct children of the Accordion component.
*/
Sibling,
};
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
[MIT](./LICENSE)
---
