react-native-custom-animated-accordion

A custom React Native component for creating an animated accordion with expandable content and smooth transitions.

Installation

Install the package using either npm or yarn:

Using npm:

npm install react-native-custom-animated-accordion react-native-reanimated

or Using yarn:

yarn add react-native-custom-animated-accordion react-native-reanimated

Usage

To implement the Accordion component in your React Native project, follow the example below:

Import the Component

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import Accordion from "react-native-custom-animated-accordion";
import ICONS from "./path/to/icons"; // Adjust the path as needed

const App = () => {
  return (
    <View style={styles.container}>
      <Accordion
        maxHeight={90}
        title="Custom Accordion 3"
        iconSourceOpen={ICONS.plus}
        bodyStyle={styles.customBody}
        iconStyle={styles.customImage}
        iconSourceClosed={ICONS.minus}
        titleStyle={styles.customTitle}
        headerStyle={styles.customHeader}
        iconTextStyle={styles.customIconText}
        iconViewStyle={styles.customIconView}
        containerStyle={styles.customContainerStyle}
      >
        <Text style={{ padding: 16, color: "#004d40" }}>
          This is the content of the accordion 3.
        </Text>
      </Accordion>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderRadius: 8,
    marginVertical: 8,
    overflow: "hidden",
    borderColor: "#ddd",
  },
  customBody: {
    backgroundColor: "#f0f0f0",
  },
  customImage: {
    width: 20,
    height: 20,
  },
  customTitle: {
    color: "#333",
    fontSize: 18,
  },
  customHeader: {
    backgroundColor: "#e0e0e0",
  },
  customIconText: {
    fontSize: 16,
    color: "#333",
  },
  customIconView: {
    padding: 10,
  },
  customContainerStyle: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 8,
  },
});

export default App;

Example

Here is an example of how to use the Accordion component:

Props

Below is a detailed explanation of all the props used in the Accordion component.

Props

| Prop | Type | Default | Description | | ------------------ | ----------------- | ---------- | ----------------------------------------------------------- | | title | string | "" | The text to display as the accordion header. | | maxHeight | number | 100 | Maximum height of the accordion when expanded. | | rotateEnd | string | '180deg' | Rotation angle when the accordion is fully opened. | | rotateStart | string | '0deg' | Rotation angle when the accordion is closed. | | bodyStyle | ViewStyle | {} | Custom styles for the accordion body container. | | iconStyle | ViewStyle | {} | Custom styles for the icon image in the accordion header. | | titleStyle | TextStyle | {} | Custom styles for the title text in the accordion header. | | iconSourceOpen | string | null | The image source for the icon when the accordion is opened. | | headerStyle | ViewStyle | {} | Custom styles for the accordion header. | | iconSourceClosed | string | null | The image source for the icon when the accordion is closed. | | iconViewStyle | ViewStyle | {} | Custom styles for the view containing the icon. | | containerStyle | ViewStyle | {} | Custom styles for the accordion container. | | children | React.ReactNode | null | Content to be rendered inside the accordion when expanded. |

Usage Example

License

This project is licensed under the MIT License.

Contact

For questions or issues, please visit the GitHub issues page.