New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-native-read-more-text

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-read-more-text

Add a 'Read More' and optionally a 'Read Less' button to text that exceeds a given number of lines

  • 1.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7K
increased by15.69%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-read-more-text

Installation

npm i react-native-read-more-text --save

or with yarn

yarn add react-native-read-more-text

Props

PropTypeRequiredNote
onReadyfunctionnocallback function to know when the component is ready
childrenstringyesString to render on read more component
renderTruncatedFooterfunctionnofunction that will replace the Read more label
renderRevealedFooterfunctionnofunction that will replace the Hide label

Try it on Expo

Example

Usage


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 = () => {
    // ...
  }
}

FAQs

Package last updated on 05 Feb 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc