Truncated Text View Component For React Native

A component to smoothly truncate and expand text in React Native apps.

How to use it:

1. Installation.

# Yarn
$ yarn add react-native-truncated-text-view

# NPM
$ npm i react-native-truncated-text-view

2. Import the TruncatedTextView component.

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { TruncatedTextView } from 'react-native-truncated-text-view';

3. Basic usage.

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Truncated Text View</Text>
      <TruncatedTextView
        text={DATA}
        style={styles.textStyle}
        tailTextStyle={styles.tailText}
        numberOfLines={2}
        enableShowLess={false}
      />
    </View>
  );
}

4. Available props.

text: fullText,
lineHeight = DEFAULT_LINE_HEIGHT,
numberOfLines = DEFAULT_NUMBER_OF_LINE,
enableShowLess = true,
enableOnPressToggle = true,
enableLayoutAnimation = true,
collapsedText = '.. See more',
expandedText = '.. See Less',

Preview:

Download Details:

Author: lohenyumnam

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/lohenyumnam/react-native-truncated-text-view

License: MIT