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 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>[email protected]</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 |