accordion-collapse-react-native
Version:
  [ • 9.63 kB
Markdown
  [](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
<Collapse>
<CollapseHeader>
<View>
<Text>Click here</Text>
</View>
</CollapseHeader>
<CollapseBody>
<Text>Ta daa!</Text>
</CollapseBody>
</Collapse>
//Accordion List
<AccordionList
list={this.state.list}
header={this._head}
body={this._body}
keyExtractor={item => 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';
<View>
<Collapse>
<CollapseHeader>
<Separator bordered>
<Text>FORWARD</Text>
</Separator>
</CollapseHeader>
<CollapseBody>
<ListItem >
<Text>Aaron Bennet</Text>
</ListItem>
<ListItem>
<Text>Claire Barclay</Text>
</ListItem>
<ListItem last>
<Text>Kelso Brittany</Text>
</ListItem>
</CollapseBody>
</Collapse>
<Collapse>
<CollapseHeader>
<Separator bordered>
<Text>FORWARD</Text>
</Separator>
</CollapseHeader>
<CollapseBody>
<ListItem >
<Text>Aaron Bennet</Text>
</ListItem>
<ListItem>
<Text>Claire Barclay</Text>
</ListItem>
<ListItem last>
<Text>Kelso Brittany</Text>
</ListItem>
</CollapseBody>
</Collapse>
</View>
***Simple Collapse inception***
import { View,Text } from 'react-native';
import {Collapse, CollapseHeader, CollapseBody} from "accordion-collapse-react-native";
import { Thumbnail } from 'native-base';
<View>
<Collapse style={{borderBottomWidth:1,borderTopWidth:1}}>
<CollapseHeader style={{flexDirection:'row',alignItems:'center',padding:10,backgroundColor:'#E6E6E6'}}>
<View style={{width:'25%',alignItems:'center'}}>
<Thumbnail source={{uri: 'https://www.biography.com/.image/t_share/MTQ3NjYxMzk4NjkwNzY4NDkz/muhammad_ali_photo_by_stanley_weston_archive_photos_getty_482857506.jpg'}} />
</View>
<View style={{width:'60%'}}>
<Text>Name : Mohammed Ali Kley</Text>
<Text>Profession: Boxer</Text>
</View>
</CollapseHeader>
<CollapseBody style={{alignItems:'center',justifyContent:'center',flexDirection:'row',backgroundColor:'#EDEDED'}}>
<Collapse style={{flexDirection:'row'}}>
<CollapseHeader>
<Thumbnail source={{uri: 'https://cdn3.iconfinder.com/data/icons/trico-circles-solid/24/Circle-Solid-Phone-512.png'}} />
</CollapseHeader>
<CollapseBody style={{alignItems:'center',justifyContent:'center',padding:10}}>
<Text>+1 310 346 0018</Text>
</CollapseBody>
</Collapse>
<Collapse style={{flexDirection:'row'}}>
<CollapseHeader>
<Thumbnail source={{uri: 'https://d30y9cdsu7xlg0.cloudfront.net/png/1674-200.png'}} />
</CollapseHeader>
<CollapseBody style={{alignItems:'center',justifyContent:'center',padding:10}}>
<Text>sample@sample.ma</Text>
</CollapseBody>
</Collapse>
</CollapseBody>
</Collapse>
</View>
***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(
<Separator bordered style={{alignItems:'center'}}>
<Text>{item.title}</Text>
</Separator>
);
}
_body(item){
return (
<View style={{padding:10}}>
<Text style={{textAlign:'center'}}>{item.body}</Text>
</View>
);
}
render() {
return (
<AccordionList
list={this.state.list}
header={this._head}
body={this._body}
keyExtractor={item => `${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 (
<View>
<Button
title={"Click here too"}
onPress={()=>this.setState({expanded: !this.state.expanded})}
/>
<Collapse
isExpanded={this.state.expanded}
onToggle={(isExpanded)=>this.setState({expanded: isExpanded})}>
<CollapseHeader>
<Text>Click here</Text>
</CollapseHeader>
<CollapseBody>
<Text>WHoooHo!</Text>
</CollapseBody>
</Collapse>
</View>
);
}
}
**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 |