react-native-read-more-text

repository·master·Indexed 20 days ago

https://github.com/expo/react-native-read-more-text

A React Native component that truncates long text after a specified number of lines, providing 'Read more' and 'Show less' functionality to expand or collapse the content. It supports custom footers via renderTruncatedFooter and renderRevealedFooter props.

Tokens: 1.5K
Snippets: 3
Records: 5
Agent score: 20%

What's inside react-native-read-more-text

Install react-native-read-more-text
master
You can install the package using npm or yarn.
```
npm i react-native-read-more-text --save
```
```
yarn add react-native-read-more-text
```
https://github.com/expo/react-native-read-more-text/blob/master/README.md

Use the ReadMore component

master

To use ReadMore, wrap a Text component inside it. You can specify the number of lines to show before truncating using numberOfLines. You can also customize the 'Read more' and 'Show less' labels by providing custom render functions to renderTruncatedFooter and renderRevealedFooter. These functions receive a handlePress callback which must be attached to the onPress event of your custom footer component to allow toggling the text state.

import * as React from 'react';
import { View, Text } from 'react-native';
import ReadMore from 'react-native-read-more-text';

export class DescriptionCard extends React.Component {
  render() {
    let { text } = this.props;

    return (
      <View>
        <View style={styles.cardLabel}>
          <Text style={styles.cardLabelText}>
            Description
          </Text>
        </View>

        <View style={styles.card}>
          <View style={styles.cardBody}>
            <ReadMore
              numberOfLines={3}
              renderTruncatedFooter={this._renderTruncatedFooter}
              renderRevealedFooter={this._renderRevealedFooter}
              onReady={this._handleTextReady}>
              <Text style={styles.cardText}>
                {text}
              </Text>
            </ReadMore>
          </View>
        </View>
      </View>
    );
  }

  _renderTruncatedFooter = (handlePress) => {
    return (
      <Text style={{color: Colors.tintColor, marginTop: 5}} onPress={handlePress}>
        Read more
      </Text>
    );
  }

  _renderRevealedFooter = (handlePress) => {
    return (
      <Text style={{color: Colors.tintColor, marginTop: 5}} onPress={handlePress}>
        Show less
      </Text>
    );
  }

  _handleTextReady = () => {
    // ...
  }
}

Reference the ReadMore component props

master

The ReadMore component accepts the following props:

Prop	Type	Required	Note
`children`	`string`	yes	String to render on read more component
`onReady`	`function`	no	callback function to know when the component is ready
`renderTruncatedFooter`	`function`	no	function that will replace the `Read more` label
`renderRevealedFooter`	`function`	no	function that will replace the `Hide` label

Customize the 'Read more' and 'Hide' footers

master

By default, ReadMore renders a simple <Text> component with the labels 'Read more' and 'Hide'. You can override this behavior using renderTruncatedFooter and renderRevealedFooter props. These functions receive a callback function that you should trigger to toggle the text state.

<ReadMore
  numberOfLines={3}
  renderTruncatedFooter={(onPress) => (
    <TouchableOpacity onPress={onPress}>
      <Text style={{ color: 'blue' }}>View Full Text</Text>
    </TouchableOpacity>
  )}
  renderRevealedFooter={(onPress) => (
    <TouchableOpacity onPress={onPress}>
      <Text style={{ color: 'red' }}>Collapse</Text>
    </TouchableOpacity>
  )}
>
  Your long text content...
</ReadMore>

ReadMore Props Reference

master

The ReadMore component accepts the following props:

Prop	Type	Description
`numberOfLines`	`number`	The maximum number of lines to show before truncating the text.
`textStyle`	`StyleProp<TextStyle>`	Styles applied to the internal `Text` component containing the children.
`children`	`ReactNode`	The text content to be displayed and potentially truncated.
`onReady`	`() => void`	A callback function invoked once the component has finished measuring the text and determined if it should show the 'Read more' button.
`renderTruncatedFooter`	`(onPress: () => void) => ReactNode`	A function that returns a custom component to be displayed instead of the default 'Read more' text when the text is truncated. Receives the press handler as an argument.
`renderRevealedFooter`	`(onPress: () => void) => ReactNode`	A function that returns a custom component to be displayed instead of the default 'Hide' text when the text is fully expanded. Receives the press handler as an argument.