@akbeniwal/react-native-read-more

A high-performance, lightweight React Native collapsible text component that truncates long text after a specified number of lines and appends an inline "Read More" trigger, expanding and collapsing with smooth, animated height transitions.

Key Features

• ⚡ High Performance: Uses native onTextLayout callbacks and standard React hooks, completely avoiding unstable React internal fiber tree traversal (_dispatchInstances / memoizedProps).
• 🚀 Hardware-Accelerated Height Transitions: Smooth, animated height transitions when expanding and collapsing the text.
• 🎨 Extremely Customizable: Adjust styling of the main text block and the action button triggers independently.
• 📱 Robust Layout Sync: Retains original inline layout and styles perfectly during transition animations.
• 🔥 TypeScript First: Full type safety with out-of-the-box definitions.
• ⚙️ Performance Tuned: Avoids heavy layout overhead and bridge communication by using single-pass layout measurements.

Installation

Install using yarn:

yarn add @akbeniwal/react-native-read-more

Or using npm:

npm install @akbeniwal/react-native-read-more

Usage & Examples

Basic Usage

import React from "react";
import { SafeAreaView, StyleSheet } from "react-native";
import ReadMore from "@akbeniwal/react-native-read-more";

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ReadMore numberOfLines={3}>
        React Native brings the best parts of native development to React, a
        best-in-class JavaScript library for building user interfaces. You can
        use React Native today in your existing Android and iOS projects or you
        can create a whole new app from scratch.
      </ReadMore>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    justifyContent: "center",
  },
});

Customized Animations

Custom Animation Duration

<ReadMore numberOfLines={3} animated={true} animationDuration={500}>
  Your long text content goes here...
</ReadMore>

Customized Styles

<ReadMore
  numberOfLines={3}
  textStyle={{ fontSize: 16, color: "#333333", lineHeight: 22 }}
  actionTextStyle={{ fontSize: 16, fontWeight: "bold", color: "#007AFF" }}
>
  Your long text content goes here...
</ReadMore>

Custom Button Labels

<ReadMore
  numberOfLines={2}
  readMoreText="...Show more"
  readLessText=" Show less"
>
  Your long text content goes here...
</ReadMore>

Component API Props

| Prop | Type | Required | Default | Description | | :---------------------- | :--------------------- | :------- | :------------ | :---------------------------------------------------------- | | children | string | Yes | - | The raw text block to be displayed and truncated. | | numberOfLines | number | No | 3 | Number of lines to show before truncating the content. | | animated | boolean | No | true | Enables smooth height expand/collapse transitions. | | animationDuration | number | No | 300 | Duration of the expand/collapse transition in milliseconds. | | readMoreText | string | No | "Read more" | The label to show for expanding the truncated text. | | readLessText | string | No | "Read less" | The label to show for collapsing the expanded text. | | textStyle | StyleProp<TextStyle> | No | - | Custom text styles applied to the main text body. | | actionTextStyle | StyleProp<TextStyle> | No | - | Custom text styles applied to the Read More/Less buttons. |

Important Layout Notes

• Parent Container Flex Restrictions: Ensure that the immediate parent container View of the ReadMore component does not include flexDirection: 'row' or flexWrap: 'wrap'. These constraints interfere with the layout measurement views that run off-screen to calculate exact character truncation indices.

Roadmap

🚀 v1.1.0

• [ ] Interactive layout updates on parent view resize events.
• [ ] Native-driven height transition configurations.
• [ ] Customizable truncation token insertion (e.g. customized ellipsis characters).

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Abhishek Beniwal