Delay in displaying the See More button.

[Karansidds]

Before

After

Description When then component is mounted, the text is displayed without the See More button. After a few seconds, the See More button is displayed. And this delay is visible. I am assuming that it takes some time for calculation. I hope that this issue can be fixed.

Code

<SafeAreaView style={rnStyles.safe}>
      <View style={rnStyles.root}>
        <ReadMore
          numberOfLines={lines}
          style={[styles.text, rnStyles.text]}
          seeMoreText={showButtonText}
          seeLessText={hideButtonText}
          seeMoreStyle={[styles.showButtonText, rnStyles.buttonSpacing]}
          seeLessStyle={[styles.hideButtonText, rnStyles.buttonSpacing]}
          animate={false}
          allowFontScaling={false}
          onExpand={handleActions}
        >
          {text}
      </ReadMore>
    </View>
</SafeAreaView>

// Styles
const rnStyles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  root: {
    flex: 1,
  },
  text: {
    lineHeight: 20,
    marginRight: 5,
  },
  buttonSpacing: {
    marginLeft: 5,
  },
});

[fawaz-ahmed]

@Karansidds thanks for bringing this up ? Any idea how would you expect this to be resolved: 1 Wait till all calculations are complete and then show the component ? 2 Any other way ?

[Choyeongdeok]

how about add loading props like 1_ answer

<ReadMore ... loading={} ... />

If it is added, loading spinner will be shown until the calculations are complete (async loading)

[fawaz-ahmed]

how about add loading props like 1_ answer

<ReadMore ... loading={} ... />

If it is added, loading spinner will be shown until the calculations are complete (async loading)

@Choyeongdeok I will take note of it. Most probably I will add onReady callback so anyone can display a loader of their choice or perform some other operation. Thanks for bringing this up. btw PRs are welcome

[omaryoussef]

btw PRs are welcome

@fawaz-ahmed First thanks for getting this library out, it's really amazing what you've accomplished with it so far. But honestly before saying PRs are welcome you should maybe try to make your code a bit more understandable. setMountHiddenTextTwo setMountHiddenTextFour and other odd naming choices make it very difficult to debug or contribute to your library in any meaningful way.

I've wasted a couple of hours trying to find where is a good spot to trigger onReady but unfortunately a lot of your hooks are repeatedly called on a myriad of layout events it's hard to pinpoint where your code actually decides its done with the calculation especially in the case of text that doesn't need the see more button. I gave up on understanding your code and simply have a constant delayed animation to alleviate this.

If you want people to help with PRs you really need to find a way to make your code easier to read, comments you have right now don't help a whole lot.

[fawaz-ahmed]

@omaryoussef upgrade to ver 2.2.2 Also to explain a bit on the number in layout events, they specify the order in which measurements are made.

[ghost]

that doesnt solve the issue, the event only triggers when the component is shown this makes no sense

[fawaz-ahmed]

@falk-png do you have any solution ? Let me give you a little background to this issue. The library depends on layout events which is triggered after the component is mounted. So calculations are performed after the component is mounted. Also to perfect the measurements, another hidden components are mounted and unmounted after calculations are complete. One way to overcome this was to have an onReady callback so you can show a loader while measurements are done.

If you have a better way please suggest.

[fawaz-ahmed]

@falk-png I'm closing this issue due to no response or better ideas. onReady callback will serve the purpose for waiting till the see more text is shown and if anyone wants to show a spinner while measurements are done, can do so with the help of onReady callback.