react-native-expandable-text

简体中文 | English

Introduction

zq-react-native-expandable-textis an expandable and collapsible Text component. Support buttons trailing the end of the text when expanded. It has been adapted to iOS and Android, and supports certain UI configurations

The core calculation logic is implemented through the onLayout and onTextLayout events that come with TextView, without relying on native code.

Demo

Manually import：

Copy the files and resources in the src directory to your project

NPM import:

npm install zq-react-native-expandable-text --save

Dependencies

The UI depends on the following items, please manually introduce these two items in the project's package.json, and execute pod install in the iOS directory

react-native-fast-image

react-native-linear-gradient

Basic use

<ExpandableText
  width={screenWidth - 2 * padding}
  content={text}
/>

Props

Prop	Type	Required	Note
width	number	yes	Expandable text component width
content	string	no	Component content, default is ""
numberOfLines	number	no	Limit the number of lines, default is 2
textStyle	object	no	{lineHeight, color, fontSize}，default is{lineHeight: 16}，If you set lineHeight, please also set lineHeight in buttonStyle
buttonConfig	object	no	{iconPath, normalText, expandText}
buttonStyle	object	no	{lineHeight, color, fontSize}

Other

If you like this component, please help to click start, thank you very much