fawaz-ahmed / react-native-read-more Goto Github PK

Property seeMoreContainerStyleSecondary is required in typescript declaration but docs says that it's optional. Probably it should be optional in index.d.ts too. Now I need to pass it as empty object as workaround

on ios everything seems fine but on android;
always show more button showing..

I am using the controlled collapse, so that when the user taps on the entire parent view it expand the contained text.
But as of now there is no way to know whether or not there is any need to expand (ie nbOfLines > the number we set as props), which leads to a useless tap to expand. (in my case it triggers other functions, like adjusting the css top etc; so I really don't want to have it triggered when not needed)

Let me know if unclear :)

EDIT: and while at it, anyway to also return the "size" (width and height) of the collapsed text?
I guess you compute it somehow to adjust the animated height and width upon expanding?
This size would help me to "place" (top / bottom etc) the actually expanding text.

the button read more/read less is not present

Please add -> suppressHighlighting -> iOS
When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.

More about this you can reed in react-native text documentation 👇
https://reactnative.dev/docs/text#suppresshighlighting-ios

seeLessStyle: {
fontFamily: FONT_FAMILY.OpenSansRegular,
fontSize: normalize(14),
color:colors.inactiveTabColor,
borderBottomWidth:1,
borderColor:colors.activeButtonColor
}

<ReadMore style={styles.caption}
seeMoreText={'See More'}
seeMoreStyle={styles.seeMoreStyle}
seeLessText={'See Less'}
seeLessStyle={styles.seeLessStyle}
numberOfLines={3}
>{item.postData}

Border is not visible on See Less Text.
@fawaz-ahmed

I am trying to render some Markdown formatted text in a ReadMore. For this to work, I have to send the Markdown component to ReadMore in the customTextComponent prop.

When I do the following, it produces an error: undefined is not an object (evaluating 'node.children.map')

This seems to be an error from within the Markdown component.

import { View } from 'react-native';
import Markdown from 'react-native-markdown-display';
import ReadMore from '@fawazahmed/react-native-read-more';
import { TranslatedQuestion } from '../../../../types';
import { styles } from '../../styles';

const NUMBER_OF_LINES = 10;

export function QuestionView({ translation }: { translation: TranslatedQuestion }) {
  return (
    <View style={styles.innerContainer}>
      <ReadMore numberOfLines={NUMBER_OF_LINES} style={styles.text} customTextComponent={Markdown}/>
    </View>
  );
}

The same thing happens if I provide a simple functional component wrapping the Markdown component, as follows:

import { View } from 'react-native';
import Markdown from 'react-native-markdown-display';
import ReadMore from '@fawazahmed/react-native-read-more';
import { TranslatedQuestion } from '../../../../types';
import { styles } from '../../styles';

const NUMBER_OF_LINES = 10;

export function QuestionView({ translation }: { translation: TranslatedQuestion }) {
  return (
    <View style={styles.innerContainer}>
      <ReadMore numberOfLines={NUMBER_OF_LINES} style={styles.text} customTextComponent={CustomTextComponent}>
        {translation?.text}
      </ReadMore>
    </View>
  );
}

function CustomTextComponent( { children }: { children: string }) {
  return (
    <Markdown>
      {children}
    </Markdown>
  );
}

If I wrap the Markdown component with an inline functional component, as follows, it renders, but twice, one after the other.

import { View } from 'react-native';
import Markdown from 'react-native-markdown-display';
import ReadMore from '@fawazahmed/react-native-read-more';
import { TranslatedQuestion } from '../../../../types';
import { styles } from '../../styles';

const NUMBER_OF_LINES = 10;

export function QuestionView({ translation }: { translation: TranslatedQuestion }) {
  return (
    <View style={styles.innerContainer}>
      <ReadMore numberOfLines={NUMBER_OF_LINES} style={styles.text} customTextComponent={() => <Markdown>{translation?.text}</Markdown>}/>
    </View>
  );
}

Any help I can get on this will be much appreciated.

When using this library in web the text is truncating but see more button is not visible

Expected ref to be a function, a string, an object returned by React.createRef(), or null

i got this issue on IOS for no reasons. it was working fine 2 weeks ago and now the app keep crashing with this error message.

I want to custom fontFamiy for text style

Is there any prop or setting to set position for the show more / less buttons?

Becouse show more buttons stays under the actual text

https://ibb.co/6m66h5R

it is a question,
are you using TextPropTypes?
it's deprecated by React Native and will rise an error
Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'

The "SeeMore" text cover on the Content if the width of the Content's View is about ~100 - 200

Demo: https://www.loom.com/share/11f40ee1bda84aa886c5f92699e55eec

It works fine, but show this warning

Hi I am trying to create the amount of spacing in a paragraph between top line and below line.

Ex:
ffffffff
<--- The amount of space I can place.
ffffffff

I have tried numberOfLines which just makes how many lines you want in your paragraph and not necessarily the amount of spacing in-between the paragraphs.

