https://github.com/kashishgrover/react-native-see-more-inline

Show a "read more", "see more", "read less", "see less" inline with your text in React Native
https://github.com/kashishgrover/react-native-see-more-inline

inline react-native read-more read-more-less text

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kashishgrover/react-native-see-more-inline
• Owner: kashishgrover
• Created: 2020-02-29T06:49:38.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-27T04:37:07.000Z (almost 2 years ago)
• Last Synced: 2024-10-20T09:15:01.395Z (2 months ago)
• Topics: inline, react-native, read-more, read-more-less, text
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-native-see-more-inline
• Size: 7.99 MB
• Stars: 420
• Watchers: 3
• Forks: 16
• Open Issues: 35
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

![npm](https://img.shields.io/npm/dm/react-native-see-more-inline?style=plastic)

![npm](https://img.shields.io/npm/dt/react-native-see-more-inline?style=plastic)

# 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.

![](./images/screenshot1.png)

![](./images/screenshot2.png)

![](./images/screenshot3.png)

## Installing the package

1. Install [`react-native-text-size` v4.0.0-rc.1](https://github.com/aMarCruz/react-native-text-size)

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';

  {VERY_LARGE_TEXT}

  {VERY_LARGE_TEXT}

```

### 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`