CODEWITHSUNDEEP
react-native
Zafer Ayan
Zafer Ayan

Reputation: 801

React Native: How to add inline read more text to long truncated text

I'm showing long string in React Native App and I want to show it as two lined text. Using expo/react-native-read-more-text for collapsing/revealing purposes. It's work but i want to show 'read more' text as inline with the same line of ellipsis. How can i do it?

Current output:

Read more text in another line

I want like this as inlined:

Read more text in same line with ellipsis

Component: 

const TestScreen = () => {

  _renderTruncatedFooter = (handlePress) => {
    return (
      <Text style={{color: '#999'}} onPress={handlePress}>
        more
      </Text>
    );
  }
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <ReadMore
          numberOfLines={2}
          renderTruncatedFooter={this._renderTruncatedFooter}
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborumasd
          </ReadMore>
      </View>
    </View>
  );
};
export default TestScreen;

Upvotes: 4

Views: 6494

Answers (2)

Fawaz
Fawaz

Reputation: 3560

You can refer code here https://github.com/fawaz-ahmed/react-native-read-more/blob/master/example/src/ReadMore.js

Also its published on npm so you can install it as a regular package https://www.npmjs.com/package/@fawazahmed/react-native-read-more

Upvotes: 0

Kashish Grover
Kashish Grover

Reputation: 2944

This has been a requirement in almost every React Native app that I have worked on so far. I finally have a solution, and I have open sourced it.

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

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

As I mentioned in the repo,

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.

Usage is very simple:

import SeeMore from 'react-native-see-more-inline';

<SeeMore numberOfLines={2} style={fontStyle}>
  {VERY_LARGE_TEXT}
</SeeMore>

To accurately calculate the width of the text, remember to explicitly pass font styles:

fontStyle = { fontFamily: 'CustomFont', fontSize: 14, fontWeight: '300' }

I have done my best to keep the readme as verbose as possible. Go ahead and try it, and do give inputs so that I can improve the implementation even more.

Here's what it looks like:

Upvotes: 6

Related Questions