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.