nixa-react-native-accordion v1.0.4

React Native Accordion

nixa-react-native-accordion: a Collapsible Sections for React Native. fork from (https://github.com/mustapha-ghlissi/react-native-accordion)

Screenshots

Demo

Example

You can check out this Example.

Installation

Installing the package

Use npm or yarn to install the package.

npm i nixa-react-native-accordion

yarn add nixa-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 'nixa-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.

Accordion Props

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

Accordion Item Props

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

Advanced Usage

import {Accordion, AccordionItem} from 'nixa-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>