{"id":25915934,"url":"https://github.com/marouanekadiri/accordion-collapse-react-native","last_synced_at":"2025-04-05T06:07:03.462Z","repository":{"id":29357770,"uuid":"120387086","full_name":"marouanekadiri/Accordion-Collapse-react-native","owner":"marouanekadiri","description":"React native Accordion/Collapse component, very good to use in toggles \u0026 show/hide content","archived":false,"fork":false,"pushed_at":"2023-02-08T23:13:15.000Z","size":2453,"stargazers_count":163,"open_issues_count":13,"forks_count":25,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T05:05:30.880Z","etag":null,"topics":["accordion","accordionlist","collapsable","collapse","collapse-components","expand","expandable","react","react-native","state-collapse"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/marouanekadiri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2018-02-06T01:54:32.000Z","updated_at":"2025-03-28T18:48:40.000Z","dependencies_parsed_at":"2024-06-18T13:58:47.189Z","dependency_job_id":"53ecf5fd-e8da-4a1d-9ab3-5e7fe004aec7","html_url":"https://github.com/marouanekadiri/Accordion-Collapse-react-native","commit_stats":{"total_commits":125,"total_committers":13,"mean_commits":9.615384615384615,"dds":0.504,"last_synced_commit":"069fca17aff5db0da18a3e9510b0ef2792028252"},"previous_names":["marouanekadiri/accordion"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marouanekadiri%2FAccordion-Collapse-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marouanekadiri%2FAccordion-Collapse-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marouanekadiri%2FAccordion-Collapse-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marouanekadiri%2FAccordion-Collapse-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marouanekadiri","download_url":"https://codeload.github.com/marouanekadiri/Accordion-Collapse-react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294536,"owners_count":20915340,"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":["accordion","accordionlist","collapsable","collapse","collapse-components","expand","expandable","react","react-native","state-collapse"],"created_at":"2025-03-03T12:18:33.919Z","updated_at":"2025-04-05T06:07:03.442Z","avatar_url":"https://github.com/marouanekadiri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://github.com/marouanekadiri/Accordion-Collapse-react-native/workflows/Test/badge.svg) ![](https://github.com/marouanekadiri/Accordion-Collapse-react-native/workflows/Publish/badge.svg) [![npm version](https://badge.fury.io/js/accordion-collapse-react-native.svg)](https://badge.fury.io/js/accordion-collapse-react-native)\n# accordion-collapse-react-native\n\n is a react native javascript component that allow you to show an accordion or a collapse.\n\n## Installation\n\n    npm install --save accordion-collapse-react-native\n    \n    \n## Usage\n\n    import {Collapse,CollapseHeader, CollapseBody, AccordionList} from 'accordion-collapse-react-native';\n\n    //Simple collapsable\n    \u003cCollapse\u003e\n\t    \u003cCollapseHeader\u003e\n\t      \u003cView\u003e\n\t        \u003cText\u003eClick here\u003c/Text\u003e\n\t      \u003c/View\u003e\n\t    \u003c/CollapseHeader\u003e\n\t    \u003cCollapseBody\u003e\n\t      \u003cText\u003eTa daa!\u003c/Text\u003e\n\t    \u003c/CollapseBody\u003e\n\t\u003c/Collapse\u003e\n    \n    //Accordion List \n    \u003cAccordionList\n            list={this.state.list}\n            header={this._head}\n            body={this._body}\n            keyExtractor={item =\u003e item.key}\n          /\u003e\n\nCollapse Components are considered as View , so you can use all the props of the View Component like style.\n## Demo \n\n\n\n***Simple Collapse***\n\n\n![example in a list](https://user-images.githubusercontent.com/15144618/35876403-135c6954-0b6a-11e8-96c2-681cb1091441.gif)\n\nthis is example is based on [native base list separator](https://docs.nativebase.io/Components.html#list-seperator-headref) combined with the Collapse Components.\n\n    import {  View,Text } from 'react-native';\n    import { Collapse, CollapseHeader, CollapseBody } from \"accordion-collapse-react-native\";\n    import { Thumbnail, List, ListItem, Separator } from 'native-base';\n    \n    \u003cView\u003e\n        \u003cCollapse\u003e\n          \u003cCollapseHeader\u003e\n            \u003cSeparator bordered\u003e\n              \u003cText\u003eFORWARD\u003c/Text\u003e\n            \u003c/Separator\u003e\n          \u003c/CollapseHeader\u003e\n          \u003cCollapseBody\u003e\n            \u003cListItem \u003e\n              \u003cText\u003eAaron Bennet\u003c/Text\u003e\n            \u003c/ListItem\u003e\n            \u003cListItem\u003e\n              \u003cText\u003eClaire Barclay\u003c/Text\u003e\n            \u003c/ListItem\u003e\n            \u003cListItem last\u003e\n              \u003cText\u003eKelso Brittany\u003c/Text\u003e\n            \u003c/ListItem\u003e\n          \u003c/CollapseBody\u003e\n        \u003c/Collapse\u003e\n        \u003cCollapse\u003e\n          \u003cCollapseHeader\u003e\n            \u003cSeparator bordered\u003e\n              \u003cText\u003eFORWARD\u003c/Text\u003e\n            \u003c/Separator\u003e\n          \u003c/CollapseHeader\u003e\n          \u003cCollapseBody\u003e\n            \u003cListItem \u003e\n              \u003cText\u003eAaron Bennet\u003c/Text\u003e\n            \u003c/ListItem\u003e\n            \u003cListItem\u003e\n              \u003cText\u003eClaire Barclay\u003c/Text\u003e\n            \u003c/ListItem\u003e\n            \u003cListItem last\u003e\n              \u003cText\u003eKelso Brittany\u003c/Text\u003e\n            \u003c/ListItem\u003e\n          \u003c/CollapseBody\u003e\n        \u003c/Collapse\u003e\n      \u003c/View\u003e\n\n\n\n***Simple Collapse inception***\n\n\n![enter image description here](https://user-images.githubusercontent.com/15144618/35877544-80db2fb2-0b6d-11e8-88c3-ecb9bb24ca28.gif)\n\n      import { View,Text } from 'react-native';\n      import {Collapse, CollapseHeader, CollapseBody} from \"accordion-collapse-react-native\";\n      import { Thumbnail } from 'native-base';\n    \n    \u003cView\u003e\n        \u003cCollapse style={{borderBottomWidth:1,borderTopWidth:1}}\u003e\n          \u003cCollapseHeader style={{flexDirection:'row',alignItems:'center',padding:10,backgroundColor:'#E6E6E6'}}\u003e\n            \u003cView style={{width:'25%',alignItems:'center'}}\u003e\n              \u003cThumbnail source={{uri: 'https://www.biography.com/.image/t_share/MTQ3NjYxMzk4NjkwNzY4NDkz/muhammad_ali_photo_by_stanley_weston_archive_photos_getty_482857506.jpg'}} /\u003e\n            \u003c/View\u003e\n            \u003cView style={{width:'60%'}}\u003e\n              \u003cText\u003eName : Mohammed Ali Kley\u003c/Text\u003e\n              \u003cText\u003eProfession: Boxer\u003c/Text\u003e\n            \u003c/View\u003e\n          \u003c/CollapseHeader\u003e\n          \u003cCollapseBody style={{alignItems:'center',justifyContent:'center',flexDirection:'row',backgroundColor:'#EDEDED'}}\u003e\n            \u003cCollapse style={{flexDirection:'row'}}\u003e\n              \u003cCollapseHeader\u003e\n                \u003cThumbnail source={{uri: 'https://cdn3.iconfinder.com/data/icons/trico-circles-solid/24/Circle-Solid-Phone-512.png'}} /\u003e\n              \u003c/CollapseHeader\u003e\n              \u003cCollapseBody style={{alignItems:'center',justifyContent:'center',padding:10}}\u003e\n                \u003cText\u003e+1 310 346 0018\u003c/Text\u003e\n              \u003c/CollapseBody\u003e\n            \u003c/Collapse\u003e\n            \u003cCollapse style={{flexDirection:'row'}}\u003e\n              \u003cCollapseHeader\u003e\n                \u003cThumbnail source={{uri: 'https://d30y9cdsu7xlg0.cloudfront.net/png/1674-200.png'}} /\u003e\n              \u003c/CollapseHeader\u003e\n              \u003cCollapseBody style={{alignItems:'center',justifyContent:'center',padding:10}}\u003e\n                \u003cText\u003esample@sample.ma\u003c/Text\u003e\n              \u003c/CollapseBody\u003e\n            \u003c/Collapse\u003e\n          \u003c/CollapseBody\u003e\n        \u003c/Collapse\u003e\n      \u003c/View\u003e\n\n\n\n***Accordion List***\n\n\n\n![enter image description here](https://user-images.githubusercontent.com/15144618/36063134-b473fd26-0e70-11e8-969d-62d79b4acdc4.gif)\n\n    \n    import {AccordionList} from \"accordion-collapse-react-native\";\n    import { Separator } from 'native-base';\n    import { View, Text} from 'react-native';\n    \n    this.state={\n      list:[\n          {\n            id:1,\n            title: 'Getting Started',\n            body: 'React native Accordion/Collapse component, very good to use in toggles \u0026 show/hide content'\n          },\n          {\n            id:2,\n            title: 'Components',\n            body: 'AccordionList,Collapse,CollapseHeader \u0026 CollapseBody'\n          }\n          ],\n    }\n    \n    _head(item){\n\t    return(\n\t        \u003cSeparator bordered style={{alignItems:'center'}}\u003e\n\t          \u003cText\u003e{item.title}\u003c/Text\u003e\n\t        \u003c/Separator\u003e\n\t    );\n    }\n    \n    _body(item){\n\t    return (\n\t        \u003cView style={{padding:10}}\u003e\n\t          \u003cText style={{textAlign:'center'}}\u003e{item.body}\u003c/Text\u003e\n\t        \u003c/View\u003e\n\t    );\n    }\n    \n    render() {\n\t    return (\n\t          \u003cAccordionList\n\t            list={this.state.list}\n\t            header={this._head}\n\t            body={this._body}\n                keyExtractor={item =\u003e `${item.id}`}\n\t          /\u003e\n\t    );\n    }\n\n\n## Components\n\n**CollapseHeader \u0026 CollapseBody**\nThink about CollapseHeader and CollapseBody as a View that you can style it as you want. \nWhen you touch the header it will show or hide the body. \n\n**Collapse**\nYou need to wrap a CollapseHeader \u0026 a CollapseBody in the Collapse.\n\n| Props Name | Default | Type | Description |\n| :--: | :--: | :--: | :------------------------- |\n| isExpanded | false | boolean | show the CollapseBody if true |\n| disabled | false | boolean | disable the click on the collapse header if true |\n| onToggle | ()=\u003eundefined | Function(isExpanded:boolean) | onToggle is a function take in input a boolean value that contains the state of the Collapse (if collapsed-\u003etrue) |\n| handleLongPress | undefined | Function() | handles the onLongPress event when longPressing on the collapseHeader content |\n| touchableOpacityProps | {} | Object | pass additional props to customize TouchableOpacity component\n\nIn case you want to use and change the state of the Collapse in the parent, You can use isExpanded \u0026 onToggle as an input \u0026 output to synchronise the parent collapse state \u0026 the child (Collapse) state. \n\n***Example of use***\n   \n   You can control \u0026 use the state collapse of the Collapse in you're component as shown down below:\n    \n      import React, { Component } from 'react';\n      import{ View,Text,Button } from 'react-native';\n      import {Collapse, CollapseHeader, CollapseBody} from \"accordion-collapse-react-native\";\n      \n    class Example extends Component\u003c\u003e{ \n    constructor(props){\n\t    super(props);\n\t    this.state = {\n\t      expanded: false, //do not show the body by default\n\t    }\n    }\n    render(){\n\t    return (\n\t    \u003cView\u003e\n\t\t    \u003cButton \n\t\t\t    title={\"Click here too\"} \n\t\t\t    onPress={()=\u003ethis.setState({expanded: !this.state.expanded})}\n\t\t    /\u003e\n\t        \u003cCollapse \n\t\t        isExpanded={this.state.expanded} \n\t\t        onToggle={(isExpanded)=\u003ethis.setState({expanded: isExpanded})}\u003e\n\t          \u003cCollapseHeader\u003e\n\t            \u003cText\u003eClick here\u003c/Text\u003e\n\t          \u003c/CollapseHeader\u003e\n\t          \u003cCollapseBody\u003e\n\t            \u003cText\u003eWHoooHo!\u003c/Text\u003e\n\t          \u003c/CollapseBody\u003e\n\t        \u003c/Collapse\u003e\n\t      \u003c/View\u003e\n\t      );\n\t      }\n    }\n\n\n\n**AccordionList**\n\nAccordionList components allow you to show an accordion with list of sections (head\u0026body)\n\nIt's based on FlatList. Which means all the props related to FlatList are supported.\n\n| Props Name | Default | Type | Description |\n| :--: | :----- | :--: | :------------------------- |\n| list or data | [] | Array | list of items that represents sections |\n| header | (item, index, isExpanded)=\u003eundefined | Function | a function that take as input an item of the list and output the render you want in the section header |\n| body | (item, index, isExpanded)=\u003eundefined | Function | a function that take as input an item of the list and output the render you want in the section header |\n| onToggle | (keyExtractor(item, index) or index, index, isExpanded) =\u003e undefined | Function | a function that as input the index or the respective value extracted from the passed keyExtractor of the toggled item |\n| expandedKey | undefined | Any | The key of the item that should be by default expanded |\n| expandedIndex | undefined | number | The index of the item that should be by default expanded. If the `expandedKey` prop is defined this will be ignored |\n| isDisabled | (item, index) =\u003e undefined | Function | Function that return a boolean indicating if the indicated element is disabled on the accordion |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarouanekadiri%2Faccordion-collapse-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarouanekadiri%2Faccordion-collapse-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarouanekadiri%2Faccordion-collapse-react-native/lists"}