{"id":21383011,"url":"https://github.com/animate-react-native/accordion","last_synced_at":"2025-04-05T10:07:12.390Z","repository":{"id":263838922,"uuid":"891530460","full_name":"animate-react-native/accordion","owner":"animate-react-native","description":"A React Native Accordion component, powered by React Native Reanimated layout animation that's capable of rendering and animating content that has a dynamic height.","archived":false,"fork":false,"pushed_at":"2025-01-22T19:56:32.000Z","size":1433,"stargazers_count":103,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T09:08:14.810Z","etag":null,"topics":["react-native","react-native-accordion","react-native-reanimated"],"latest_commit_sha":null,"homepage":"https://www.animatereactnative.com","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/animate-react-native.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2024-11-20T13:55:57.000Z","updated_at":"2025-03-09T09:25:14.000Z","dependencies_parsed_at":"2025-02-13T16:12:29.223Z","dependency_job_id":"0c422f07-7f62-4a8c-b092-8ff12d111467","html_url":"https://github.com/animate-react-native/accordion","commit_stats":null,"previous_names":["animate-react-native/accordion"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animate-react-native%2Faccordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animate-react-native%2Faccordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animate-react-native%2Faccordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animate-react-native%2Faccordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/animate-react-native","download_url":"https://codeload.github.com/animate-react-native/accordion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318744,"owners_count":20919484,"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","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":["react-native","react-native-accordion","react-native-reanimated"],"created_at":"2024-11-22T11:19:22.430Z","updated_at":"2025-04-05T10:07:12.369Z","avatar_url":"https://github.com/animate-react-native.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eReact Native Accordion\u003c/h1\u003e\n\nhttps://github.com/user-attachments/assets/3906847e-c609-4f85-b5e5-b2bb68cef901\n\n[![NPM Version](https://img.shields.io/npm/v/@animatereactnative/accordion.svg?style=flat\u0026color=black)](https://www.npmjs.org/package/@animatereactnative/accordion) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square\u0026logo=EXPO\u0026labelColor=f3f3f3\u0026logoColor=000)](https://expo.io/) [![npm](https://img.shields.io/npm/l/@animatereactnative/accordion?style=flat-square)](https://www.npmjs.com/package/@animatereactnative/accordion) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@animatereactnative/accordion) \u003ca href=\"https://twitter.com/mironcatalin\"\u003e\u003cimg src=\"https://img.shields.io/twitter/follow/mironcatalin?label=Follow @mironcatalin\u0026color=black\" alt=\"Follow Miron Catalin\"\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\nReact Native Accordion component, a cross-platform accordion component, powered by Reanimated, that's capable of displaying dynamic height content and animate the layout changes/transitions between Collapsable and Expandable states.\n\nIf you are going to use this component along with other components (as siblings), it is recommended to use `Accordion.Sibling` and wrap the Siblings with it. This is because the exposed `Sibling` component will use Layout animations as well so there are no layout shifts or sudden movements, keeping everything smooth.\n\n- 🔋 Powered by Reanimated\n- 📱 Works with Expo\n- ✅ Cross-platform (iOS, Android, Web - wip)\n- ⚡️ 60-120fps\n- 🪝 Works with any React Native element/component\n- 🎼 Composition ready\n- ⌨️ Written in TypeScript\n\n## Installation\n\n```sh\nnpm install @animatereactnative/accordion\n```\n\n\u003e Also, you need to install [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), and follow their installation instructions.\n\n## Usage\n\n```js\nimport { Accordion } from '@animatereactnative/accordion';\n\n// ...\n\nexport function Example() {\n  return (\n    \u003cAccordion.Accordion\u003e\n      \u003cAccordion.Header\u003e\n        \u003cText\u003eAnimateReactNative.com\u003c/Text\u003e\n        \u003cAccordion.HeaderIcon\u003e\n          \u003cChevronUp /\u003e\n        \u003c/Accordion.HeaderIcon\u003e\n      \u003c/Accordion.Header\u003e\n\n      \u003cAccordion.Collapsed\u003e\n        \u003cText\u003eVisible !expanded\u003c/Text\u003e\n      \u003c/Accordion.Collapsed\u003e\n      \u003cAccordion.Always\u003e\n        \u003cText\u003eAlways visible\u003c/Text\u003e\n      \u003c/Accordion.Always\u003e\n\n      \u003cAccordion.Expanded\u003e\n        \u003cText\u003eExpanded content\u003c/Text\u003e\n        {loading \u0026\u0026 \u003cActivityIndicator /\u003e}\n        {data \u0026 \u003cMyList data={data} /\u003e}\n      \u003c/Accordion.Expanded\u003e\n    \u003c/Accordion.Accordion\u003e\n  );\n}\n```\n\n## Props\n\n```\nAccordion = {\n  /**\n   * The main component that will handle the state of the accordion.\n   *\n   * @param isOpen boolean\n   * @param onChange (value: boolean) =\u003e void\n   */\n  Accordion\n  /**\n   * The header of the accordion.\n   */\n  Header,\n  /**\n   * The component that will wrap any children and it will apply a rotation to it.\n   *\n   * @param children\n   * @param rotation clockwise | counter-clockwise\n   */\n  HeaderIcon\n  /**\n   * This is the content that will be displayed when the accordion is open\n   */\n  Expanded,\n  /**\n   * This is the content that will be displayed when the accordion is closed\n   */\n  Collapsed,\n  /**\n   * This is the content that will always be displayed\n   */\n  Always,\n  /**\n   *\n   * This is a component that will add the layout transition to any\n   * sibling components. Useful when you are rendering other components\n   * that are not direct children of the Accordion component.\n   */\n  Sibling,\n};\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\n[MIT](./LICENSE)\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.animatereactnative.com\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://www.animatereactnative.com/animatereactnative_dark.svg\"\u003e\n      \u003cimg alt=\"AnimateReactNative.com - Premium and Custom React Native animations.\" src=\"https://www.animatereactnative.com/animatereactnative_logo.svg\" width=\"50%\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimate-react-native%2Faccordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanimate-react-native%2Faccordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimate-react-native%2Faccordion/lists"}