Collapse

A basic Collapse component that should render nicely on any platform. Supports a good level of customization.

You can customization Collapse component with the Props

Usage#

import React, {FC, useState} from 'react';
import { View, StyleSheet} from 'react-native';

import {Body,Collapse,Text} from 'qdmrncomponents';

const App: FC = () => {
  
  return (
    <Body V_Aligin_center>
      <Collapse
        component={{
          list1:{id:'1',header:'Collapse 1',body:<CollpaseList1 />},
          list2:{id:'2',header:'Collapse 2',body:<CollpaseList2 />},
          }}
      />
    </Body>
  );
};

const CollpaseList1 = () =>{
  return(
    <View>
      <Text label="Collapse Body 1"></Text>
    </View>
  )
}

const CollpaseList2 = () =>{
  return(
    <View>
      <Text label="Collapse Body 2"></Text>
    </View>
  )
}

Reference#

Props#

component#

component props of the Collapse used to list the collapsible data and its type Array of object>

headerBackgroundColor#

headerBackgroundColor props is used tochanging the background color of the header String

import React, {FC, useState} from 'react';
import { View, StyleSheet} from 'react-native';

import {Body,Collapse,Text} from 'qdmrncomponents';

const App: FC = () => {
  
  return (
    <Body V_Aligin_center>
      <Collapse
        component={{
          list1:{id:'1',header:'Collapse 1',body:<CollpaseList1 />},
          list2:{id:'2',header:'Collapse 2',body:<CollpaseList2 />},
          }}
          headerBackgroundColor="blue"
      />
    </Body>
  );
};

const CollpaseList1 = () =>{
  return(
    <View>
      <Text label="Collapse Body 1"></Text>
    </View>
  )
}

const CollpaseList2 = () =>{
  return(
    <View>
      <Text label="Collapse Body 2"></Text>
    </View>
  )
}

borderColor#

props for changing the border color and type string

headerFontSize#

props for changing the size of the collapse header and type number

headerFontColor#

props for changing the color of the collapse header font and type String

headerFontWeight#

props for changing font weight of the collapse header and type string-'bold'

inlineStyle#

props give addition props to the Button element type Object