ExpandableText

Usage

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

function ExpandableTextUsage() {
  return (
    <View>
      <ExpandableText>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </ExpandableText>
    </View>
  )
}

Less Lines

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is for texts.

function ExpandableTextLessLines() {
  return (
    <View>
      <ExpandableText numberOfLines={5}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum is for texts.
      </ExpandableText>
    </View>
  )
}

Lines

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Label

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

function ExpandableTextLabelCustom() {
  return (
    <View>
      <ExpandableText
        numberOfLines={2}
        showLabel="...Show Details"
        hideLabel="...Hide Details"
        showLabelStyle={{color: 'red', fontWeight: 'bold', fontSize: 16}}
        hideLabelStyle={{color: 'gold'}}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </ExpandableText>
    </View>
  )
}

Prop	Data Type	Default Value	Description
Extends	TextProps	--	Inherits properties from TextProps
showLabel	string	"Read more"	Open/show label of the text component
hideLabel	string	"Read less"	Close/hide label of the text component
showLabelStyle	StyleProp<TextStyle>	--	Show label text style
hideLabelStyle	StyleProp<TextStyle>	--	Hide label text style
typography	TypographyOptions	b3	Modify the font size/weight values using this- h1-h6 are used for headings - s1-s3 are used for subheadings - b1-b3 are used for body text - l1-l3 are used for labels - c1-c3 are used for captions