react-native-collapsible-row

Installation

$ npm install react-native-collapsible-row --save

Basic Usage

<CollapsibleView
  isDefaultHeader
  title="Lorem ipsum dolor sit amet"
  max={5000}
  min={400}      
  style={{ flex: 1 }}
>
  <View style={{ color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' }}>
    <Text color="page_bg_color" size={15} weight="BOLD">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor eros cursus tempor rutrum.</Text>
  </View>
</CollapsibleView>

More Detailed Usage

import CollapsibleView from "react-native-collapsible-row";

collapsibleContainer: { flex: 1 },

headerStyle: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  maxHeight: 300,
  alignItems: 'center',
},

titleStyle: {
  marginLeft: 15,
  marginTop: 5,
  width: '80%',
  fontWeight: 'bold',
},

qContainer: {
  marginVertical: 7,
  width: '95%',
  alignSelf: 'center',
  borderRadius: 10,
},

answerViewStyle: {
  width: '90%',
  alignItems: 'flex-start',
  alignSelf: 'center',
  marginVertical: 5,
},

answerTextStyle: {
  color: '#FFFFFF',
  fontSize: 15,
  fontWeight: 'bold',
},

<CollapsibleView
  isDefaultHeader
  defaultHeaderStyle={styles.headerStyle}
  useStyledArrows
  title="Lorem ipsum dolor sit amet"
  titleStyle={styles.titleStyle}
  container={styles.qContainer}
  max={5000}
  min={400}
  titleTextExpandedColor="#FFFFFF"
  titleTextClosedColor="#464B6D"
  expandedColor="#464B6D"
  closedColor="#E6E9FC"
  style={styles.collapsibleContainer}
>
  <View style={styles.answerViewStyle}>
    <Text style={styles.answerTextStyle}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor eros cursus tempor rutrum.</Text>
  </View>
</CollapsibleView>

Properties

Prop Name	Prop Type	Purpose	Default Define
container	style	Styles Container	{}
borderStyle	style	Styles Container Border	{}
titleStyle	style	Styles Title Area	{}
defaultHeaderStyle	style	Header Style	{}
max	number	Expanded Height of View	110
min	number	Closed Height of View	40
title	String	Title Text	'Title'
useStyledArrows	bool	Using Styled Arrow Buttons	false
direction	String	Expand Direction 'vertical' or 'horizontal'	'vertical'
titleTextExpandedColor	String	Title Color When Expanded	'#709CE2'
titleTextClosedColor	String	Title Color When Closed	'#709CE2'
expandedColor	String	All Area Color When Expanded	'#E6E9FC'
closedColor	String	All Area Color When Closed	'transparent'
initialOpen	bool	Initial Open boolean	false
isDefaultHeader	bool	Using Default Header, use header props when its false	false
children	any	children components	null
header	any	header component	null