react-native-animated-collapsible-view

React-native animated collapsible accordion view.

This module includes animated customizable collapsible React-Native view.

The package is both Android and iOS compatible.

Installation

Using NPM:

$ npm install react-native-animated-collapsible-view

Using Yarn:

$ yarn add react-native-animated-collapsible-view

Usage

import CollapsibleView from "react-native-animated-collapsible-view";

iOS Demo	Android Demo

Sample Code:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import CollapsibleView from "react-native-animated-collapsible-view";

const App = () => {
  return (
    <View style={styles.container}>
      <CollapsibleView
        title={"Welcome"}
        childStyle={styles.childStyle}
        titleViewStyle={styles.titleViewStyle}
        titleTextStyle={styles.titleTextStyle}
        iconColor={"white"}
      >
        <Text>
          This is an animated collapsible view for react-native, with lots of
          modifications in it. You can add any component inside. Every style of
          component is modifiable.
        </Text>
      </CollapsibleView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
  },
  childStyle: {
    backgroundColor: "white",
    padding: 10,
  },
  titleViewStyle: {
    width: 300,
    backgroundColor: "rgb(242, 242, 242)",
    borderWidth: 1,
    borderRadius: 10,
    backgroundColor: "gray",
  },
  titleTextStyle: { color: "white", fontSize: 18 },
});

export default App;

Configuration

Property	Type	Default	Description
title	String	""	Label or title of view
childStyle	ViewStyle	{ padding: childStyle?.padding, backgroundColor: "white"}	Styling for child view
titleViewStyle	ViewStyle	{ width: "100%",align_items: "center",justify_content: "center",overflow: "hidden",paddingTop: 10,backgroundColor: "white",marginVertical: 5,}	Styling for title view
titleTextStyle	TextStyle	none	Styling for title text
iconColor	String	'#000000'	Color of Arrow icon