Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle Read More/ Read Less from outside. #61

Closed
saad9624-tribalScale opened this issue Apr 14, 2022 · 14 comments · Fixed by #73
Closed

Handle Read More/ Read Less from outside. #61

saad9624-tribalScale opened this issue Apr 14, 2022 · 14 comments · Fixed by #73
Labels
enhancement New feature or request

Comments

@saad9624-tribalScale
Copy link

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

@fawaz-ahmed
Copy link
Owner

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

@saad9624-tribalScale
Copy link
Author

"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
Copy link
Owner

@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
Copy link
Author

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

@fawaz-ahmed
Copy link
Owner

@saad9624-tribalScale at the moment its not supported

@saad9624-tribalScale
Copy link
Author

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

@fawaz-ahmed
Copy link
Owner

@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
Copy link
Author

Sure, Thanks.

@fawaz-ahmed fawaz-ahmed added the enhancement New feature or request label May 31, 2022
rawroland added a commit to rawroland/react-native-read-more that referenced this issue Nov 9, 2022
@rawroland
Copy link

rawroland commented Nov 9, 2022

@fawaz-ahmed I had difficulties passing a ref, so I created a pr which adds a collapsed prop (#70). Hope this could solve the problem.

@fawaz-ahmed fawaz-ahmed linked a pull request Dec 11, 2022 that will close this issue
@fawaz-ahmed
Copy link
Owner

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

@phuongltd97dn
Copy link

phuongltd97dn commented Dec 22, 2022

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

@fawaz-ahmed
Copy link
Owner

@phuongltd97dn the PR needs some more changes and I'm waiting for it
#70 (comment)

@fawaz-ahmed
Copy link
Owner

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
Copy link
Owner

@phuongltd97dn upgrade to version 3.0.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
4 participants