From 8cc7119c28319405ba5b1716b00e89b036d22dbe Mon Sep 17 00:00:00 2001
From: Yoeven D Khemlani <yoevenkhem@gmail.com>
Date: Mon, 20 Jul 2020 15:17:54 +0800
Subject: [PATCH] added textClickable

---
 README.md | 49 ++++++++++++++++++++++++++-----------------------
 index.js  | 51 ++++++++++++++++++++++++++++++++-------------------
 2 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index f7c6406..a43c004 100644
--- a/README.md
+++ b/README.md
@@ -11,15 +11,16 @@ or with yarn
 ```
 yarn add react-native-read-more-text
 ```
-## Props
 
-| Prop | Type | Required | Note |
-|---|---|---|---|
-| `onReady` | `function` | no | callback function to know when the component is ready
-| `children` | `string` | yes | String to render on read more component
-| `renderTruncatedFooter` | `function` | no | function that will replace the `Read more` label
-| `renderRevealedFooter` | `function` | no | function that will replace the `Hide` label
+## Props
 
+| Prop                    | Type       | Required | Note                                                                                    |
+| ----------------------- | ---------- | -------- | --------------------------------------------------------------------------------------- |
+| `onReady`               | `function` | no       | callback function to know when the component is ready                                   |
+| `children`              | `string`   | yes      | String to render on read more component                                                 |
+| `renderTruncatedFooter` | `function` | no       | function that will replace the `Read more` label                                        |
+| `renderRevealedFooter`  | `function` | no       | function that will replace the `Hide` label                                             |
+| `textClickable`         | `bool`     | no       | if true, tapping anywhere on the text will trigger the expension of text and vice versa |
 
 [Try it on Expo](https://exp.host/@notbrent/read-more-text-example)
 
@@ -28,10 +29,9 @@ yarn add react-native-read-more-text
 ### Usage
 
 ```javascript
-
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import ReadMore from 'react-native-read-more-text';
+import * as React from "react";
+import { View, Text } from "react-native";
+import ReadMore from "react-native-read-more-text";
 
 export class DescriptionCard extends React.Component {
   render() {
@@ -40,9 +40,7 @@ export class DescriptionCard extends React.Component {
     return (
       <View>
         <View style={styles.cardLabel}>
-          <Text style={styles.cardLabelText}>
-            Description
-          </Text>
+          <Text style={styles.cardLabelText}>Description</Text>
         </View>
 
         <View style={styles.card}>
@@ -51,10 +49,9 @@ export class DescriptionCard extends React.Component {
               numberOfLines={3}
               renderTruncatedFooter={this._renderTruncatedFooter}
               renderRevealedFooter={this._renderRevealedFooter}
-              onReady={this._handleTextReady}>
-              <Text style={styles.cardText}>
-                {text}
-              </Text>
+              onReady={this._handleTextReady}
+            >
+              <Text style={styles.cardText}>{text}</Text>
             </ReadMore>
           </View>
         </View>
@@ -64,22 +61,28 @@ export class DescriptionCard extends React.Component {
 
   _renderTruncatedFooter = (handlePress) => {
     return (
-      <Text style={{color: Colors.tintColor, marginTop: 5}} onPress={handlePress}>
+      <Text
+        style={{ color: Colors.tintColor, marginTop: 5 }}
+        onPress={handlePress}
+      >
         Read more
       </Text>
     );
-  }
+  };
 
   _renderRevealedFooter = (handlePress) => {
     return (
-      <Text style={{color: Colors.tintColor, marginTop: 5}} onPress={handlePress}>
+      <Text
+        style={{ color: Colors.tintColor, marginTop: 5 }}
+        onPress={handlePress}
+      >
         Show less
       </Text>
     );
-  }
+  };
 
   _handleTextReady = () => {
     // ...
-  }
+  };
 }
 ```
diff --git a/index.js b/index.js
index 2321165..59757f7 100644
--- a/index.js
+++ b/index.js
@@ -1,11 +1,15 @@
 import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View, TouchableWithoutFeedback } from "react-native";
 
 export default class ReadMore extends React.Component {
+  static defaultProps = {
+    textClickable: false,
+  };
+
   state = {
     measured: false,
     shouldShowReadMore: false,
-    showAllText: false
+    showAllText: false,
   };
 
   async componentDidMount() {
@@ -47,22 +51,31 @@ export default class ReadMore extends React.Component {
     let { numberOfLines } = this.props;
 
     return (
-      <View>
-        <Text
-          numberOfLines={measured && !showAllText ? numberOfLines : 0}
-          style={this.props.textStyle}
-          ref={text => {
-            this._text = text;
-          }}
-        >
-          {this.props.children}
-        </Text>
-
-        {this._maybeRenderReadMore()}
-      </View>
+      <TouchableWithoutFeedback
+        disabled={!this.props.textClickable}
+        onPress={this._handleSwitch}
+      >
+        <View>
+          <Text
+            numberOfLines={measured && !showAllText ? numberOfLines : 0}
+            style={this.props.textStyle}
+            ref={(text) => {
+              this._text = text;
+            }}
+          >
+            {this.props.children}
+          </Text>
+
+          {this._maybeRenderReadMore()}
+        </View>
+      </TouchableWithoutFeedback>
     );
   }
 
+  _handleSwitch = () => {
+    this.setState({ showAllText: !this.state.showAllText });
+  };
+
   _handlePressReadMore = () => {
     this.setState({ showAllText: true });
   };
@@ -99,7 +112,7 @@ export default class ReadMore extends React.Component {
 }
 
 function measureHeightAsync(component) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     component.measure((x, y, w, h) => {
       resolve(h);
     });
@@ -107,12 +120,12 @@ function measureHeightAsync(component) {
 }
 
 function nextFrameAsync() {
-  return new Promise(resolve => requestAnimationFrame(() => resolve()));
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
 }
 
 const styles = StyleSheet.create({
   button: {
     color: "#888",
-    marginTop: 5
-  }
+    marginTop: 5,
+  },
 });