react-native expo react-native-reanimatedv2 accordion expanded animated collapsible sections slider

React Native Accordion (Support Reanimated > 2.0 )

Current Version Reanimated 2.4.1

Made with ❤️ by developer for developers

Thanks

Please, click on ⭐ button.

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

🎉 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

About

Animated collapsible component for React Native, good for accordions (reanimated v2), toggles 🧬

https://www.npmjs.com/package/@dev-event/react-native-accordion