React Native Accordion Wrapper

An 🪗 accordion component for react native written in TypeScript in order to handle the accordion behavior for any react native components.

Installing

For the latest stable version:

using npm:

npm install --save react-native-accordion-wrapper

using yarn:

yarn add react-native-accordion-wrapper

Usage

import React, { Component } from 'react';
import Accordion from 'react-native-accordion-wrapper';

const Example = () => {

    return (
      <Accordion
        dataSource={[{
            title: 'first title',
            child: <View><Text>This is the child view</Text></View>
        }, {
            title: 'second title',
            child: <View><Text>This is the child view</Text></View>
        }]}/>
    );
}

AccordionItem

The Accordion component is a wrapper of another component named AccordionItem which has a tappable header with a child view on the bottom of it. Whenever the header is tapped so the visibility of child view is getting toggled. it's very handy if you don't need an accordion but you need this behavior.

import React, { Component } from 'react';
import { AccordionItem } from 'react-native-accordion-wrapper';

const Example = () => {

    return (
      <AccordionItem title="Tap me!">
        {/** any react native component */}
      </AccordionItem>
    );
}

Documentation

here is the properties and the descriptions of it:

Accordion component properties

| Props Name | Type | Default | Description | | :--: | :----- | :--: | :------------------------- | | dataSource | {   title: string,   child: JSX.Element,   onPress?: () => void,   nonExpandable?: boolean }[] | required input | The datasource is an array of objects containing title (which can also be called header) and child (will be presented after tapping each header) and onPress: an optional callback for tapping each header and nonExpandable an optional boolean to mention if an accordion item is expandable or not. (by default it's false) | | initialActiveIndex | number | undefined | initial accordion item index for being expanded, the component would also listen to the changes of this param, and react to it | | useFlatList | boolean | false | if the component is not inside another scrollview, you can use this feature to enhance the performance by sending true | | headerItemsStyle | ViewStyle | undefined | You can change the header items style (e.g. change backgroundColor of it) | | rightChevronIcon | JSX.Element | undefined | You can pass any JSX element as chevron (at the right position of the header items), it would be rotated 180 degrees (by animation) when the accordion item gets opened. | | headerTitleLabelStyle | TextStyle | undefined | you can change the text style of the header items | | shouldSelectOneItemAtATime | boolean | true | if only one item must be opened at a time, set it as true, and if all of the accordion items can be opened independentely, set it as true | | listHeaderComponent | React.ReactElement | undefined | it would be useful whenever you set the useFlatList to be true, so it's just like the ListHeaderComponent of FlatList|

AccordionItem component properties

| Props Name | Type | Default | Description | | :--: | :----- | :--: | :------------------------- | | title | string | required input | The title which would be tapped in order to expande or collapse the child view | | titleStyle | TextStyle | undefined | optional text style for the title header | | headerStyle | ViewStyle | undefined | optional header view style | | rightChevronIcon | JSX.Element | undefined | You can pass any JSX element as chevron (at the right position of the header items), it would be rotated 180 degrees (by animation) when the accordion item gets opened. | | onExpandStateChange | (isExpanded: boolean) => void | undefined | a callback closure in order to inform outside of the component about collapse state of it. | | onPress | () => void | undefined | a callback closure which will be called whenever the accordion item gets tapped (can be usefull for tracking) | | children | React.ReactNode | undefined | the child component which would be collapsed or expanded by tapping the header title | | initialExpandedState | boolean | undefined | you can choose the initla expanded state, and if you change it the component would react to it! |