Skip to content

kashishgrover/react-native-see-more-inline

Repository files navigation

npm npm

react-native-see-more-inline

Show a "read more", "see more", "read less", "see less" inline with your text in React Native

My motivation of building this was that I couldn't find any library/implementation that would place the "see more" link inline with the text. All the other implementations I found would place the link under the text. This package uses text width, and using a simple binary search it (almost) accurately calculates where it should place the "see more" link.

Installing the package

  1. Install react-native-text-size v4.0.0-rc.1
  2. yarn add react-native-see-more-inline or npm install --save react-native-see-more-inline

Note: This package will not work with expo managed projects. The dependency react-native-text-size links natively. Till we have a dependency on this package to measure the text width, this limitation will remain.

Usage

import SeeMore from 'react-native-see-more-inline';

<SeeMore numberOfLines={2}>
  {VERY_LARGE_TEXT}
</SeeMore>

<SeeMore numberOfLines={2} linkStyle={{ fontWeight: '500' }}>
  {VERY_LARGE_TEXT}
</SeeMore>

Props

Prop Default Value Required Type
numberOfLines - yes number
linkColor '#2E75F0' no string
linkPressedColor '#163772' no string
linkStyle undefined no array/object
seeMoreText 'see more' no string
seeLessText 'see less' no string
style { fontFamily: undefined, fontSize: 14, fontWeight: '300' } no array/object

Running the example

  1. cd example
  2. yarn install
  3. Terminal 1 - yarn start
  4. Terminal 2 - yarn run wml
  5. Terminal 3 - yarn run ios / yarn run android