React Native Accordion (by Metin)

An easy, decent way of creating accordion menu for react native

Installation

npm i --save react-native-accordion-met

or

yarn add react-native-accordion-met

Usage

Include it...

import Accordion from 'react-native-accordion-met';

The idea...

    <Accordion>
      <Accordion.Item open={true}>
        <Accordion.Header>
          ...
        </Accordion.Header>
        <Accordion.Content>
          ...
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item>
        <Accordion.Header>
          ...
        </Accordion.Header>
        <Accordion.Content>
          ...
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>

A working example:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import Accordion from 'react-native-accordion-met';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Accordion>
          <Accordion.Item open={true}>
            <Accordion.Header>
              <Text>First Menu Item</Text>
            </Accordion.Header>
            <Accordion.Content>
              <Text>Content for first item</Text>
              <Text>Content for first item</Text>
              <Text>Content for first item</Text>
            </Accordion.Content>
          </Accordion.Item>
          <Accordion.Item>
            <Accordion.Header>
              <Text>Second Menu Item</Text>
            </Accordion.Header>
            <Accordion.Content>
              <Text>Content for second item</Text>
              <Text>Content for second item</Text>
              <Text>Content for second item</Text>
            </Accordion.Content>
          </Accordion.Item>
          <Accordion.Item>
            <Accordion.Header>
              <Text>Third Menu Item</Text>
            </Accordion.Header>
            <Accordion.Content>
              <Text>Content for third item</Text>
              <Text>Content for third item</Text>
              <Text>Content for third item</Text>
            </Accordion.Content>
          </Accordion.Item>
        </Accordion>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

Some more styling:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import Accordion from './react-native-accordion-met'

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>

        <Accordion style={styles.accordion} duration={1300}>
          <Accordion.Item style={styles.accordionItem} open={true}>
            <Accordion.Header style={styles.accordionTitle}>
              <Text style={styles.accordionTitleText}>First Menu Item</Text>
            </Accordion.Header>
            <Accordion.Content>
              <Text style={styles.accordionTitleText}>Content for first item</Text>
              <Text style={styles.accordionTitleText}>Content for first item</Text>
              <Text style={styles.accordionTitleText}>Content for first item</Text>
              <Text style={styles.accordionTitleText}>Content for first item</Text>
              <Text style={styles.accordionTitleText}>Content for first item</Text>
              <Text style={styles.accordionTitleText}>Content for first item</Text>
              <Text style={styles.accordionTitleText}>Content for first item</Text>
              <Text style={styles.accordionTitleText}>Content for first item</Text>
            </Accordion.Content>
          </Accordion.Item>
          <Accordion.Item style={styles.accordionItem}>
            <Accordion.Header style={styles.accordionTitle}>
              <Text style={styles.accordionTitleText}>Second Menu Item</Text>
            </Accordion.Header>
            <Accordion.Content>
              <Text style={styles.accordionTitleText}>Content for second item</Text>
              <Text style={styles.accordionTitleText}>Content for second item</Text>
              <Text style={styles.accordionTitleText}>Content for second item</Text>
              <Text style={styles.accordionTitleText}>Content for second item</Text>
              <Text style={styles.accordionTitleText}>Content for second item</Text>
              <Text style={styles.accordionTitleText}>Content for second item</Text>
            </Accordion.Content>
          </Accordion.Item>
          <Accordion.Item style={styles.accordionItem}>
            <Accordion.Header style={styles.accordionTitle}>
              <Text style={styles.accordionTitleText}>Third Menu Item</Text>
            </Accordion.Header>
            <Accordion.Content>
              <Text style={styles.accordionTitleText}>Content for 3 item</Text>
              <Text style={styles.accordionTitleText}>Content for 3 item</Text>
              <Text style={styles.accordionTitleText}>Content for 3 item</Text>
              <Text style={styles.accordionTitleText}>Content for 3 item</Text>
              <Text style={styles.accordionTitleText}>Content for 3 item</Text>
              <Text style={styles.accordionTitleText}>Content for 3 item</Text>
              <Text style={styles.accordionTitleText}>Content for 3 item</Text>
            </Accordion.Content>
          </Accordion.Item>
          <Accordion.Item style={styles.accordionItem}>
            <Accordion.Header style={styles.accordionTitle}>
              <Text style={styles.accordionTitleText}>Forth Menu Item</Text>
            </Accordion.Header>
            <Accordion.Content>
              <Text style={styles.accordionTitleText}>Content for 4 item</Text>
              <Text style={styles.accordionTitleText}>Content for 4 item</Text>
              <Text style={styles.accordionTitleText}>Content for 4 item</Text>
              <Text style={styles.accordionTitleText}>Content for 4 item</Text>
              <Text style={styles.accordionTitleText}>Content for 4 item</Text>
              <Text style={styles.accordionTitleText}>Content for 4 item</Text>
            </Accordion.Content>
          </Accordion.Item>
        </Accordion>

        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  accordion: {
    backgroundColor: '#eee',
  },
  accordionTitle: {
    backgroundColor: '#f3f3f3',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    height: 50,
  },
  accordionItem: {
    backgroundColor: '#fefefe',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  accordionTitleText: {
    marginLeft: 24,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

Props for Accordion Component

| Name | Type | Note | |---|---|---| |duration|integer|Miliseconds for collapsing animation duration time |style|object|A StyleSheet rule name just as used for default RN Components.

Props for <Accordion.Item /> Component

| Name | Type | Note | |---|---|---| |open|boolean|true/false whether the item is opened. Be sure to use it only once for each accordion. |style|object|A StyleSheet rule name just as used for default RN Components.

Props for <Accordion.Header /> and <Accordion.Content /> Components

| Name | Type | Note | |---|---|---| |style|object|A StyleSheet rule name just as used for default RN Components.

LICENSE Copyright (c) 2017, Metin Alim

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007

Copyright (C) 2007 Free Software Foundation, Inc. http://fsf.org/ Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. ... https://github.com/metinalim/react-native-accordion-met/blob/master/LICENSE