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