A ReactNative collapsible list component

Usage no npm install needed!

<script type="module">
  import reactNativeCollapsibleList from '';



A ReactNative collapsible list component

react-native-collapsible-list example


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}>
            <View style={styles.button}>
              <Text style={styles.buttonText}>{buttonText}</Text>
          <View style={styles.collapsibleItem}>
            <Text>Hello Collapsable List :)</Text>
          <View style={styles.collapsibleItem}>
            <Text>Collapsable List Item</Text>
          <View style={styles.collapsibleItem}>
            <Text>Another Collapsable List Item</Text>

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


Prop Type Default Description
animationConfig ReactNative.LayoutAnimationConfig {duration: 700, update: { type: "spring", springDamping: 0.7, property: "scaleXY" }} Overrides each property of the default value if specified
buttonContent React.ReactNode null Content of collapse button
buttonPosition string (top or bottom) bottom Position of collapse button
numberOfVisibleItems number 1 Number of visible items when lis is not collapsed
onToggle function null Callback function for toggling the list with collapsed parameter which can be true(list is collapsed) or false(list is not collapsed)
wrapperStyle ReactNative.ViewStyle null The style of the list wrapper


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. :wink:


Licensed under the MIT.