Add See More in Your Text View easily

Installation

npm install react-native-truncated-text-view

# for yarn user
yarn add react-native-truncated-text-view

Run the Example

# Get started with the project:

yarn
# Run the example app on iOS:

yarn example ios

# Run the example app on Android:

yarn example android

Usage

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

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}
		 textPropsChild={{allowFontScaling: false}}
         textPropsRoot={{allowFontScaling: false}}
      />
    </View>
  );
}

API

| Prop | Type | Required | Default | Description | | --------------------- | -------------------- | -------- | ----------- | ------------------------------------------------- | | text | string | No | | The text to be displayed | | style | StyleProp | No | | Style for the text | | tailTextStyle | StyleProp | No | | Style for the tail text | | containerStyle | StyleProp | No | | Style for the container | | lineHeight | number | No | 21 | The line height for the text | | numberOfLines | number | No | 2 | The number of lines to be displayed | | enableShowLess | boolean | No | true | Whether to enable the show less functionality | | collapsedText | string | No | .. See more | The collapsed text to be displayed | | expandedText | string | No | .. See Less | The expanded text to be displayed | | enableOnPressToggle | boolean | No | true | Whether to enable on press toggle functionality | | enableLayoutAnimation | boolean | No | true | Whether to enable layout animation | | enableTailView | boolean | No | true | Whether to enable Tail View (See More & See Less) | | textPropsRoot | TextProps | No | Default Value | A property to apply native props to text. | textPropsChild | TextProps | No | Default Value | A property to apply native props to text.

Contributors

• MATERIALBLOCK

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

react-native-truncated-text-view is MIT licensed

Made with create-react-native-library