1.0.0 • Published 2 years ago

react-native-custom-accordion v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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 NameTypeDefaultDescription
activeIconfunction?return type function
nonActiveIconfunction?return type function
defaultActiveTabnumber?0The index of the item that should be by default expanded. If the expandedKey prop is defined this will be ignored
accordiaButtonTitle[] Arraylist of items that represents sections
accordiaItem[] Arraylist 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.