When I save the file then it is visible but after a while, it happens same no button is visible. Please help it's urgent.

When passed text is shorter and evaluating to less lines than numberOfLines. This is how it looks with example app and numberOfLines={3}:

<ReadMore
  numberOfLines={3}
  style={styles.textStyle}
  onReady={() => Alert.alert('onReady Called')}>
  {
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
  }
</ReadMore>

AND

<ReadMore
  numberOfLines={3}
  style={styles.textStyle}
  onReady={() => Alert.alert('onReady Called')}>
  {'Lorem Ipsum is simply dummy text'}
</ReadMore>

Referencing issue from
#36 (comment)

On iOS it is working fine but on Android when the page loads for the first time, the "See more" text flickers i.e first the text is shown and then "See more" and "ellipsis" shows.
Using react-native latest version 0.63.

<ReadMore
          seeMoreStyle={styles.readMoreContainer}
          numberOfLines={3}
          expandOnly={true}
          style={ styles.message}
          allowFontScaling={false}
          debounceSeeMoreCalc={0}
          animate={false}
        >

Also the text wraps up too soon

Code:

<ReadMore
    numberOfLines={4}
    style={styles.description}
    seeMoreText="weiterlesen"
    seeLessText="weniger anzeigen"
    ellipsis="..."
    seeMoreStyle={{ color: theme.colors.primary }}
    seeLessStyle={{ color: theme.colors.primary }}
    >
        {newsItem.description?.replace(/\n/g, ' \n ')}
</ReadMore>

Currently I'm replacing all \n with a whitespace, to avoid that the text is even written together

(using version ^2.0.0)

As you can see here, see more text is being added next to the actual text.
What if I want to render it in a new line?

NOTE: i found a way to do that by adding width: 100% to the seeMoreContainerStyleSecondary prop but
could not use same for see less..

This read more component is outputting tonnes of logs into my metro with "padding 238.33... 65.34... 332" every few milliseconds when the content is not expanded. Once opened and I press read more - the logs stop. I believe this is what is causing my application to crash. I once left my screen open for a while with all of these logs and it came up with a warning that said "Please report: excessive number of pendin..." and I couldn't read the warning because it made my application crash. I've attached some images for context.

Hi! I have the username and caption inline but I want to make the username bold and still have the See more button how can I achieve this since they are two different texts Thanks!

how can I add icon beside see more/less text?
I have used customTextComponent like this:

<ReadMore seeMoreStyle={styles.button} seeLessStyle={styles.button} numberOfLines={3} customTextComponent={props => ( <> <Text {...props} /> <MaterialCommunityIcon name="chevron-down" size={Spacing.large} color={Colors.blueViolet} /> </> )}> {userInfo.about_me} </ReadMore>

but it's not working properly:
https://i.imgur.com/CktRJtN.png
https://i.imgur.com/HFHGHrq.png

Hi, thanks for this great package, I think it will be good if we add support for HTML text, currently I'm using text-clipper in my project.

Description
When I'm using a custom text for the See More button, it doesn't get adjusted if the width of the container is reduced. The text gets adjusted, but the See More button stays the same and overlaps with the text. I am assuming that the See More button should stay hidden if the container is small, instead of overlapping with the text.

Code

<SafeAreaView style={rnStyles.safe}>
      <View style={rnStyles.root}>
        <ReadMore
          numberOfLines={lines}
          style={[styles.text, rnStyles.text]}
          seeMoreText={showButtonText}
          seeLessText={hideButtonText}
          seeMoreStyle={[styles.showButtonText, rnStyles.buttonSpacing]}
          seeLessStyle={[styles.hideButtonText, rnStyles.buttonSpacing]}
          animate={false}
          allowFontScaling={false}
          onExpand={handleActions}
        >
          {text}
       </ReadMore>
    </View>
</SafeAreaView>

// Styles
const rnStyles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  root: {
    flex: 1,
  },
  text: {
    lineHeight: 20,
    marginRight: 5,
  },
  buttonSpacing: {
    marginLeft: 5,
  },
});

styles.showButtonText, styles.hideButtonText and styles.text are dynamic styles that contain fontSize, color, fontWeight and fontFamily.

Referencing for this issue
#10 (comment)

Please could you give solution for that issue .
Thanks

My code
<ReadMore
style={[styles.text, descText]}
numberOfLines={numberOfLineDisplay}
seeMoreText={'more'}
seeLessText={'less'}
seeMoreOverlapCount={0}
allowFontScaling={false}
// seeMoreStyle={styles.text}
seeLessStyle={[styles.lessText, 'less']}
seeMoreStyle={[styles.moreText, 'more']}>
<ParsedText
style={[styles.text, descriptionTxt]}
parse={[
{pattern: tagRegex, renderText: renderTagText},
{pattern: urlRegex, renderText: renderURLText},
]}
childrenProps={{allowFontScaling: false}}>
{descriptions}
{/* {readMore ? descriptions : descriptions.substring(0, character)} */}

