The react-native-truncated-text-view from lohenyumnam

react-native-truncated-text-view's Introduction

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

react-native-truncated-text-view's People

Contributors

Stargazers

Watchers

react-native-truncated-text-view's Issues

enableShowMore

I am suggesting that a "enableShowMore" property should be added to disable the "Show More" button. Currently, i am using a card product title to limit the number of lines shown in the title. I've successfully disabled the "Show Less" button, but the "Show More" button is still being displayed in the title.

Recommend Projects