fix #61: add collapsed prop for toggling state

[rawroland]

This pr adds a collapsed prop, making it possible to toggle the state of the component from outside. This could be useful if we want to collapse or expand the component upon clicking on the text and not the See more|See less section.

It could be done like this:

const App = () => {
  const [collapsed, setCollapsed] = React.useState(true);
  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.root}>
        <ReadMore
          numberOfLines={3}
          style={styles.textStyle}
          collapsed={collapsed}
          onPress={() => {
            setCollapsed(!collapsed);
          }}>
          {
            "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>
  );
};

In action, it could look like this:

https://user-images.githubusercontent.com/557246/200939012-e79be840-ea9b-4237-b486-713b680a6609.mov

[fawaz-ahmed]

Hi @rawroland , thanks for this PR, though I really appreciate this. I went through PR. Have some observations: 1 What could be a relevant use case for this prop ? other than the one you state above. 2 collapsed is triggering toggle method, it can also have an opposite effect! 3_ You are running toggle in useEffect, this will trigger an unnecessary toggle on start!

[rawroland]

Hello @fawaz-ahmed thanks for your feedback. Concerning your observations:

1_ What could be a relevant use case for this prop ? other than the one you state above.

My current use case is to toggle the collapsed state when I press the text component. It could also be relevant if someone wants to toggle the state using a button, as was the case stated in the issue.

2_ collapsed is triggering toggle method, it can also have an opposite effect!

I triggered the toggle method as you suggested in the issue. My goal is that the collapsed state should mirror the effect of pressing the see more | see less button.

3_ You are running toggle in useEffect, this will trigger an unnecessary toggle on start!

I could run the toggle method only after checking if the state differs from the prop, thus avoiding an unnecessary toggle. What do you think about that?

[fawaz-ahmed]

@rawroland the approach you mentioned looks good. Yes please make the changes, I'll be happy to review.

[phuongltd97dn]

Same issues with me. This PR can fix it.

[fawaz-ahmed]

Changes pushed in https://github.com/fawaz-ahmed/react-native-read-more/pull/73

[rawroland]

Hello @fawaz-ahmed Thank you for pushing the changes and sorry for my very late response. Had some personal issues I which needed sorting out.

[fawaz-ahmed]

Hi @rawroland , nice to know that your personal and github issues, both are sorted. You're welcome!