@fawazahmed/react-native-read-more - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

example/package.json

@@ -7,2 +7,3 @@ {
     "android": "react-native run-android",
+    "preios": "cd ios && pod install",
     "ios": "react-native run-ios",
@@ -9,0 +10,0 @@ "start": "react-native start",

example/src/ReadMore.js

@@ -7,3 +7,2 @@ import React, {memo, useState, useEffect, useCallback} from 'react';
   View,
-  TouchableOpacity,
   LayoutAnimation,
@@ -32,2 +31,3 @@ Platform,
   customTextComponent: TextComponent,
+  ellipsis,
   ...restProps
@@ -40,2 +40,4 @@ }) => {
   const [afterCollapsed, setAfterCollapsed] = useState(true);
+  const [measurednumberOfLines, setMeasurednumberOfLines] = useState(1);
+  const [numberOfLinesWithSeeLess, setNumberOfLinesWithSeeLess] = useState(1);
 
@@ -64,2 +66,18 @@ const onTextLayout = useCallback(
 
+  const onHiddenSeeLessTextLayoutOne = useCallback(
+    (e) => {
+      const lines = e.nativeEvent?.lines?.length || 1;
+      setMeasurednumberOfLines(lines);
+    },
+    [setMeasurednumberOfLines],
+  );
+
+  const onHiddenSeeLessTextLayoutTwo = useCallback(
+    (e) => {
+      const lines = e.nativeEvent?.lines?.length || 1;
+      setNumberOfLinesWithSeeLess(lines);
+    },
+    [setNumberOfLinesWithSeeLess],
+  );
+
   const toggle = useCallback(() => {
@@ -100,6 +118,7 @@ setCollapsed((prev) => !prev);
     <View style={wrapperStyle}>
+      {/* text component to measure see more position */}
       <TextComponent
         style={StyleSheet.flatten([
           Array.isArray(style) ? StyleSheet.flatten(style) : style,
-          styles.hiddenText,
+          styles.hiddenTextAbsolute,
         ])}
@@ -111,22 +130,42 @@ numberOfLines={numberOfLines + 1}
       </TextComponent>
+      {/* text component to measure number of lines */}
+      <TextComponent
+        style={StyleSheet.flatten([
+          Array.isArray(style) ? StyleSheet.flatten(style) : style,
+          styles.hiddenTextAbsolute,
+        ])}
+        onTextLayout={onHiddenSeeLessTextLayoutOne}>
+        {children || ''}
+      </TextComponent>
+      {/* text component to measure number of lines with see less */}
+      <TextComponent
+        style={StyleSheet.flatten([
+          Array.isArray(style) ? StyleSheet.flatten(style) : style,
+          styles.hiddenTextAbsolute,
+        ])}
+        onTextLayout={onHiddenSeeLessTextLayoutTwo}>
+        {children || ''}
+        {` ${seeLessText}`}
+      </TextComponent>
       <TextComponent {...restProps} style={style} {...textProps}>
         {children || ''}
+        {seeMore && !collapsed && (
+          <TextComponent {...restProps} onPress={toggle} style={seeLessStyle}>
+            {numberOfLinesWithSeeLess > measurednumberOfLines ? '\n' : ' '}
+            {seeLessText}
+          </TextComponent>
+        )}
       </TextComponent>
       {seeMore && collapsed && afterCollapsed && (
         <View style={styles.seeMoreContainer}>
-          <TouchableOpacity
-            onPress={toggle}
-            style={[styles.seeMoreButton, {backgroundColor}]}>
-            <TextComponent {...restProps} style={style}>
-              {'... '}
+          <View style={[styles.seeMoreButton, {backgroundColor}]}>
+            <TextComponent {...restProps} onPress={toggle} style={style}>
+              {ellipsis}{' '}
             </TextComponent>
-            <Text style={seeMoreStyle}>{seeMoreText}</Text>
-          </TouchableOpacity>
+            <Text onPress={toggle} style={seeMoreStyle}>
+              {seeMoreText}
+            </Text>
+          </View>
         </View>
       )}
-      {seeMore && !collapsed && (
-        <TouchableOpacity onPress={toggle} style={styles.seeLessContainer}>
-          <Text style={seeLessStyle}>{seeLessText}</Text>
-        </TouchableOpacity>
-      )}
     </View>
@@ -140,3 +179,3 @@ );
   },
-  hiddenText: {
+  hiddenTextAbsolute: {
     position: 'absolute',
@@ -157,5 +196,2 @@ left: 0,
   },
-  seeLessContainer: {
-    paddingVertical: 4,
-  },
   defaultText: {},
@@ -188,2 +224,3 @@ seeMoreText: {
   ]),
+  ellipsis: PropTypes.string,
 };
@@ -203,4 +240,5 @@
   customTextComponent: Text,
+  ellipsis: '...',
 };
 
 export default memo(ReadMore);

package.json

 {
   "name": "@fawazahmed/react-native-read-more",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "A simple react native library to show large blocks of text in a condensed manner with the ability to collapse and expand.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -5,3 +5,3 @@ # react-native-read-more
 # Why another library ?
-This package is different from regular see more/less components available out there. It's smart enough to calculate where to position `See more` within the same paragraph instead of occupying another line. It is a drop-in replacement for `Text` component and you can control when to apply the see more functionality by configuring the `numberOfLines` prop. Moreover, you can also pass your own custom implementation of `Text` component like `ParsedText` etc.
+This package is different from regular see more/less components available out there. It's smart enough to calculate where to position `See more` and `See less` within the same paragraph instead of occupying another line. It is a drop-in replacement for `Text` component and you can control when to apply the see more functionality by configuring the `numberOfLines` prop. Moreover, you can also pass your own custom implementation of `Text` component like `ParsedText` etc.
 
@@ -33,2 +33,3 @@ ![Example](example/seemore.gif)
 | `seeLessStyle` | `object or array` | no | text style for `See less` text
+| `ellipsis` | `string` | no | defaults to `...`
 | `wrapperStyle` | `object or array` | no | style for wrapper `View`
@@ -35,0 +36,0 @@ | `numberOfLines` | `number` | no | defaults to `3`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1144279

increased by110.96%

Lines of code

340

increased by11.84%

Number of lines in readme file

68

increased by1.49%

Worsened metrics

Number of package files

65

decreased by-1.52%

No dependency changes