nlt2390 / react-native-view-more-text Goto Github PK

How to use view more in the function component?

Show More does not display always when the text does not fit inside a view.

Thanks for publishing this to NPM and github! Can you add a license to the repo?

A have a collapsible pannel with absolute position. When I place ViewMoreText on this panel it has incorrect height((

When a text is even character and you set numOfLines={3}, the view more component still shows.

This is just feature suggestion, it should hide when the text component is minimal and not up to the numOfLInes

Hi!
This seems like a great package but I have an issue getting started.

It keeps complaining that I have two versions of react-native in my node_modules. That is because the package requires a fixed version of react-native (and react, prop-types).

The problem:
https://github.com/nlt2390/react-native-view-more-text/blob/master/package.json#L24

"dependencies": {
    "prop-types": "15.6.0",
    "react": "16.0.0",
    "react-native": "0.50.1"
  }

Maybe we can do something like this?

"dependencies": {
    "prop-types": "*",
    "react": "*",
    "react-native": "*"
  }

Using:
React-native: 49.5
React: 16.0.0
Prop-types: ^15.5.10

When Adding a string like
This card came from the 1992 Olympic Hopeful Set. This is one of many Olympic cards we are offering. These are the second best "quality" olympic cards that exist from a color perspective that I've seen. You are looking at the front and back of the card..You be the judge.
Item in mint condition...

Hi,
I have a description text that can vary so i have enclosed it inside the ViewMore component, but it tends to flicker when i start typing in the below textfield.
RN version: 0.46.4

Please find the attached gif of the issue.

I have big ViewMore text, more than one screen if user clicks on see less text, text is collapsed for 2 lines of text, so after that user see just empty screen, to see collapsed text user need to scroll up to the top of the screen. How to make automatic scroll up to the top of the screen after text was collapsed?

Hi there,
Thanks for the plugin!!

When I tested with scrollView in android device, 'View More' worked fine but when I tapped on 'View Less', entire screen went blank; I had to scroll to see the original view.

It works fine with iOS device.

any idea what might be causing this?
Thanks!!

If I update the children of this component, it doesn't recalculate shouldShowMore, so updating it from little text to a lot of text (that requires a footer) won't actually trigger calculating if the footer needs to appear. The opposite is true for if I have a lot of text then change it to a little: It will show the "View More" footer even if there is only one line of text

Something like expandOnPressInnerText. Seems to be the behavior seen on similar components in apps.

Hello!

I'm trying use different style into ViewMoreText (i.e textAlign) but It doesn't work. I think ViewMoreText could have a customStyle props to Text component. What do you think?

<ViewMoreText
  numberOfLines={20}
  renderViewMore={this.renderViewMore}
  renderViewLess={this.renderViewLess} >

  <Text style={styles.body}>{item.body}</Text>

</ViewMoreText>

const styles = StyleSheet.create({
  body: {
    fontSize:15,
    color:'#606060',
    lineHeight:24,
    marginRight:18,
    textAlign: 'justify'
  },
}

I have a requirement where by default the view should show full text and also show less link. Is there a way to do that.

View flickers when view is rendered multiple times.

I believe it is because of those lines in react-native-view-more-text/index.js

  componentWillReceiveProps(nextProps) {
    this.resetData();

    this.setState({
      numberOfLines: null,
      opacity: 0,
    });
  }

@nlt2390 @HarrisonJackson @EmilScherdin Can any help me if you have any solution for this?
Android looks good but in iOS I am getting issues.

original text is
Test
<space/Enter/empty space>
Testing

Also in iOS and android, I am getting issues like android getting 3 dots and in iOS, it's not.
https://user-images.githubusercontent.com/46340921/199228277-7ad928d3-ecfb-455f-80d0-02f666ab6de8.mov

Hi,

When using multiple (3) ViewMores in a single component, they operate correctly for an iOS app in Debug mode. However when I change to Release mode, only the first 1 or 2 ViewMores will render. The ones that don't render still truncate the text, they just don't show the Read More button. Any ideas as to why this could be happening? The same problem occurrs when using expo/react-native-read-more library.

Thanks!

My text is not being truncated with "...", something I am missing? Even defining ellipsizeMode does not do anything.

Is there a way to not show view more\less buttons if given text fits number of lines?

@nlt2390
When view more button is visible - After state is changed the ViewMoreText disappears and appears again.

When view less button is visible - After state is changed the ViewMoreText disappears.

I tried using Show more with HTML (react-native-render-html) but it is not working.

Hi @nlt2390, hope you are doing well.

I have another here with the package. Can you please help to solve the problem.

I've implemented it simply as:

<ViewMoreText numberOfLines={5}>
         <Text style={styles.listText}>{categoryArray.toString().split(",").join("\n")}</Text>
</ViewMoreText>

But I'm not able to see the View More/Less button, and if I get rid of the numberOfLines prop the I see the complete list.

<ViewMoreText numberOfLines={3} renderViewMore={renderViewMore} renderViewLess={renderViewLess}
textStyle={{textAlign: 'left',paddingTop:6}}>
{ children }

I would love it if we could add a view and two text components in the ViewReadMore Tag... is it possible ? Can we make some modifications to make it work ?

the content are hide when i use it inside the react-native collapsible view.

How to align View more/view less inline with the main text? Please help

In my example I am passing in an array as prop for textStyle:

const defaultStyle = { color: '#000000' };
const appTheme = { color: '#00ff00' };
const userTheme = { color: '#0000ff' };

// .....
<ViewMoreText
  textStyle={[defaultStyle, appTheme, userTheme]}
>
  // ...
</ViewMoreText>

React-Native allows to pass styles as an array to give effect similar to css (cascading).

Will create pull request if I'm able what the correct propType for textStyle should be.

This issue is related with #11. When you added renderTimeout prop component has began working
more slowly. When I use it on the list(more than 1 view-more component in one row) on collapsible panel I must to set a big delay (about 300, 500, 700) that component will render correctly.

In this screen all 3 labels in the row use view-more-text component.

This is my code:

<ViewMoreText
  numberOfLines={1}
  renderViewMore={this.renderViewMore}
  renderViewLess={this.renderViewLess}
>
<Text style={styles.someStyle}>
{ this.state.textExist? this.state.text:""}
</Text>
</ViewMoreText>

I have to show text on some condition. The text is rendered when the condition becomes true, but View more is not rendered.
But if i make the text content fix, like below then it is working fine.
<Text style={styles.someStyle}> Any long long very long text </Text>

All the other variables and functions are defined.

I got this error when i used import ViewMoreText from 'react-native-view-more-text';

How do I set ellipsizeMode?
I want to set it as clip

Text inside the react-native-view-more-text is not scaling automatically.I tried to add allow font scaling its not working .When i look in code of the package seems that properties of text is not importing

Setting the ability to long press copy from a Text component as such <Text selectable={true}>{content}</Text> does not work when inside of the <ViewMoreText> wrapper. Works as expected outside of this component

Does not work

              <ViewMoreText
                numberOfLines={5}
                renderViewMore={this.renderViewMore}
                renderViewLess={this.renderViewLess}
              >
                <Text selectable={true}>{content}</Text>
              </ViewMoreText>

Does work

              <Text selectable={true}>{content}</Text>

Hi @nlt2390
I would like to use a custom component instead of in my renderViewMore() function.
Is it possible?

I cannot select text in Text component which is already selectable.

Here's my code:

<ViewMoreText numberOfLines={15} renderViewMore={this.renderViewMore} renderViewLess={this.renderViewLess} > <Text selectable={true}>{content}</Text> </ViewMoreText>

I appreciate any help. ^__^
Thank you!

I made a unfold text view, but the unfold button will cover the text which makes the text looks like broken, I want it perfect,any solution?

How to hide "read more" when the actual number of lines is under a certain number?

I did something like this:

<ViewMoreText
    numberOfLines={3}
    renderViewMore={this._renderViewMore}
    renderViewLess={this._renderViewLess}
    textStyle={styles.caption}
>
        <Text>{this.props.caption}</Text>
</ViewMoreText>


_renderViewMore(onPress) {
        return (
                <Text
                        style={styles.viewMore}
                        onPress={onPress}
                >
                        View more
                </Text>
        );
}

when fetch data from server in componentDidMount(), the footview doesn't render after have the data!

Hi,
I have a large number of list and in that I am showing text with ability to show vewMore and viewLess, using this library works fine if I have very few number of list item but fails on anything more than couple of list items. Please have a look on attachment. I am using import { List, ListItem, Button } from 'react-native-elements'. Inside each listItem, i use react-native-view-more library.

Hi guys. Thanks for a good package.

Just one note: when I go the screen where I use your package, it takes several seconds to see initial lines of the text. At first, it does not show any text and it seems that text view height is null. Then it increases the height (still text is not visible). And only after this text is going to be visible.

Can you please help to understand what is the problem here