Rohitbarate / react-native-collabsible-view

Animated collapsible component for React Native, good for accordions, FAQ section etc

This is the custom collabsible view for making the custom FAQ section or dropdown menu in your react native project. it supports both android and ios operating systems.

Installation

1. Run: $ npm i --save react-native-collapsible-view-faq

Usage

Import the component:

import CollapsibleView from 'react-native-collapsible-view-faq';

      <CollapsibleView 
        title={'What is your name?'}
        description={'Rohit Barate'}
      />

Full Example

import React, { useRef, useState } from "react";
import { View } from "react-native";
import CollapsibleView from 'react-native-collapsible-view-faq';

const App = () => {

  return (
    <View style={flex:1}>
       <CollapsibleView 
        title={'What is your name?'}
        description={'Rohit Barate'}
      />
    </View>
  );
};

export default App;

Properties

Required props

Prop	Type
title	string
description	string

Optional props

Prop	Type	Default
containerBorderColor	string	'#5F5F5F'
containerBorderTopWidth	number	1
containerPaddingTop	number
containerPaddingBottom	number
containerPaddingVertical	number	5
containerWidth	string	'90%'
containerMarginTop	number
containerMarginBottom	number
containerMarginVertical	number	5
containerBackgroundColor	string	'#FFFFFF'
titleWidth	string
titleBackgroundColor	string
titleFontSize	number	16
titleColor	string	'#fff'
iconColor	string	'#fff'
iconFontSize	number	16
descBackgroundColor	string
descWidth	string	'100%'
descFontSize	number	14
descFontWeight	string	'400'
descColor	string	'#ffffff80'

npm Link

npm

Demo

WhatsApp.Video.2023-03-23.at.13.17.06.mp4