React Native Accordion

@mustapha-ghlissi/react-native-accordion: a Collapsible Sections for React Native.

Screenshots

Demo

Example

You can check out this Example.

Installation

Installing the package

Use npm or yarn to install the package.

npm i @mustapha-ghlissi/react-native-accordion

yarn add @mustapha-ghlissi/react-native-accordion

Installing dependencies

npm i react-native-reanimated react-native-vector-icons

yarn add react-native-reanimated react-native-vector-icons

Note: to finish the installation, you have to finish configuring the installed dependencies react-native-reanimated and react-native-vector-icons.

Usage

import {Accordion, AccordionItem} from '@mustapha-ghlissi/react-native-accordion';

<Accordion>
    <AccordionItem
        title="Section 1"
        subTitle="SubSection 1">
        {/* Put section body content here */}
    </AccordionItem>
    <AccordionItem title="Section 2">
        {/* Put section body content here */}
    </AccordionItem>
    <AccordionItem title="Section 3">
        {/* Put section body content here */}
    </AccordionItem>
</Accordion>

Common Props

Common Props has specific effects depends on the Component.

If one of the follinwg props is used in the Accordion Component, then it'll be applied GLOBALLY to all the Items !

If you need to customize only some Items, then you have to pass directly the props to AccordionItem Component.

Parameter	Type	Description
androidRipple	RippleConfig: optional	Define the ripple of the pressable when pressing in the Accordion Item.
leftIcon	string , ReactNode: optional	Accordion Item left icon.
titleStyle	TextStyle: optional	Accordion item title style.
subTitleStyle	TextStyle: optional	Accordion item sub-title style.
titleContainerStyle	ViewStyle: optional	Accordion item title container style.
headerStyle	ViewStyle: optional	Accordion item header style.
itemContainerStyle	ViewStyle: optional	Accordion item container style.
contentContainerStyle	ViewStyle: optional	Accordion item body style.
contentWrapperStyle	ViewStyle: optional	Accordion item body wrapper style.

Accordion Props

All common Props can be used here in addition to the following Props:

Parameter	Type	Description
containerStyle	ViewStyle: optional	Accordion container style.
animationDuration	number: optional	The duration of the collapse action
compact	boolean: optional	Define if the Accordion Items are compact or not.

Accordion Item Props

All common Props can be used here in addition to the following Props:

Parameter	Type	Description
title	string: required	Accordion item title.
subTitle	string: optional	Accordion item sub-title
header	ReactNode: optional	Custom accordion item header component.
rightIcon	string , ReactNode: optional	Accordion Item right icon (default = chevron-right).

Advanced Usage

import {Accordion, AccordionItem} from '@mustapha-ghlissi/react-native-accordion';

const styles = StyleSheet.create({
    titleStyle: {
        fontSize: 16,
        fontWeight: 700,
    },
    contentContainerStyle: {
        paddingTop: 15,
        paddingBottom: 20
    }
});

<Accordion
    compact
    animationDuration={250}
    titleStyle={styles.titleStyle}
    contentContainerStyle={styles.contentContainerStyle}>
    <AccordionItem
        rightIcon='account'
        title="Section 1"
        subTitle="SubSection 1">
        {/* Put section body content here */}
    </AccordionItem>
    <AccordionItem
        rightIcon={<Icon name='cogs' size={26} color='#000' />}
        title="Section 2"
    >
        {/* Put section body content here */}
    </AccordionItem>
    <AccordionItem title="Section 3">
        {/* Put section body content here */}
    </AccordionItem>
</Accordion>

Donate

Please contribute or donate so we can spend more time on this library.

Donate with Wise by clicking this link or by scanning the following QRCode

Authors

• @mustapha-ghlissi

Other libraries

• React Native OTP: One time password input for React Native.
• React Native Select Picker: Reanimated Dropdown Select for React Native.