Skip to content

Latest commit

 

History

History
200 lines (152 loc) · 10.9 KB

README.md

File metadata and controls

200 lines (152 loc) · 10.9 KB
Raw
Accordion Animated

React Native Accordion (Reanimated 2)

On the basis of react-native-maps I provide API for drawing polygons.

Made with ❤️ by developer for developers

build build build build

Thanks

Please, click on ⭐ button.

Table of Contents

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
TouchableComponent Header touchable wrapper NO TouchableWithoutFeedback

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!

License

License