react-native-custom-accordion

A cross-platform react-native custom accordion.

Installation

Install the library using npm or yarn:

# using npm
$ npm i react-native-custom-accordion

# using yarn
$ yarn add react-native-custom-accordion

Usage

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {
  Accordian,
  Section1,
  Section2,
  Section3,
  Section4,
  ActiveIcon,
  NonActiveIcon,
} from 'rn-custom-accordian';

import {
  Accordian,
  Section1,
  Section2,
  Section3,
  Section4,
  ActiveIcon,
  NonActiveIcon,
} from 'rn-custom-accordian';


const App = () => {
    
  return (
    <View style={styles.container}>
      <Accordian
        accordianButtonStyles={styles.accordianButton}
        activeIcon={() => <ActiveIcon />}
        nonActiveIcon={() => <NonActiveIcon />}
        defaultActiveTab={0}
        accordiaButtonTitle={[
          'Accordian1',
          'Accordian2',
          'Accordian3',
          'Accordian4',
        ]}
        accordiaItem={[<Section1 />, <Section2 />, <Section3 />, <Section4 />]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  accordianButton: {
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    flexDirection: 'row',
    margin: 5,
    elevation: 5,
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#d2d2d2',
    backgroundColor: '#ffffff',
    paddingVertical: 15,
  },
});

export default App;

Available props

All the TextInput props are supported as well!

| Props Name | Type | Default | Description | | -------------------- | ---------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | activeIcon | function? | | return type function | | nonActiveIcon | function? | | return type function | | defaultActiveTab | number? | 0 | The index of the item that should be by default expanded. If the expandedKey prop is defined this will be ignored | accordiaButtonTitle | [] Array | | list of items that represents sections | accordiaItem | [] Array | | list of items component that represents accordian bodies

Contributing

Pull requests, feedbacks and suggestions are welcome!

License

The library is released under the Folio3 X-Platform Engineering Group.