{"id":26011282,"url":"https://github.com/dev-chief/react-native-accordion","last_synced_at":"2025-08-02T00:07:55.580Z","repository":{"id":40259498,"uuid":"363072241","full_name":"dev-chief/react-native-accordion","owner":"dev-chief","description":"Animated collapsible component for React Native, good for accordions (reanimated v2), toggles 🧬","archived":false,"fork":false,"pushed_at":"2023-06-28T21:12:04.000Z","size":6824,"stargazers_count":64,"open_issues_count":3,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-23T08:40:43.537Z","etag":null,"topics":["accordion","animated","collapsible","expanded","expo","react-native","react-native-reanimatedv2","sections","slider"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@dev-event/react-native-accordion","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-chief.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-30T08:11:02.000Z","updated_at":"2025-02-27T08:22:27.000Z","dependencies_parsed_at":"2024-06-21T17:32:16.600Z","dependency_job_id":null,"html_url":"https://github.com/dev-chief/react-native-accordion","commit_stats":{"total_commits":95,"total_committers":4,"mean_commits":23.75,"dds":0.2947368421052632,"last_synced_commit":"55c32ebc0f72e61502fab25f65885a5a450b930a"},"previous_names":["dev-chief/react-native-accordion","dev-event/react-native-accordion"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/dev-chief/react-native-accordion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-accordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-accordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-accordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-accordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-chief","download_url":"https://codeload.github.com/dev-chief/react-native-accordion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-accordion/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268315948,"owners_count":24231059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","animated","collapsible","expanded","expo","react-native","react-native-reanimatedv2","sections","slider"],"created_at":"2025-03-05T23:17:56.591Z","updated_at":"2025-08-02T00:07:55.504Z","avatar_url":"https://github.com/dev-chief.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./gif/giphy.gif\" height=\"900\" width=\"350\" title=\"Accordion Animated\"   alt=\"Accordion Animated\" style=\"box-shadow: 0 20px 30px 3px rgba(9, 9, 16, 0.2);\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003ch1 align=\"center\"\u003eReact Native Accordion (Support Reanimated \u003e 2.0 )\u003c/h1\u003e\n\u003cp align=\"center\"\u003eCurrent Version Reanimated 2.4.1\u003c/p\u003e\n\u003ch6 align=\"center\"\u003eMade with ❤️ by developer for developers\u003c/h6\u003e\n\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"http://img.shields.io/travis/badges/badgerbadgerbadger.svg?style=flat-square\" alt=\"build\"/\u003e\n\u003cimg src=\"https://img.shields.io/github/issues/dev-event/react-native-maps-draw\" alt=\"build\"/\u003e\n\u003cimg src=\"https://img.shields.io/bitbucket/pr-raw/dev-event/react-native-maps-draw\" alt=\"build\"/\u003e\n\u003cimg src=\"http://img.shields.io/:license-mit-blue.svg?style=flat-square\" alt=\"build\"/\u003e\n\u003c/p\u003e\n\n\n\n## Thanks\n\u003cp\u003ePlease, click on ⭐ button.\u003c/p\u003e\n\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Features](#features)\n- [Usage](#usage)\n- [Props](#props)\n- [Example](#example)\n- [Contributing](#contributing)\n- [Support](#support)\n- [License](#license)\n\n\n## Installation\n\n\u003cp\u003eReact Native (0.60+):\u003c/p\u003e\n\n```bash\n$ yarn add @dev-event/react-native-accordion\n```\n\n\n\n\n## Features\n\n- Supported Reanimated 2;\n- Fully supported on React Native and Expo;\n- Simple API but fully customizable;\n- Arrow animation indicating whether the collapsible is expanded or not;\n- Property which unmount the collapsible when it is not expanded(very useful for performance! use wisely(Beta);\n\n## Usage\n\nFor more complete example open [App.tsx](https://github.com/dev-event/react-native-accordion/blob/main/example/src/App.tsx)\n\n```tsx\nimport React, { useState, useRef, useCallback } from \"react\";\nimport { StyleSheet, View, Text,  StatusBar} from \"react-native\";\nimport AnimatedAccordion from \"@dev-event/react-native-accordion\";\n\n\nconst App: React.FC = () =\u003e {\n  const accordionRef = useRef\u003cAnimatedAccordion\u003e(null);\n\n  const [show, setShow] = useState\u003cboolean\u003e(false);\n\n  const handleContentTouchable = useCallback(() =\u003e {\n    return \u003cText style={styles.title}\u003eSample header\u003c/Text\u003e\n  }, [])\n\n  const handleContent = useCallback(() =\u003e {\n    return \u003cText style={styles.message}\u003eSample content\u003c/Text\u003e\n  }, [])\n\n  const handleOpenAccordion = useCallback(() =\u003e {\n    accordionRef.current?.openAccordion();\n  }, []);\n\n  return (\n    \u003c\u003e\n      \u003cStatusBar barStyle=\"dark-content\" /\u003e\n      \u003cView style={styles.content}\u003e\n          \u003cTouchableOpacity style={styles.button} onPress={handleOpenAccordion}\u003e\n            \u003cText\u003eOpen Accordion\u003c/Text\u003e\n          \u003c/TouchableOpacity\u003e\n          \u003cAnimatedAccordion\n            ref={accordionRef}\n            sizeIcon={16}\n            styleChevron={styles.icon}\n            renderContent={handleContent}\n            onChangeState={(isShow) =\u003e setShow(isShow)}\n            styleTouchable={styles.touchable}\n            activeBackgroundIcon={theme.light_gray}\n            inactiveBackgroundIcon={theme.light_gray}\n            handleContentTouchable={handleContentTouchable}\n          /\u003e\n      \u003c/View\u003e\n    \u003c/\u003e\n  );\n};\n\n\nconst styles = StyleSheet.create({\n  content:{\n    flex: 1,\n    backgroundColor: \"#FFFFFF\"\n  },\n  touchable: {\n    backgroundColor: '#181829',\n    height: 50,\n  },\n  title: {\n    fontSize: 14,\n    color: '#FFFFFF',\n    fontWeight: '500',\n  },\n  message: {\n    fontSize: 16,\n    color: '#FFFFFF',\n    fontWeight: '500',\n  },\n  icon: {\n    height: 24,\n    width: 24,\n  },\n  button: {\n    padding: 16,\n  },\n});\n\n```\n\n## Props\n\n| name                         | description                                                                                                   | required | type                                                | default |\n| ---------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------- | ------- |\n| `ref`                        | Ref to get access to the Accordion View                                                                       | NO       | ref                                                 |         |\n| `isArrow`                    | If set to false the arrow indicating whether the collapsible-view is expanded or not will not be displayed.   | NO       | boolean                                             | true    |\n| `disabled`                   | Enabled/disabled of clicks header(with arrow)                                                                 | NO       | boolean                                             | false   |\n| `initExpand`                 | If true then the collapsible will be expanded on mounting content(For example: with api)                      | NO       | boolean                                             | false   |\n| `colorIcon`                  | Color tint icon arrow                                                                                         | NO       | string                                              | #16182B |\n| `sizeIcon`                   | Size icon arrow                                                                                               | NO       | number                                              | 16      |\n| `otherProperty`              | Configuration [`TouchableWithoutFeedback`](https://reactnative.dev/docs/touchablewithoutfeedback)             | NO       | ViewProps                                           |         |\n| `isStatusFetching`           | Displays an indicator if the content is loaded from the API.                                                  | NO       | boolean                                             | false   |\n| `initialMountedContent`      | Start mounted content (Memory optimization)                                                                   | YES      | boolean                                             | false   |\n| `isUnmountedContent`         | if true then the collapsible will unmount when closing animation ends. (Memory optimization)                  | NO       | boolean                                             | false   |\n| `activeBackgroundIcon`       | Expanded background color arrow                                                                               | NO       | string                                              | #E5f6FF |\n| `inactiveBackgroundIcon`     | InExpanded background color arrow                                                                             | NO       | string                                              | #FFF0E4 |\n| `contentHeight`              | Default height content (optimization)                                                                         | NO       | number                                              | 0       |\n| `handleIcon`                 | Render custom icon                                                                                            | NO       | JSX.Element                                         |         |\n| `onAnimatedEndExpanded`      | Callback closed Accordion           | NO      | void                                                          | NO       |                                                     |         |\n| `onAnimatedEndCollapsed`     | Callback opened Accordion                                                                                     | NO       | void                                                |         |\n| `handleCustomTouchable`      | Render custom header                                                                                          | NO       | boolean                                             | false   |\n| `handleContentTouchable`     | Render content header                                                                                         | NO       | JSX.Element                                         |         |\n| `handleIndicatorFetching`    | Render JSX.Element(Progress).  Default - ActivityIndicator                                                    | NO       | JSX.Element                                         |         |\n| `renderContent`              | Render content                                                                                                | NO       | JSX.Element                                         |         |\n| `configExpanded`             | Configuration [`withTiming`](https://docs.swmansion.com/react-native-reanimated/docs/api/withTiming).         | NO       | Animated.WithTimingConfig                           |         |\n| `configCollapsed`            | Configuration [`withTiming`](https://docs.swmansion.com/react-native-reanimated/docs/api/withTiming).         | NO       | Animated.WithTimingConfig                           |         |\n| `styleChevron`               | Style Animated.View                                                                                           | NO       | Animated.AnimateStyle\u003cViewStyle\u003e                    |         |\n| `styleTouchable`             | Style Animated.View                                                                                           | NO       | Animated.AnimateStyle\u003cViewStyle\u003e                    |         |\n| `styleContainer`             | Style View                                                                                                    | NO       | ViewStyle                                           |         |\n| `onChangeState`              | Callback onChange state Accordion(open/close)                                                                 | NO       | void                                                |         |\n| `openAccordion`              | Available at ref link                                                                                         | NO       | void                                                |         |\n\n\u003ch2 id=\"built-with\"\u003eBuilt With ❤️\u003c/h2\u003e\n\n- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)\n- [react-native-redash](https://github.com/wcandillon/react-native-redash)\n- [react-native-svg](https://github.com/react-native-community/react-native-svg)\n- [@react-native-community/bob](https://github.com/react-native-community/bob)\n\n\n\n## 🎉 Example\n\nCheckout the example [here](https://github.com/dev-event/react-native-accordion/tree/main/example/src).\n\n## ✌️ Contributing\n\nPull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.\n\n## Author\n\nReach out to me at one of the following places!\n\n- E-mail \u003ca href=\"#\" target=\"_blank\"\u003eeffectwaater@gmail.com\u003c/a\u003e\n- Medium at \u003ca href=\"https://medium.com/@effectwaaters\" target=\"_blank\"\u003ehttps://medium.com/@effectwaaters \u003c/a\u003e\n- Instagram at \u003ca href=\"https://www.instagram.com/dev_event/\" target=\"_blank\"\u003ehttps://www.instagram.com/dev_event/ \u003c/a\u003e\n\n\n## License\n\n[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\n- **[MIT license](http://opensource.org/licenses/mit-license.php)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-chief%2Freact-native-accordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-chief%2Freact-native-accordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-chief%2Freact-native-accordion/lists"}