ype htmlhtml lang=enheadmeta charset=utf-8link rel=styleshe href= title data-act-lm=truccordion-collapse-rt-nativ- npm

is a react native javascript component that allow you to show an accordion or a collapse.

npm install –save accordion-collapse-react-native

import Collapse,CollapseHeader, CollapseBody, AccordionList from accordion-collapse-react-native; //Simple collapsable Collapse CollapseHeader View TextClick here/Text /View /CollapseHeader CollapseBody TextTa 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.

this is example is based onnative base list separatorcombined 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 TextFORWARD/Text /Separator /CollapseHeader CollapseBody ListItem TextAaron Bennet/Text /ListItem ListItem TextClaire Barclay/Text /ListItem ListItem last TextKelso Brittany/Text /ListItem /CollapseBody /Collapse Collapse CollapseHeader Separator bordered TextFORWARD/Text /Separator /CollapseHeader CollapseBody ListItem TextAaron Bennet/Text /ListItem ListItem TextClaire Barclay/Text /ListItem ListItem last TextKelso Brittany/Text /ListItem /CollapseBody /Collapse /View

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: / /View View style=width:60% TextName : Mohammed Ali Kley/Text TextProfession: Boxer/Text /View /CollapseHeader CollapseBody style=alignItems:center,justifyContent:center,flexDirection:row,backgroundColor:EDEDED Collapse style=flexDirection:row CollapseHeader Thumbnail source=uri: / /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: / /CollapseHeader CollapseBody style=alignItems:center,justifyContent:center,padding:10 Text/Text /CollapseBody /Collapse /CollapseBody /Collapse /View

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 Textitem.title/Text /Separator ); _body(item) return ( View style=padding:10 Text style=textAlign:centeritem.body/Text /View ); render() return ( AccordionList list=this.state.list header=this._head body=this._body keyExtractor=item = `$item.id` / );

CollapseHeader & CollapseBodyThink 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.

CollapseYou need to wrap a CollapseHeader & a CollapseBody in the Collapse.

disable the click on the collapse header if true

onToggle is a function take in input a boolean value that contains the state of the Collapse (if collapsed-true)

handles the onLongPress event when longPressing on the collapseHeader content

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.

You can control & use the state collapse of the Collapse in youre 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 TextClick here/Text /CollapseHeader CollapseBody TextWHoooHo!/Text /CollapseBody /Collapse /View );

AccordionList components allow you to show an accordion with list of sections (head&body)

Its based on FlatList. Which means all the props related to FlatList are supported.

list of items that represents sections

(item, index, isExpanded)=undefined

a function that take as input an item of the list and output the render you want in the section header

(item, index, isExpanded)=undefined

a function that take as input an item of the list and output the render you want in the section header

(keyExtractor(item, index) or index, index, isExpanded) = undefined

a function that as input the index or the respective value extracted from the passed keyExtractor of the toggled item

The key of the item that should be by default expanded

The index of the item that should be by default expanded. If the

prop is defined this will be ignored

Function that return a boolean indicating if the indicated element is disabled on the accordion

npm iaccordion-collapse-react-native