A performant interactive collapsed view with fully configurable options
npm install @dev-event/react-native-accordion
On the basis of react-native-maps I provide API for drawing polygons.
Please, click on ⭐ button.
- Installation
- Features
- Usage
- Props
- Example
- Contributing
- Support
- License
React Native (0.60+):
``bash`
$ yarn add @dev-event/react-native-accordion
- 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);
For more complete example open 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
const [show, setShow] = useState
const handleContentTouchable = useCallback(() => {
return
}, [])
const handleContent = useCallback(() => {
return
}, [])
const handleOpenAccordion = useCallback(() => {
accordionRef.current?.openAccordion();
}, []);
return (
<>
sizeIcon={16}
styleChevron={styles.icon}
renderContent={handleContent}
onChangeState={(isShow) => 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,
},
});
`
| 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 | 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. | NO | Animated.WithTimingConfig | |configCollapsed
| | Configuration withTiming. | NO | Animated.WithTimingConfig | |styleChevron
| | Style Animated.View | NO | Animated.AnimateStylestyleTouchable
| | Style Animated.View | NO | Animated.AnimateStylestyleContainer
| | Style View | NO | ViewStyle | |onChangeState
| | Callback onChange state Accordion(open/close) | NO | void | |openAccordion` | Available at ref link | NO | void | |
|
- react-native-reanimated
- react-native-redash
- react-native-svg
- @react-native-community/bob
Checkout the example here.
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
Reach out to me at one of the following places!
- E-mail effectwaater@gmail.com
- Medium at https://medium.com/@effectwaaters
- Instagram at https://www.instagram.com/dev_event/
