@mloureiro/react-native-expandable-text v0.2.3

React Native Expandable Text

Introduction

ExpandableText React Native component which allows to collapse and expand text. This was built to be very flexible but still lightweight.

There are already a few projects with the same propose, so why another one?

• animated
• not opionated
  • some of other implementations already have the text in place,
  • force the touchable render to be right after the text
• full control
  • provides control API so that you use as you wish
• works with typography:
  • it allows to use your own text components implementation (instead of forcing to style the ExpandableText component)
• simply works:
  • it works with any level of nested text components
  • it takes the styling into account when measuring

Installation

npm install --save @mloureiro/react-native-expandable-text

or

yarn add @mloureiro/react-native-expandable-text

Usage

An example can be found here.

API:

interface Props {
  children: string | Text
  duration?: number
  easing?: EasingMode
  controller?: (ref: ExpandableTextInterface) => void
  numberOfLines: number
  onReady?: (prop: { isCollapsible: boolean }) => void
}

interface ExpandableTextInterface {
  collapse(): void
  expand(): void
  isCollapsed(): boolean
  isCollapsible(): boolean
  toggle(): void
}

For the available easing modes, there's the documentation on the react-native-collapsible package.