Flickering "See more" text on first render on Android.

[sasha9878]

On iOS it is working fine but on Android when the page loads for the first time, the "See more" text flickers i.e first the text is shown and then "See more" and "ellipsis" shows. Using react-native latest version 0.63.

<ReadMore
          seeMoreStyle={styles.readMoreContainer}
          numberOfLines={3}
          expandOnly={true}
          style={ styles.message}
          allowFontScaling={false}
          debounceSeeMoreCalc={0}
          animate={false}
        >

[fawaz-ahmed]

I'll have a look @jeon9878

---

From: jeon9878 @.> Sent: Tuesday, April 13, 2021 11:37:17 AM To: fawaz-ahmed/react-native-read-more @.> Cc: Subscribed @.***> Subject: [fawaz-ahmed/react-native-read-more] Flickering "See more" text on first render on Android. (#28)

On iOS it is working fine but on Android when the page loads for the first time, the "See more" text flickers i.e first the text is shown and then "See more" and "ellipsis" shows. Using react-native latest version 0.63.

<ReadMore seeMoreStyle={styles.readMoreContainer} numberOfLines={3} expandOnly={true} style={ styles.message} allowFontScaling={false} debounceSeeMoreCalc={0} animate={false}

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/fawaz-ahmed/react-native-read-more/issues/28, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEJEVIB4GHISBT7C3LPIXQTTIPRB3ANCNFSM422WCK2Q.

[sasha9878]

I tried it with setting animate={false} and debounceSeeMoreCalc={0} but still Android seems not to work properly. Please solution asap

[fawaz-ahmed]

@jeon9878 since it takes 2 renders to complete the calculation on where to position see more therefore you see it later. For the flicker can you share a video ? Also have you tried setting up the prop preserveLinebreaks={true}

---

From: jeon9878 @.> Sent: Tuesday, April 13, 2021 11:52:39 AM To: fawaz-ahmed/react-native-read-more @.> Cc: Fawaz Ahmed @.>; Comment @.> Subject: Re: [fawaz-ahmed/react-native-read-more] Flickering "See more" text on first render on Android. (#28)

I tried it with setting animate={false} and debounceSeeMoreCalc={0} but still Android seems not to work properly. Please solution asap

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/fawaz-ahmed/react-native-read-more/issues/28#issuecomment-818488288, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEJEVIEXTI37SWDO74RFQH3TIPS3PANCNFSM422WCK2Q.

[sasha9878]

Yes tried this preserveLinebreaks={true} but still not succeded. Here is the video https://user-images.githubusercontent.com/35032724/114513299-ab012980-9c57-11eb-8e47-958ca1a688e6.mov since it takes 2 renders to complete the calculation on where to position see more therefore you see it later. Quick solutions for this?

[fawaz-ahmed]

@jeon9878 Use version 1.1.5 and make sure to supply prop backgroundColor if anything other than white Thanks for sharing the video, I can see the flicker. It should render show more in the correct place rather moving in from the corner. I will take that up!

[sasha9878]

@fawaz-ahmed the flickering effect is not happening on version 1.1.5 (y) . However the show more view size is cropping the text now. The backgroundColor is white only. Please suggest

[fawaz-ahmed]

@jeon9878 set prop allowFontScaling={false} it's a known issue with android also mentioned here If this doesn't works, try passing the styles for see more, see prop seeMoreStyle

[sasha9878]

@fawaz-ahmed thanks for your quick solutions. It worked with some styling to seeMoreStyle. One more thing, i need to add underline style to show more text and I have added textDecorationLine: 'underline' to seeMoreStyle but the underline is showing below the ellipsis too. It should be only below the text. A great library to use. Just this and it takes away all other

[fawaz-ahmed]

@jeon9878 no quick fix for this

---

From: jeon9878 @.> Sent: Tuesday, April 13, 2021 2:16:28 PM To: fawaz-ahmed/react-native-read-more @.> Cc: Fawaz Ahmed @.>; Mention @.> Subject: Re: [fawaz-ahmed/react-native-read-more] Flickering "See more" text on first render on Android. (#28)

@fawaz-ahmedhttps://github.com/fawaz-ahmed thanks for you quick solutions. It worked with some styling to seeMoreStyle. One more thing, i need to add underline style to show more text and I have added textDecorationLine: 'underline' to seeMoreStyle but the underline is showing below the ellipsis too. It should be only below the text.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/fawaz-ahmed/react-native-read-more/issues/28#issuecomment-818585073, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEJEVIFNGLVR526HZI66QMTTIQDWZANCNFSM422WCK2Q.

[sasha9878]

@fawaz-ahmed on latest version it is working however. Can you please provide how it is handled in latest version?

[fawaz-ahmed]

@jeon9878 you can refer to code. I won't be able to give you all the details here. I'll try to fix this asap but cant give you an estimate, maybe I'll do it around the weekend

---

From: jeon9878 @.> Sent: Tuesday, April 13, 2021 3:01:31 PM To: fawaz-ahmed/react-native-read-more @.> Cc: Fawaz Ahmed @.>; Mention @.> Subject: Re: [fawaz-ahmed/react-native-read-more] Flickering "See more" text on first render on Android. (#28)

@fawaz-ahmedhttps://github.com/fawaz-ahmed on latest version it is working however. Can you please provide how it is handled in latest version?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/fawaz-ahmed/react-native-read-more/issues/28#issuecomment-818613735, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEJEVIA6H77VXSDIPSAI2H3TIQI7XANCNFSM422WCK2Q.

[sasha9878]

@fawaz-ahmed ok thank you (y)

[fawaz-ahmed]

@jeon9878 fix for this issue has been added, please upgrade to version 2.0.2