react-native-collapsible-list

A ReactNative collapsible list component

Installation

You can install this package via yarn:

yarn add react-native-collapsible-list

or npm

npm install react-native-collapsible-list --save

Basic Usage

import React, { Component } from "react";
import { Text, View } from "react-native";
import CollapsibleList from "react-native-collapsible-list";
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <CollapsibleList
          numberOfVisibleItems={1}
          wrapperStyle={styles.wrapperCollapsibleList}
          buttonContent={
            <View style={styles.button}>
              <Text style={styles.buttonText}>{buttonText}</Text>
            </View>
          }
        >
          <View style={styles.collapsibleItem}>
            <Text>Hello Collapsable List :)</Text>
          </View>
          <View style={styles.collapsibleItem}>
            <Text>Collapsable List Item</Text>
          </View>
          <View style={styles.collapsibleItem}>
            <Text>Another Collapsable List Item</Text>
          </View>
        </CollapsibleList>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.1)"
  },
  wrapperCollapsibleList: {
    flex: 1,
    marginTop: 20,
    overflow: "hidden",
    backgroundColor: "#FFF",
    borderRadius: 5
  },
  collapsibleItem: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: "#CCC",
    padding: 10
  }
});

Properties

Contribution

You can fork the repository, improve or fix some part of it and then send the pull requests back if you want to see them here. I really appreciate that.

License

Licensed under the MIT.