❤
npm
Sign UpSign In

react-native-accordion-met

2.0.0 • Public • Published

React Native Accordion (by Metin)

npm version dependencies Status styled with prettier Monthly download Total downloads

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

Readme

Keywords

Package Sidebar

Install

npm i react-native-accordion-met

Repository

github.com/metinalim/react-native-accordion-met

Homepage

github.com/metinalim/react-native-accordion-met#readme

Weekly Downloads

4

Version

2.0.0

License

ISC

Unpacked Size

57.2 kB

Total Files

10

Last publish

Collaborators

  • metinalim
Try on RunKit
Report malware