{"_id":"@akbeniwal/react-native-read-more","_rev":"2-7c00600d0aeffe08c35b55b481d9a15f","name":"@akbeniwal/react-native-read-more","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@akbeniwal/react-native-read-more","version":"1.0.0","keywords":["react-native","read-more","read-less","expandable-text","collapsible-text","text","animated-text","react-native-read-more","show-more","show-less"],"author":{"name":"Abhishek Beniwal"},"license":"MIT","_id":"@akbeniwal/react-native-read-more@1.0.0","maintainers":[{"name":"akbeniwal","email":"abhishekbeniwal363@gmail.com"}],"homepage":"https://github.com/AKBeniwal1700/react-native-read-more#readme","bugs":{"url":"https://github.com/AKBeniwal1700/react-native-read-more/issues"},"dist":{"shasum":"c68d74ae12eebd07643dcc380cbe315146d81217","tarball":"https://registry.npmjs.org/@akbeniwal/react-native-read-more/-/react-native-read-more-1.0.0.tgz","fileCount":14,"integrity":"sha512-u+jiRsg2VktA0Hy9W2Ogd6FuHozottznEoBsTg7LgAr0rNBv47lgtgkBpCkTew6Hsn9AH0rxZPdFHQCxd3Uapw==","signatures":[{"sig":"MEUCIQDnkzBSKUYtRgtY2lQ7dPqKvKikiZrGRIqVbJDoLPH54AIgGOEbuRQnFZr40KR+YAj80eoaM50qAuAUS3yrHcmIUuo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25786},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prepare":"npm run build"},"_npmUser":{"name":"akbeniwal","email":"abhishekbeniwal363@gmail.com"},"repository":{"url":"git+https://github.com/AKBeniwal1700/react-native-read-more.git","type":"git"},"_npmVersion":"10.9.8","description":"A high-performance React Native Read More component with animated expand/collapse support.","directories":{},"_nodeVersion":"22.22.3","_hasShrinkwrap":false,"devDependencies":{"react":"^19.2.7","typescript":"^6.0.3","@types/react":"^19.2.16","react-native":"^0.85.3"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-read-more_1.0.0_1780651495733_0.4549867063547457","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@akbeniwal/react-native-read-more","version":"1.0.1","description":"A high-performance React Native Read More component with animated expand/collapse support.","main":"dist/index.js","types":"dist/index.d.ts","keywords":["react-native","read-more","read-less","expandable-text","collapsible-text","text","animated-text","react-native-read-more","show-more","show-less"],"author":{"name":"Abhishek Beniwal"},"license":"MIT","homepage":"https://github.com/AKBeniwal1700/react-native-read-more#readme","repository":{"type":"git","url":"git+https://github.com/AKBeniwal1700/react-native-read-more.git"},"bugs":{"url":"https://github.com/AKBeniwal1700/react-native-read-more/issues"},"scripts":{"build":"tsc","prepare":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0"},"devDependencies":{"@types/react":"^19.2.16","react":"^19.2.7","react-native":"^0.85.3","typescript":"^6.0.3"},"_id":"@akbeniwal/react-native-read-more@1.0.1","_nodeVersion":"22.22.3","_npmVersion":"10.9.8","dist":{"integrity":"sha512-O7AeQV7zA14WQ6hkg0IabY/jOgYdTpdHFGn2N/WN/2VQsS50zeXjJq6L4T4UI2NmLw/Q6BOubxMTXF8a82xhPQ==","shasum":"fdb897359269b5cd30979a76ae966912e349b0b4","tarball":"https://registry.npmjs.org/@akbeniwal/react-native-read-more/-/react-native-read-more-1.0.1.tgz","fileCount":14,"unpackedSize":26135,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCPgirvvVXt/sGyer0qFf5y7FnSknfXIaXTMRhzczjXBQIgD+YZRWrvI/uiEkozXX0rwyXOdEyMuem3ZFREBnXJw3Q="}]},"_npmUser":{"name":"akbeniwal","email":"abhishekbeniwal363@gmail.com"},"directories":{},"maintainers":[{"name":"akbeniwal","email":"abhishekbeniwal363@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-read-more_1.0.1_1780656861300_0.9414274409456718"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-05T09:24:55.620Z","modified":"2026-06-05T10:54:21.616Z","1.0.0":"2026-06-05T09:24:55.867Z","1.0.1":"2026-06-05T10:54:21.493Z"},"bugs":{"url":"https://github.com/AKBeniwal1700/react-native-read-more/issues"},"author":{"name":"Abhishek Beniwal"},"license":"MIT","homepage":"https://github.com/AKBeniwal1700/react-native-read-more#readme","keywords":["react-native","read-more","read-less","expandable-text","collapsible-text","text","animated-text","react-native-read-more","show-more","show-less"],"repository":{"type":"git","url":"git+https://github.com/AKBeniwal1700/react-native-read-more.git"},"description":"A high-performance React Native Read More component with animated expand/collapse support.","maintainers":[{"name":"akbeniwal","email":"abhishekbeniwal363@gmail.com"}],"readme":"# @akbeniwal/react-native-read-more\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/npm/v/@akbeniwal/react-native-read-more.svg\" alt=\"npm version\" />\n  <img src=\"https://img.shields.io/npm/l/@akbeniwal/react-native-read-more.svg\" alt=\"license\" />\n  <img src=\"https://img.shields.io/npm/dm/@akbeniwal/react-native-read-more.svg\" alt=\"npm downloads\" />\n  <img src=\"https://img.shields.io/github/issues/akbeniwal/react-native-read-more.svg\" alt=\"issues\" />\n</p>\n\nA 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.\n\n---\n\n## Key Features\n\n- ⚡ **High Performance**: Uses native `onTextLayout` callbacks and standard React hooks, completely avoiding unstable React internal fiber tree traversal (`_dispatchInstances` / `memoizedProps`).\n- 🚀 **Hardware-Accelerated Height Transitions**: Smooth, animated height transitions when expanding and collapsing the text.\n- 🎨 **Extremely Customizable**: Adjust styling of the main text block and the action button triggers independently.\n- 📱 **Robust Layout Sync**: Retains original inline layout and styles perfectly during transition animations.\n- 🔥 **TypeScript First**: Full type safety with out-of-the-box definitions.\n- ⚙️ **Performance Tuned**: Avoids heavy layout overhead and bridge communication by using single-pass layout measurements.\n\n---\n\n## Installation\n\nInstall using **yarn**:\n\n```bash\nyarn add @akbeniwal/react-native-read-more\n```\n\nOr using **npm**:\n\n```bash\nnpm install @akbeniwal/react-native-read-more\n```\n\n---\n\n## Usage & Examples\n\n### Basic Usage\n\n```tsx\nimport React from \"react\";\nimport { SafeAreaView, StyleSheet } from \"react-native\";\nimport ReadMore from \"@akbeniwal/react-native-read-more\";\n\nconst App = () => {\n  return (\n    <SafeAreaView style={styles.container}>\n      <ReadMore numberOfLines={3}>\n        React Native brings the best parts of native development to React, a\n        best-in-class JavaScript library for building user interfaces. You can\n        use React Native today in your existing Android and iOS projects or you\n        can create a whole new app from scratch.\n      </ReadMore>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 16,\n    justifyContent: \"center\",\n  },\n});\n```\n\n---\n\n### Customized Animations\n\n#### Custom Animation Duration\n\n```tsx\n<ReadMore numberOfLines={3} animated={true} animationDuration={500}>\n  Your long text content goes here...\n</ReadMore>\n```\n\n#### Customized Styles\n\n```tsx\n<ReadMore\n  numberOfLines={3}\n  textStyle={{ fontSize: 16, color: \"#333333\", lineHeight: 22 }}\n  actionTextStyle={{ fontSize: 16, fontWeight: \"bold\", color: \"#007AFF\" }}\n>\n  Your long text content goes here...\n</ReadMore>\n```\n\n#### Custom Button Labels\n\n```tsx\n<ReadMore\n  numberOfLines={2}\n  readMoreText=\"...Show more\"\n  readLessText=\" Show less\"\n>\n  Your long text content goes here...\n</ReadMore>\n```\n\n---\n\n## Component API Props\n\n| Prop                    | Type                   | Required | Default       | Description                                                 |\n| :---------------------- | :--------------------- | :------- | :------------ | :---------------------------------------------------------- |\n| **`children`**          | `string`               | **Yes**  | -             | The raw text block to be displayed and truncated.           |\n| **`numberOfLines`**     | `number`               | No       | `3`           | Number of lines to show before truncating the content.      |\n| **`animated`**          | `boolean`              | No       | `true`        | Enables smooth height expand/collapse transitions.          |\n| **`animationDuration`** | `number`               | No       | `300`         | Duration of the expand/collapse transition in milliseconds. |\n| **`readMoreText`**      | `string`               | No       | `\"Read more\"` | The label to show for expanding the truncated text.         |\n| **`readLessText`**      | `string`               | No       | `\"Read less\"` | The label to show for collapsing the expanded text.         |\n| **`textStyle`**         | `StyleProp<TextStyle>` | No       | -             | Custom text styles applied to the main text body.           |\n| **`actionTextStyle`**   | `StyleProp<TextStyle>` | No       | -             | Custom text styles applied to the Read More/Less buttons.   |\n\n---\n\n## Important Layout Notes\n\n- **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.\n\n---\n\n## Roadmap\n\n### 🚀 v1.1.0\n\n- [ ] Interactive layout updates on parent view resize events.\n- [ ] Native-driven height transition configurations.\n- [ ] Customizable truncation token insertion (e.g. customized ellipsis characters).\n\n---\n\n## License\n\nThis project is licensed under the **MIT License** - see the LICENSE file for details.\n\n## Author\n\n**Abhishek Beniwal**\n","readmeFilename":"README.md"}