repository·master·Indexed 43 days ago
https://github.com/fawaz-ahmed/react-native-read-moreA React Native library for displaying large blocks of text in a condensed format with 'See more' and 'See less' toggles. Version 3.0.4 provides a pure JS solution compatible with React Native CLI and Expo across all platforms, featuring a ReadMore component that calculates positioning to keep toggles within the same paragraph.
ReadMore package does not render HTML directly. To use it with HTML content, you must first convert your HTML to plain text using a custom HTML-to-text library before passing the resulting string to the ReadMore component.Install the library using npm or yarn. This is a pure JS solution that works with React Native (CLI or Expo) on all platforms and does not require native dependencies.
npm i @fawazahmed/react-native-read-more --save
# or
yarn add @fawazahmed/react-native-read-moreWhen writing tests for components using ReadMore with Jest, you must enable fake timers to handle the internal timing/animations.
Add jest.useFakeTimers(); to your test file.
jest.useFakeTimers();If you encounter issues on Android, try the following:
See more is always shown on Android, pass the prop allowFontScaling={false}.numberOfLines={1} causes text to overlap. To fix this, use a numberOfLines value greater than 1.Text, ensure you are handling layout correctly (refer to library issues for specific edge cases).Import ReadMore from @fawazahmed/react-native-read-more and wrap your text content. You can specify the number of lines to show before the text is condensed using the numberOfLines prop.
import React from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import ReadMore from '@fawazahmed/react-native-read-more';
const Home = () => {
return (
<SafeAreaView style={styles.safe}>
<View style={styles.root}>
<ReadMore numberOfLines={3} style={styles.textStyle}>
{
"Lorem Ipsum is simply dummy text of the printing and typesetting industry..."
}
</ReadMore>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
safe: { flex: 1 },
root: { flex: 1, padding: 16 },
textStyle: { fontSize: 14 },
});
export default Home;The metro.config.js file in the example project defines how the Metro bundler transforms files. It specifically configures getTransformOptions to set inlineRequires to true, which can help improve startup performance by delaying the execution of modules until they are actually required.
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};The ReadMore component accepts several props to customize the behavior and appearance of the expandable text:
| Prop | Type | Default | Description |
|---|---|---|---|
style | object or array | - | Text style |
seeMoreText | string | 'See more' | Text for the expansion trigger |
seeMoreStyle | object or array | - | Text style for seeMoreText |
seeLessText | string | 'See less' | Text for the collapse trigger |
seeLessStyle | object or array | - | Text style for seeLessText |
ellipsis | string | '...' | Ellipsis character |
wrapperStyle | object or array | - | Style for the wrapper View |
numberOfLines | number | 3 | Number of lines to show before condensing |
animate | bool | true | Applies subtle animation to the toggle text |
customTextComponent | React component | Text | Custom component to use for rendering text |
expandOnly | bool | false | If true, hides the 'See less' option (LinkedIn style) |
onExpand | func | - | Callback executed when expanded |
onCollapse | func | - | Callback executed when collapsed |
onReady | func | - | Callback when measurements are complete. Receives ({ canExpand, expandedLinesCount }) |
collapsed | bool | - | Programmatically control collapsed state |
debug | bool | - | Print debug logs |
seeMoreContainerStyleSecondary | object | - | Use { position: 'relative' } to prevent text overlap |
onSeeMore | func | - | Custom callback for 'See More' (disables default toggle) |
onSeeLess | func | - | Custom callback for 'See Less' (disables default toggle) |
Note: Any additional props are passed down to the underlying Text component.
The ReadMore component is the primary entry point for this library. It is exported as a default export and can be used to render text that can be expanded or collapsed based on a specified number of lines.
import ReadMore from './ReadMore';
// Usage within a component
<ReadMore>
Your long text content goes here...
</ReadMore>