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 (
-
- Description
-
+ Description
@@ -51,10 +49,9 @@ export class DescriptionCard extends React.Component {
numberOfLines={3}
renderTruncatedFooter={this._renderTruncatedFooter}
renderRevealedFooter={this._renderRevealedFooter}
- onReady={this._handleTextReady}>
-
- {text}
-
+ onReady={this._handleTextReady}
+ >
+ {text}
@@ -64,22 +61,28 @@ export class DescriptionCard extends React.Component {
_renderTruncatedFooter = (handlePress) => {
return (
-
+
Read more
);
- }
+ };
_renderRevealedFooter = (handlePress) => {
return (
-
+
Show less
);
- }
+ };
_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 (
-
- {
- this._text = text;
- }}
- >
- {this.props.children}
-
-
- {this._maybeRenderReadMore()}
-
+
+
+ {
+ this._text = text;
+ }}
+ >
+ {this.props.children}
+
+
+ {this._maybeRenderReadMore()}
+
+
);
}
+ _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,
+ },
});