https://github.com/marouanekadiri/accordion-collapse-react-native
React native Accordion/Collapse component, very good to use in toggles & show/hide content
https://github.com/marouanekadiri/accordion-collapse-react-native
accordion accordionlist collapsable collapse collapse-components expand expandable react react-native state-collapse
Last synced: about 1 year ago
JSON representation
React native Accordion/Collapse component, very good to use in toggles & show/hide content
- Host: GitHub
- URL: https://github.com/marouanekadiri/accordion-collapse-react-native
- Owner: marouanekadiri
- License: mit
- Created: 2018-02-06T01:54:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-08T23:13:15.000Z (over 3 years ago)
- Last Synced: 2025-03-29T05:05:30.880Z (about 1 year ago)
- Topics: accordion, accordionlist, collapsable, collapse, collapse-components, expand, expandable, react, react-native, state-collapse
- Language: JavaScript
- Homepage:
- Size: 2.34 MB
- Stars: 163
- Watchers: 1
- Forks: 25
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
  [](https://badge.fury.io/js/accordion-collapse-react-native)
# accordion-collapse-react-native
is a react native javascript component that allow you to show an accordion or a collapse.
## Installation
npm install --save accordion-collapse-react-native
## Usage
import {Collapse,CollapseHeader, CollapseBody, AccordionList} from 'accordion-collapse-react-native';
//Simple collapsable
Click here
Ta daa!
//Accordion List
item.key}
/>
Collapse Components are considered as View , so you can use all the props of the View Component like style.
## Demo
***Simple Collapse***
this is example is based on [native base list separator](https://docs.nativebase.io/Components.html#list-seperator-headref) combined with the Collapse Components.
import { View,Text } from 'react-native';
import { Collapse, CollapseHeader, CollapseBody } from "accordion-collapse-react-native";
import { Thumbnail, List, ListItem, Separator } from 'native-base';
FORWARD
Aaron Bennet
Claire Barclay
Kelso Brittany
FORWARD
Aaron Bennet
Claire Barclay
Kelso Brittany
***Simple Collapse inception***
import { View,Text } from 'react-native';
import {Collapse, CollapseHeader, CollapseBody} from "accordion-collapse-react-native";
import { Thumbnail } from 'native-base';
Name : Mohammed Ali Kley
Profession: Boxer
+1 310 346 0018
sample@sample.ma
***Accordion List***
import {AccordionList} from "accordion-collapse-react-native";
import { Separator } from 'native-base';
import { View, Text} from 'react-native';
this.state={
list:[
{
id:1,
title: 'Getting Started',
body: 'React native Accordion/Collapse component, very good to use in toggles & show/hide content'
},
{
id:2,
title: 'Components',
body: 'AccordionList,Collapse,CollapseHeader & CollapseBody'
}
],
}
_head(item){
return(
{item.title}
);
}
_body(item){
return (
{item.body}
);
}
render() {
return (
`${item.id}`}
/>
);
}
## Components
**CollapseHeader & CollapseBody**
Think about CollapseHeader and CollapseBody as a View that you can style it as you want.
When you touch the header it will show or hide the body.
**Collapse**
You need to wrap a CollapseHeader & a CollapseBody in the Collapse.
| Props Name | Default | Type | Description |
| :--: | :--: | :--: | :------------------------- |
| isExpanded | false | boolean | show the CollapseBody if true |
| disabled | false | boolean | disable the click on the collapse header if true |
| onToggle | ()=>undefined | Function(isExpanded:boolean) | onToggle is a function take in input a boolean value that contains the state of the Collapse (if collapsed->true) |
| handleLongPress | undefined | Function() | handles the onLongPress event when longPressing on the collapseHeader content |
| touchableOpacityProps | {} | Object | pass additional props to customize TouchableOpacity component
In case you want to use and change the state of the Collapse in the parent, You can use isExpanded & onToggle as an input & output to synchronise the parent collapse state & the child (Collapse) state.
***Example of use***
You can control & use the state collapse of the Collapse in you're component as shown down below:
import React, { Component } from 'react';
import{ View,Text,Button } from 'react-native';
import {Collapse, CollapseHeader, CollapseBody} from "accordion-collapse-react-native";
class Example extends Component<>{
constructor(props){
super(props);
this.state = {
expanded: false, //do not show the body by default
}
}
render(){
return (
this.setState({expanded: !this.state.expanded})}
/>
this.setState({expanded: isExpanded})}>
Click here
WHoooHo!
);
}
}
**AccordionList**
AccordionList components allow you to show an accordion with list of sections (head&body)
It's based on FlatList. Which means all the props related to FlatList are supported.
| Props Name | Default | Type | Description |
| :--: | :----- | :--: | :------------------------- |
| list or data | [] | Array | list of items that represents sections |
| header | (item, index, isExpanded)=>undefined | Function | a function that take as input an item of the list and output the render you want in the section header |
| body | (item, index, isExpanded)=>undefined | Function | a function that take as input an item of the list and output the render you want in the section header |
| onToggle | (keyExtractor(item, index) or index, index, isExpanded) => undefined | Function | a function that as input the index or the respective value extracted from the passed keyExtractor of the toggled item |
| expandedKey | undefined | Any | The key of the item that should be by default expanded |
| expandedIndex | undefined | number | The index of the item that should be by default expanded. If the `expandedKey` prop is defined this will be ignored |
| isDisabled | (item, index) => undefined | Function | Function that return a boolean indicating if the indicated element is disabled on the accordion |