Issue 78: pass information whether can be expanded or not in on ready… (#81)

* Issue 78: pass information whether can be expanded or not in on ready callback, update example too

* Issue 78: revert number fo lines back to default value which is 3

Author: fawaz-ahmed

README.md

@@ -76,7 +76,7 @@ export default Home;
 | `expandOnly` | `bool` | no | defaults to `false` => hide see less option similar to a linkedIn post
 | `onExpand` | `func` | no | optional callback executed when expanded
 | `onCollapse` | `func` | no | optional callback executed when collapsed
-| `onReady` | `func` | no | optional callback executed when see more placement measurements are completed
+| `onReady` | `func` | no | optional callback executed when see more placement measurements are completed, this function will pass 2 arguments `({ canExpand, expandedLinesCount })`, where `canExpand` is a boolean specifying if text can be expanded and `expandedLinesCount` is a number indicating the number of lines when text is in expanded state.
 | `collapsed` | `bool` | no | Control collapsed state programatically see [issue](https://github.com/fawaz-ahmed/react-native-read-more/issues/61)
 | `debug` | `bool` | no | print debug logs to examine
 | `seeMoreContainerStyleSecondary` | `object` | no | Incase of text overlap, pass { position: 'relative' } see [issue](https://github.com/fawaz-ahmed/react-native-read-more/issues/52) (not recommended)

example/App.js

@@ -1,12 +1,15 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {SafeAreaView, StyleSheet, View} from 'react-native';
 import ReadMore from './src';
 
 const App = () => {
+  const onReady = ({canExpand, expandedLinesCount}) => {
+    // console.log('on ready', {canExpand, expandedLinesCount});
+  };
   return (
     <SafeAreaView style={styles.safe}>
       <View style={styles.root}>
-        <ReadMore numberOfLines={3} style={styles.textStyle}>
+        <ReadMore numberOfLines={3} style={styles.textStyle} onReady={onReady}>
           {
             "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
           }

example/src/ReadMore.js

@@ -471,7 +471,7 @@ const ReadMore = ({
 
     if (!_seeMore) {
       log('no measurement is needed');
-      onReady();
+      onReady({canExpand: _seeMore, expandedLinesCount: lines.length});
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [numberOfLines, lines]);
@@ -581,7 +581,7 @@ const ReadMore = ({
 
     const handle = setTimeout(() => {
       setIsReady(true);
-      onReady();
+      onReady({canExpand: seeMore, expandedLinesCount: lines.length});
     }, debounceSeeMoreCalc);
     return () => clearTimeout(handle);
     // eslint-disable-next-line react-hooks/exhaustive-deps

index.d.ts

@@ -15,7 +15,7 @@ export interface ReadMoreProps extends TextProps {
     expandOnly?: boolean;
     seeMoreOverlapCount?: number;
     debounceSeeMoreCalc?: number;
-    onReady?: () => void;
+    onReady?: ({ canExpand: boolean, expandedLinesCount: number }) => void;
     seeMoreContainerStyleSecondary?: StyleProp<ViewStyle>;
     onSeeMore?: () => void;
     onSeeLess?: () => void;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fawazahmed/react-native-read-more",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "A simple react native library to show large blocks of text in a condensed manner with the ability to collapse and expand.",
   "main": "dist/index.js",
   "types": "index.d.ts",