https://github.com/mehuljetani/react-native-custom-animated-accordion

A custom React Native component for creating an animated accordion with expandable content and smooth transitions.
https://github.com/mehuljetani/react-native-custom-animated-accordion

react-native react-native-accordion react-native-animated react-native-animation react-native-collapsible

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mehuljetani/react-native-custom-animated-accordion
• Owner: mehuljetani
• Created: 2024-09-16T09:08:18.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-27T04:08:37.000Z (about 2 months ago)
• Last Synced: 2024-10-01T16:54:33.440Z (about 1 month ago)
• Topics: react-native, react-native-accordion, react-native-animated, react-native-animation, react-native-collapsible
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-custom-animated-accordion
• Size: 1.75 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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:

```javascript

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

```

### or Using yarn:

```javascript

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

```javascript

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 (

    

      

        

          This is the content of the accordion 3.

        

      

    

  );

};

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](https://github.com/mehuljetani/react-native-custom-animated-accordion/issues).