@mustapha-ghlissi/react-native-accordion NPM

React Native Accordion

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

Screenshots

Screen 1 Screen 2 Screen 3 Screen 4 Screen 5 Screen 6

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.

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>