2.0.4 • Published 3 years ago
@dev-event/react-native-accordion v2.0.4
Thanks
Table of Contents
Installation
$ 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
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 | 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.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 |
🎉 Example
Checkout the example here.
✌️ 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 effectwaater@gmail.com
- Medium at https://medium.com/@effectwaaters
- Instagram at https://www.instagram.com/dev_event/