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

Usage Example

License

This project is licensed under the MIT License.

Contact

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