Handle Read More/ Read Less from outside.

[saad9624-tribalScale]

Is there any prop available to handle read more / read less from outside. like on button press or something.

[fawaz-ahmed]

@saad9624-tribalScale you can use the onExpand and onCollapse callback props

[saad9624-tribalScale]

"optional callback executed when expanded"

I didnt find any option to call this function from outside of ReadMore component. It's just executing when expanded.

[fawaz-ahmed]

@saad9624-tribalScale none of the methods can be called from outside. Can you explain what is the use case that you're trying to achieve ?

[saad9624-tribalScale]

I am trying to expand and collapse from onPress event of custom button. Is it doable?

[fawaz-ahmed]

@saad9624-tribalScale at the moment its not supported

[saad9624-tribalScale]

I am trying to do this externally because customComponent is not very customizable.

[fawaz-ahmed]

@saad9624-tribalScale in this file https://github.com/fawaz-ahmed/react-native-read-more/blob/master/example/src/ReadMore.js line 182 The toggle method, you need to call this from outside.

Pass a ref to ReadMore and try calling this method.

Otherwise you can raise a PR, I can merge it.

[saad9624-tribalScale]

Sure, Thanks.

[rawroland]

@fawaz-ahmed I had difficulties passing a ref, so I created a pr which adds a collapsed prop (https://github.com/fawaz-ahmed/react-native-read-more/pull/70). Hope this could solve the problem.

[fawaz-ahmed]

@rawroland would you be able to push the updates anytime soon ?

[phuongltd97dn]

@fawaz-ahmed Could you please review and merge above pull request as soon as possible?

[fawaz-ahmed]

@phuongltd97dn the PR needs some more changes and I'm waiting for it https://github.com/fawaz-ahmed/react-native-read-more/pull/70#issuecomment-1312741735

[fawaz-ahmed]

Sample code to control expand/collapse via prop:

const App = () => {
  const [collapsed, setCollapsed] = useState(true);

  const toggle = () => {
    setCollapsed(!collapsed);
  };

  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.root}>
        <ReadMore
          numberOfLines={3}
          style={styles.textStyle}
          collapsed={collapsed}
          onPress={toggle}
          onSeeMore={() => setCollapsed(false)}
          onSeeLess={() => setCollapsed(true)}>
          {
            "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."
          }
        </ReadMore>
      </View>
    </SafeAreaView>
  );
};

[fawaz-ahmed]

@phuongltd97dn upgrade to version 3.0.0