Style
const styles = StyleSheet.create({
text: {
fontSize: 16,
paddingVertical: '2%',
fontFamily: fonts.RRegular,
color: colors.lightBlackColor,
},
moreText: {
color: 'gray',
fontFamily: fonts.RRegular,
fontSize: 12,
},
lessText: {
color: 'gray',
fontSize: 12,
},
});

Is there any prop available to handle read more / read less from outside. like on button press or something.

<ReadMore> component works fine but I have trouble passing our unit tests, as shown below. I tried to mock this component but without much success. Do you know what is going on?

Hello,

I am using this component in a project and it works perfectly!

There is one use case I needed and had to use patch-package to add for my project, and that is the ability to use a custom function when "See More" is clicked.

For example, when "See More" is clicked, instead of expanding text, open up a modal.

Here is an example video of this functionality.

Here is the patch that I applied to achieve this.

I can open up a PR if you believe this is functionality that would improve the package.

Thanks.

Before

After

Description
When then component is mounted, the text is displayed without the See More button. After a few seconds, the See More button is displayed. And this delay is visible. I am assuming that it takes some time for calculation. I hope that this issue can be fixed.

Code

<SafeAreaView style={rnStyles.safe}>
      <View style={rnStyles.root}>
        <ReadMore
          numberOfLines={lines}
          style={[styles.text, rnStyles.text]}
          seeMoreText={showButtonText}
          seeLessText={hideButtonText}
          seeMoreStyle={[styles.showButtonText, rnStyles.buttonSpacing]}
          seeLessStyle={[styles.hideButtonText, rnStyles.buttonSpacing]}
          animate={false}
          allowFontScaling={false}
          onExpand={handleActions}
        >
          {text}
      </ReadMore>
    </View>
</SafeAreaView>

// Styles
const rnStyles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  root: {
    flex: 1,
  },
  text: {
    lineHeight: 20,
    marginRight: 5,
  },
  buttonSpacing: {
    marginLeft: 5,
  },
});

Bug

Firstly, great library! Works pretty well for most use cases.
I'm facing an issue on iOS, where if I set numberOfLines={2} leads to the seeMoreText being rendered incorrectly. It overlaps on the 2nd line, while the 1st line of text shows the calculated padding for seeMoreText.
Please see the attached screenshot in steps below

Platform

• iOS

Environment info

React native info output:

 System:
    OS: macOS 11.1
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 4.60 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK: 14.5
    Android SDK:
      API Levels: 16, 21, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
      System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.1 => 0.63.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 2.2.0

Steps To Reproduce

1. Render ReadMore text as below
   <View style={{ width: '100%', maxHeight: deviceRelativeHeight(25), marginTop: 13}}> <ReadMore numberOfLines={2} style={{...fontStyles}} seeMoreText={' more'} seeLessText={' less'} seeMoreStyle={{...fontStyles}} seeLessStyle={{...fontStyles}}> {description} </ReadMore> </View>

2. See rendered text on iOS device as below
   

Expected behaviour

1. SeeMoreText should be rendered correctly

when content is a short message at the time read more text gets overlap with content

and Readmore padding styles not working

The only output of my giant test suite right now is enabling global animation, which I'm assuming was accidentally left in the codebase.

My test output:

... tons of tests
 PASS  src/providers/AuthStatusModal.test.tsx (12.425 s)
 PASS  src/screens/LoggedOut/LoginScreen.test.tsx (12.613 s)
  ● Console

    console.log
      enabling global animation
      at enableGlobalLayoutAnimation (node_modules/@fawazahmed/react-native-read-more/dist/ReadMore.js:1:2404)

 PASS  src/screens/Onboarding/CheckEmailScreen.test.tsx
 PASS  src/screens/Account/AccountScreen.test.tsx
 PASS  src/components/StackedMenu/StackedMenuItem.test.tsx
... tons more tests

it's weird issue, after using this package in one of my screen then suddenly all my screen has animation.
example:

• smooth animation fade in and fade out transition
• in cart screen i have delete product function, when the product deleted from the state layout has bouncing animation transition.
• bouncing animation when user sliding up the bottom sheet

when i remove the import script of this package, all the animation is gone.

Hi !

Nice package, helps me a lot in my student project !!

There are some console.log which are displayed when component are mount.

Not really an issue just maybe an esthetic issue when I'm tring to debug.

Hope it can help.
S2LF

I see the latest version is 2.2.0 on npm but when running yarn it only fetches the v1.0.0 and displays the following info.
I have no idea what's wrong here.

yarn install v1.22.4
[1/4] 🔍 Resolving packages...
Couldn't find any versions for "react-native-read-more" that matches "^2.2.0"
? Please choose a version of "react-native-read-more" from this list: (Use arrow keys)
❯ 1.0.0

When I style the SeeMore background as transparent the text seem to be showing making it not visible. It will only visible if I had a background color.

• Hope in the future someone can fix this issue.