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
• Features
• Usage
• Props
• Example
• Contributing
• Support
• License

Installation

React Native (0.60+):

$ 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

Built With ❤️

• 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 effectwaater@gmail.com
• Medium at https://medium.com/@effectwaaters
• Instagram at https://www.instagram.com/dev_event/

License

• MIT license