{"id":4362,"url":"https://github.com/akshit5230/React-Native-Collapsible-Section","last_synced_at":"2025-07-31T13:30:54.600Z","repository":{"id":143906612,"uuid":"189148760","full_name":"akshit5230/React-Native-Collapsible-Section","owner":"akshit5230","description":"A collapsible section / section list with customizable section body and child body. Supports both iOS and Android.","archived":false,"fork":false,"pushed_at":"2019-06-03T14:11:47.000Z","size":7,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-08-15T00:20:09.767Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akshit5230.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-05-29T04:09:38.000Z","updated_at":"2023-03-09T05:52:30.000Z","dependencies_parsed_at":"2024-01-27T01:30:23.864Z","dependency_job_id":null,"html_url":"https://github.com/akshit5230/React-Native-Collapsible-Section","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshit5230%2FReact-Native-Collapsible-Section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshit5230%2FReact-Native-Collapsible-Section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshit5230%2FReact-Native-Collapsible-Section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshit5230%2FReact-Native-Collapsible-Section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akshit5230","download_url":"https://codeload.github.com/akshit5230/React-Native-Collapsible-Section/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228248559,"owners_count":17891447,"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":[],"created_at":"2024-01-05T20:17:09.537Z","updated_at":"2024-12-05T06:31:39.863Z","avatar_url":"https://github.com/akshit5230.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"# React-Native-Collapsible-Section\nA collapsible section / section list with customizable section body and child body. Supports both iOS and Android.\n\n## Installation\n\n`npm i --save rn-collapsible-section`\n\n## Usage\n\n### 1. Minimal Example\n\n```\n\u003cCollapsibleSection header={\n  \u003cView style={{\n    padding: 10,\n    justifyContent: 'center',\n  }}\u003e\n    \u003cText\u003eThis is header\u003c/Text\u003e\n  \u003c/View\u003e\n}\u003e\n  \u003cView\u003e\n    \u003cText\u003eThis is body\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/CollapsibleSection\u003e\n```\n\n### 2. Full Example\n\n```\nimport React from 'react';\nimport { View, Text } from 'react-native;\nimport CollapsibleSection from 'rn-collapsible-section';\n\nexport default class MyExample extends React.Component {\n  \n  render() {\n    return (\n      \u003cView style={{ padding: 10 }}\u003e\n        \u003cCollapsibleSection\n          header={\n            \u003cView\u003e\n              \u003cText\u003eThis is header/collapsed section title\u003c/Text\u003e\n            \u003c/View\u003e\n          }\n        \u003e\n          \u003cView\u003e\n            \u003cText\u003eThis is body seen when section is expanded\u003c/Text\u003e\n          \u003c/View\u003e\n        \u003c/CollapsibleSection\u003e\n      \u003c/View\u003e\n    )\n  }\n  \n}\n\n```\n\n### 3. Flatlist Example (Usage as expandable section list)\n\n```\nimport React from 'react';\nimport { View, Text, FlatList } from 'react-native;\nimport CollapsibleSection from 'rn-collapsible-section';\n\nconst favouriteMovies = [\n    'Mood of the Day',\n    'On your Wedding Day',\n    'Seducing Mr. Perfect',\n    'Whatcha wearing',\n    'Spell Bound',\n    '100 Days with Mr. Arrogant',\n    'Be with you',\n    'My Sassy Girl',\n    '200 Pounds Beauty',\n    'Cheese in Trap',\n    'Love 911'\n  ]\n\nexport default class MyExample extends React.Component {\n  \n  render() {\n    return (\n      \u003cView style={{ padding: 10 }}\u003e\n        {this.renderExpandableList()}\n      \u003c/View\u003e\n    )\n  }\n  \n  renderExpandableList() {\n    return(\n      \u003cFlatList\n        data={favouriteMovies}\n        renderItem={({item, index}) =\u003e (\n          this.renderCollapsibleItem(item)\n        )\n      /\u003e\n    )\n  }\n              \n  renderCollapsibleItem(item) {\n    return (\n      \u003cCollapsibleSection\n        header={\n          \u003cView\u003e\n            \u003cText\u003e{item}\u003c/Text\u003e\n          \u003c/View\u003e\n        }\n      \u003e\n        \u003cView\u003e\n          \u003cText\u003eDetails about the movie...\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/CollapsibleSection\u003e\n    )\n  }\n\n}\n\n```\n\n## Props\n| Name  | Usage | Example Value |\n| --- | --- | --- |\n| header | define the header / collapsed view / default view of the expandable view. On press expand or collapse | \u003cView /\u003e |\n\nThanks!\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakshit5230%2FReact-Native-Collapsible-Section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakshit5230%2FReact-Native-Collapsible-Section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakshit5230%2FReact-Native-Collapsible-Section/lists"}