Expandable Text component of React Native, collapse text when the content exceeds specified number of lines
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs/images
src
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

RN-ExpandableText

NPM Version License

Introduction

RN-ExpandableText is an component of React Native, all the usages of ExpandableText is the same as the native Text component, but it will collapse text when its content exceeds specified number of lines.

Installation

npm install rn-expandable-text --save

ExpandableText Usage

    import ExpandableText from 'rn-expandable-text'
    
    <ExpandableText
      numberOfLines={10}
      style={styles.expandableText}
      unexpandView={() => null}
      expandView={() =>
        (<View style={styles.arrow} />)
      }
    >
      {content}
    </ExpandableText>

Properties

Prop Description Default
numberOfLines The max number of lines the content will be, the content exceed this value, the expandview will show. 5
expandView A callback function to return expand-view, you can customize the expand-view. when it's null, expand-view will disappear
unexpandView A callback function to return unexpand-view. Usage the same as expandView
onExpand A callback when the content expands -
onCollapse A callback when the content collapses -

Demos

Default View customize the expand-view
Default View Default View

Follow Me

Follow me on Wechat