Skip to content

lohenyumnam/react-native-truncated-text-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7b3af45 · Dec 11, 2023

History

52 Commits
Jan 23, 2023
Jan 29, 2023
Dec 11, 2023
Jan 23, 2023
Dec 11, 2023
Jan 23, 2023
Jan 23, 2023
Jan 23, 2023
Jan 23, 2023
Jan 23, 2023
Jan 23, 2023
Jan 23, 2023
Jan 23, 2023
Jan 27, 2023
Oct 31, 2023
Jan 23, 2023
Jan 23, 2023
Dec 11, 2023
Jan 23, 2023
Jan 23, 2023
Dec 11, 2023

Repository files navigation

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

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