https://github.com/dev-chief/react-native-accordion
Animated collapsible component for React Native, good for accordions (reanimated v2), toggles 🧬
https://github.com/dev-chief/react-native-accordion
accordion animated collapsible expanded expo react-native react-native-reanimatedv2 sections slider
Last synced: 3 months ago
JSON representation
Animated collapsible component for React Native, good for accordions (reanimated v2), toggles 🧬
- Host: GitHub
- URL: https://github.com/dev-chief/react-native-accordion
- Owner: dev-chief
- License: mit
- Created: 2021-04-30T08:11:02.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-28T21:12:04.000Z (almost 2 years ago)
- Last Synced: 2025-02-01T23:03:41.966Z (4 months ago)
- Topics: accordion, animated, collapsible, expanded, expo, react-native, react-native-reanimatedv2, sections, slider
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@dev-event/react-native-accordion
- Size: 6.51 MB
- Stars: 64
- Watchers: 2
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
React Native Accordion (Support Reanimated > 2.0 )
Current Version Reanimated 2.4.1
Made with ❤️ by developer for developers
## Thanks
Please, click on ⭐ button.
## Table of Contents
- [Installation](#installation)
- [Features](#features)
- [Usage](#usage)
- [Props](#props)
- [Example](#example)
- [Contributing](#contributing)
- [Support](#support)
- [License](#license)
## Installation
React Native (0.60+):
```bash
$ yarn add @dev-event/react-native-accordion
```
## Features
- Supported Reanimated 2;
- Fully supported on React Native and Expo;
- Simple API but fully customizable;
- Arrow animation indicating whether the collapsible is expanded or not;
- Property which unmount the collapsible when it is not expanded(very useful for performance! use wisely(Beta);
## Usage
For more complete example open [App.tsx](https://github.com/dev-event/react-native-accordion/blob/main/example/src/App.tsx)
```tsx
import React, { useState, useRef, useCallback } from "react";
import { StyleSheet, View, Text, StatusBar} from "react-native";
import AnimatedAccordion from "@dev-event/react-native-accordion";
const App: React.FC = () => {
const accordionRef = useRef(null);
const [show, setShow] = useState(false);
const handleContentTouchable = useCallback(() => {
return Sample header
}, [])
const handleContent = useCallback(() => {
return Sample content
}, [])
const handleOpenAccordion = useCallback(() => {
accordionRef.current?.openAccordion();
}, []);
return (
<>
Open Accordion
setShow(isShow)}
styleTouchable={styles.touchable}
activeBackgroundIcon={theme.light_gray}
inactiveBackgroundIcon={theme.light_gray}
handleContentTouchable={handleContentTouchable}
/>
>
);
};
const styles = StyleSheet.create({
content:{
flex: 1,
backgroundColor: "#FFFFFF"
},
touchable: {
backgroundColor: '#181829',
height: 50,
},
title: {
fontSize: 14,
color: '#FFFFFF',
fontWeight: '500',
},
message: {
fontSize: 16,
color: '#FFFFFF',
fontWeight: '500',
},
icon: {
height: 24,
width: 24,
},
button: {
padding: 16,
},
});
```
## Props
| name | description | required | type | default |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------- | ------- |
| `ref` | Ref to get access to the Accordion View | NO | ref | |
| `isArrow` | If set to false the arrow indicating whether the collapsible-view is expanded or not will not be displayed. | NO | boolean | true |
| `disabled` | Enabled/disabled of clicks header(with arrow) | NO | boolean | false |
| `initExpand` | If true then the collapsible will be expanded on mounting content(For example: with api) | NO | boolean | false |
| `colorIcon` | Color tint icon arrow | NO | string | #16182B |
| `sizeIcon` | Size icon arrow | NO | number | 16 |
| `otherProperty` | Configuration [`TouchableWithoutFeedback`](https://reactnative.dev/docs/touchablewithoutfeedback) | NO | ViewProps | |
| `isStatusFetching` | Displays an indicator if the content is loaded from the API. | NO | boolean | false |
| `initialMountedContent` | Start mounted content (Memory optimization) | YES | boolean | false |
| `isUnmountedContent` | if true then the collapsible will unmount when closing animation ends. (Memory optimization) | NO | boolean | false |
| `activeBackgroundIcon` | Expanded background color arrow | NO | string | #E5f6FF |
| `inactiveBackgroundIcon` | InExpanded background color arrow | NO | string | #FFF0E4 |
| `contentHeight` | Default height content (optimization) | NO | number | 0 |
| `handleIcon` | Render custom icon | NO | JSX.Element | |
| `onAnimatedEndExpanded` | Callback closed Accordion | NO | void | NO | | |
| `onAnimatedEndCollapsed` | Callback opened Accordion | NO | void | |
| `handleCustomTouchable` | Render custom header | NO | boolean | false |
| `handleContentTouchable` | Render content header | NO | JSX.Element | |
| `handleIndicatorFetching` | Render JSX.Element(Progress). Default - ActivityIndicator | NO | JSX.Element | |
| `renderContent` | Render content | NO | JSX.Element | |
| `configExpanded` | Configuration [`withTiming`](https://docs.swmansion.com/react-native-reanimated/docs/api/withTiming). | NO | Animated.WithTimingConfig | |
| `configCollapsed` | Configuration [`withTiming`](https://docs.swmansion.com/react-native-reanimated/docs/api/withTiming). | NO | Animated.WithTimingConfig | |
| `styleChevron` | Style Animated.View | NO | Animated.AnimateStyle | |
| `styleTouchable` | Style Animated.View | NO | Animated.AnimateStyle | |
| `styleContainer` | Style View | NO | ViewStyle | |
| `onChangeState` | Callback onChange state Accordion(open/close) | NO | void | |
| `openAccordion` | Available at ref link | NO | void | |
Built With ❤️
- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)
- [react-native-redash](https://github.com/wcandillon/react-native-redash)
- [react-native-svg](https://github.com/react-native-community/react-native-svg)
- [@react-native-community/bob](https://github.com/react-native-community/bob)
## 🎉 Example
Checkout the example [here](https://github.com/dev-event/react-native-accordion/tree/main/example/src).
## ✌️ Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
## Author
Reach out to me at one of the following places!
- E-mail [email protected]
- Medium at https://medium.com/@effectwaaters
- Instagram at https://www.instagram.com/dev_event/
## License
[](http://badges.mit-license.org)
- **[MIT license](http://opensource.org/licenses/mit-license.php)**