Accordion React native || best accordion library with examples

Whenever we want to show a accordion in our react native application then we have so many options but all have some flows. We got confuse that which one to choose. We also have some issues when we use accordion libraries with our current UI library like native base. But this library supports all popular UI bases, So We did all the research for you and here is the best library for accordion react native and how to use this.

Install Accordion React native

for npm

npm install accordion-collapse-react-native --save

for yarn

yarn add accordion-collapse-react-native

How to add Accordion in react native ( usage )

If you want to add simple collapsable component then you can do this.

<Collapse>
    <CollapseHeader>
      <View>
        <Text>What's in there</Text>
      </View>
    </CollapseHeader>
    <CollapseBody>
      <Text>I am here</Text>
    </CollapseBody>
</Collapse>

But if you want a accordion list then you can use this instead.

<AccordionList
        list={this.state.content}
        header={this.header}
        body={this.child}
        keyExtractor={res => res.key}
      />

You can pass all props of view like style in this component.

Now you are gonna think what are the props which you use in this library for make your life easier we are giving you the important options to consider.

React native accordion Component props

1. isExpanded – This shows the current state of accordion component. if this is true then collapse body is visible. So if we want something like open the first component visible then we can make it true for first component.
2. disabled – Disable opening of collapsible accordion.
3. onToggle – function which calls when we click on accordion
4. handleLongPress – functions which calls when we click for a long time on accordion.
5. touchableOpacityProps – this library use touchable opacity for buttons so if you want to change the effects and style of that button than you can pass additional props here.

All the props which we talk earlier can be used like this. ( only included important ones )

<Collapse isExpanded="true" onToggle={res => console.log("toggle component")}>
    <CollapseHeader >
      <View>
        <Text>Show more</Text>
      </View>
    </CollapseHeader>
    <CollapseBody>
      <Text>Welcome to accordion</Text>
    </CollapseBody>
</Collapse>
<Collapse disabled={this.state.disable} handleLongPress ={res => console.log("press for too long make this disable disappear")}>
    <CollapseHeader>
      <View>
        <Text>Show me too</Text>
      </View>
    </CollapseHeader>
    <CollapseBody>
      <Text>I am another accordion</Text>
    </CollapseBody>
</Collapse>

React native accordion List props

This supports all FlatList props. So we can modify this as our convenience. here are some another useful props which we can use to make our accordion best.

1. List or data – Sections of accordion list.
2. header – Header component of accordion list.
3. body – this represent body of accordion list.
4. onToggle – this shows current state of accordion list and index
5. expandedKey – by this we can pass the key of the item which is default expanded.
6. expandedIndex – By this we can pass the index of the item which is default expanded.
7. isDisabled – function to find if item is disabled or not.

With use of this information you can easily add accordion in your react native application.

If you have any issue you can write down in comment. I am gonna solve your problem.