@dev-event/react-native-accordion
Version:
A performant interactive collapsed view with fully configurable options
200 lines (151 loc) • 11 kB
Markdown
<div align="center">
<img src="./gif/giphy.gif" height="500" title="Accordion Animated" alt="Accordion Animated" style="box-shadow: 0 20px 30px 3px rgba(9, 9, 16, 0.2);">
</div>
<br>
<h1 align="center">React Native Accordion (Reanimated 2)</h1>
<p align="center">On the basis of react-native-maps I provide API for drawing polygons.</p>
<h6 align="center">Made with ❤️ by developer for developers</h6>
<br>
<p align="center">
<img src="http://img.shields.io/travis/badges/badgerbadgerbadger.svg?style=flat-square" alt="build"/>
<img src="https://img.shields.io/github/issues/dev-event/react-native-maps-draw" alt="build"/>
<img src="https://img.shields.io/bitbucket/pr-raw/dev-event/react-native-maps-draw" alt="build"/>
<img src="http://img.shields.io/:license-mit-blue.svg?style=flat-square" alt="build"/>
</p>
## Thanks
<p>Please, click on ⭐ button.</p>
## Table of Contents
- [Installation](#installation)
- [Features](#features)
- [Usage](#usage)
- [Props](#props)
- [Example](#example)
- [Contributing](#contributing)
- [Support](#support)
- [License](#license)
## Installation
<p>React Native (0.60+):</p>
```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<AnimatedAccordion>(null);
const [show, setShow] = useState<boolean>(false);
const handleContentTouchable = useCallback(() => {
return <Text style={styles.title}>Sample header</Text>
}, [])
const handleContent = useCallback(() => {
return <Text style={styles.message}>Sample content</Text>
}, [])
const handleOpenAccordion = useCallback(() => {
accordionRef.current?.openAccordion();
}, []);
return (
<>
<StatusBar barStyle="dark-content" />
<View style={styles.content}>
<TouchableOpacity style={styles.button} onPress={handleOpenAccordion}>
<Text>Open Accordion</Text>
</TouchableOpacity>
<AnimatedAccordion
ref={accordionRef}
sizeIcon={16}
styleChevron={styles.icon}
renderContent={handleContent}
onChangeState={(isShow) => setShow(isShow)}
styleTouchable={styles.touchable}
activeBackgroundIcon={theme.light_gray}
inactiveBackgroundIcon={theme.light_gray}
handleContentTouchable={handleContentTouchable}
/>
</View>
</>
);
};
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<ViewStyle> | |
| `styleTouchable` | Style Animated.View | NO | Animated.AnimateStyle<ViewStyle> | |
| `styleContainer` | Style View | NO | ViewStyle | |
| `onChangeState` | Callback onChange state Accordion(open/close) | NO | void | |
| `openAccordion` | Available at ref link | NO | void | |
<h2 id="built-with">Built With ❤️</h2>
- [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 <a href="#" target="_blank">effectwaater@gmail.com</a>
- Medium at <a href="https://medium.com/@effectwaaters" target="_blank">https://medium.com/@effectwaaters </a>
- Instagram at <a href="https://www.instagram.com/dev_event/" target="_blank">https://www.instagram.com/dev_event/ </a>
## License
[](http://badges.mit-license.org)
- **[MIT license](http://opensource.org/licenses/mit-license.php)**