kashishgrover / react-native-see-more-inline Goto Github PK

View Code? Open in Web Editor NEW

418.0 3.0 16.0 8.18 MB

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

Home Page: https://www.npmjs.com/package/react-native-see-more-inline

JavaScript 54.70% Starlark 2.69% Java 11.68% Ruby 12.35% Objective-C 18.59%

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

react-native-see-more-inline's Introduction

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

Install react-native-text-size v4.0.0-rc.1
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

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

react-native-see-more-inline's People

Contributors

Stargazers

Watchers

Forkers

roseaim filipemerker zeabdelkhalek roka20012 softglance cnilton hwangtaehyun giraffepoo akadko itsrbpandit agunnamdi codthing-native hai-dct nvtai123 manisha351 kingka

react-native-see-more-inline's Issues

Doesn't work with last version on React native (0.63.3)

[IOS] After installation and updating pods show this error:

RCTF Fatal Error: Unable to resolve module react-native-text-size from node_modules/react-native-see-more-inline/src/SeeMore/SeeMoreUtil.js: react-native-text-size could not be found within the project.

Version on React Native is [0.63.3]

There is a problem with Chinese character calculation

Calculating truncation index not taking into account default React Native word break mode?

Am I correct that the calculation for truncationIndex doesn't properly account for the default word break mode for React Native's Text? namely, a word will not be cut partially for line wrap - the entire word will be moved to the next line (at least for iOS - I know you can control this behavior with Android).

This severely undercounts the width (really space/pixels) needed to render some given text:
const { width: totalTextWidth } = await reactNativeTextSize.measure({ text, fontSize: scaledFontSize, fontFamily, fontWeight, });

as a line will be filled with empty space if the last word needs to be moved to the next line.

Example of incorrect calculation(s), current v1.3.0 code and behavior I saw using v1.1.0 for a year+:

Expected (and using my fixes):

I have modified SeeMoreUtils.js to instead calculate how each line would be rendered, thus taking into account word break where the word is not broken partially. I can post it here, but

please let me know if I'm misunderstanding the current behavior and/or am missing some prop/config that will account for this behavior
or if I should just fork, I can do that as well

Just want to help others, if possible

Basically, my code breaks up the text into lines, accounting for word break moving the last word of a line to the next line if it can't fit, so it better mimics the actual rendering when it does the truncationIndex calculation. Then, I re-assemble the text based on numberOfLines and truncate the last line appropriately to fit the seeMoreText

Malformed calls from JS: field sizes are different.

Hello,
I have followed the documentation for implementing your module however I'm unable to get it working correctly and am receiving the below.

This is my code for implementation:

Could you please advise?

Does not break properly when there is a linebreak in the text

Thanks to @kashishgrover for developing the plug-in exactly what i needed.

In a recent update, I found something different from before:
If there is a line break in the text, it works to break the text right there and display 'see more'.
Previously, there was a case where 'see more' was not displayed when there was a line break, so it seems to be an improvement. However, it seems not intended when there is a line-break in a position less than the max-number of lines, 'see more' is displayed from there.

Can you have a look on this? Thanks