Thanks

Table of Contents

• Installation
• Features
• Usage
• Props
• Example
• Contributing
• Support
• License

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 | |

• react-native-reanimated
• react-native-redash
• react-native-svg
• @react-native-community/bob

🎉 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 [email protected]
• Medium at https://medium.com/@effectwaaters
• Instagram at https://www.instagram.com/dev_event/

License

• MIT license