Skip to content

mustapha-ghlissi/react-native-accordion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Accordion

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

MIT License npm npm npm npm github github github github

Screenshots

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

Demo

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

Wise

Authors

Other libraries