fix fawaz-ahmed#61: add collapsed prop for toggling state

README.md

@@ -80,6 +80,7 @@ export default Home;
 | `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)
 | `onSeeMoreBlocked` | `func` | no | when a function is passed, will disable the default See More toggling and use the custom callback instead. Useful to do things like open a modal instead of expanding text when See More is pressed.
+| `collapsed` | `bool` | no | a property to set the collapsed state of the text component. Can be used toggle the collapsed state from outside.
 
 Any additional props are passed down to underlying `Text` component.
 

example/src/ReadMore.js

@@ -54,6 +54,7 @@ const ReadMore = ({
   seeMoreContainerStyleSecondary,
   onSeeMoreBlocked,
   debug,
+  collapsed: collapsedProp,
   ...restProps
 }) => {
   const [additionalProps, setAdditionalProps] = useState({});
@@ -80,7 +81,7 @@ const ReadMore = ({
   const [isReady, setIsReady] = useState(false);
   // logic decisioning params
   const [seeMore, setSeeMore] = useState(false);
-  const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsed] = useState(collapsedProp);
   const [afterCollapsed, setAfterCollapsed] = useState(true);
   // copy of children with only text
   const [collapsedChildren, setCollapsedChildren] = useState(null);
@@ -449,6 +450,10 @@ const ReadMore = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [collapsed]);
 
+  useEffect(() => {
+    toggle();
+  }, [collapsedProp, toggle]);
+
   useEffect(() => {
     const handle = setTimeout(() => {
       // to commence measurement chain
@@ -731,6 +736,7 @@ ReadMore.propTypes = {
   seeMoreContainerStyleSecondary: PropTypes.object,
   onSeeMoreBlocked: PropTypes.func,
   debug: PropTypes.bool,
+  collapsed: PropTypes.bool,
 };
 
 ReadMore.defaultProps = {
@@ -757,6 +763,7 @@ ReadMore.defaultProps = {
   seeMoreContainerStyleSecondary: {},
   onSeeMoreBlocked: undefined,
   debug: false,
+  collapsed: true,
 };
 
 export default memo(ReadMore);