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
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

!example in a list

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';





FORWARD




Aaron Bennet


Claire Barclay


Kelso Brittany






FORWARD




Aaron Bennet


Claire Barclay


Kelso Brittany

Simple Collapse inception

!enter image description here

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

!enter image description here

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 (
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 (

title={"Click here too"}
onPress={()=>this.setState({expanded: !this.state.expanded})}
/>
isExpanded={this.state.expanded}
onToggle={(isExpanded)=>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 |