Add show more text component #3736
Conversation
| @@ -0,0 +1,33 @@ | |||
| import React from 'react'; | |||
|
|
|||
| import ReadMore from '@fawazahmed/react-native-read-more'; | |||
There was a problem hiding this comment.
Could you explain the benefits of this lib? Couldn't we just do this with a character count and simple state in this component? The lib is a bit sloppy built (e.g. hard to find the source code) so I'm a bit hesitant at adding it.
There was a problem hiding this comment.
aha, I approached it similarly (mindset wise) using
onTextLayout={({ nativeEvent: { lines } }) =>
setShowMoreButton(lines.length > numberOfLines)
...But it didn't work well at all, would be interesting trying with character count as you mentioned
(also couldn't add the show more button by the end of the last line, but that's not a required thing)
There was a problem hiding this comment.
Seems like counting characters wouldn't work without a custom parser, because we would need to count \n\n` differently, since it fills more space, as the following:
There was a problem hiding this comment.
on the example above I'm using numberOfLines={5} on the text to limit
There was a problem hiding this comment.
Expo seems to have a lib for this as well https://github.com/expo/react-native-read-more-text
There was a problem hiding this comment.
They seem to use an api to find out the height of the text component
https://github.com/expo/react-native-read-more-text/blob/3e63ca30bd0b7925893cf76bc015ab7e9b7a75a3/index.js#L103-L105
There was a problem hiding this comment.
Shall I copy their approach and do a component in our codebase? wdyt? @gewfy
There was a problem hiding this comment.
Thanks for doing some research here! I believe we did something similar, height based, in the old. Let me check :)
There was a problem hiding this comment.
Yeah exactly, in the old ap we did what you proposed ⬆️
onTextLayout={({ nativeEvent: { lines } }) => {
if (lines.length > NUMBER_OF_LINES && isNil(truncated)) {
setTruncated(true);
}
}}And then just absolute position a Show more at the right bottom of that component, or bellow.
There was a problem hiding this comment.
Since this seems more complex than it looks on the surface I leave it up to you. Fine to go with the lib you chose too :)
| @@ -259,7 +259,7 @@ const CompletedSessionModal = () => { | |||
| <> | |||
| <Spacer16 /> | |||
| <Gutters> | |||
| <Markdown>{exercise?.description}</Markdown> | |||
| <ShowMoreText>{exercise?.description}</ShowMoreText> | |||
There was a problem hiding this comment.
One tiny thing. Aren't we loosing the possibility to use markdown with this? Wrap it in <ShowMoreText>?
There was a problem hiding this comment.
Markdown doesn't seem to support numberOfLines or similar functionality, does it? 🤔
There was a problem hiding this comment.
ah you mean using the library, I need to try that out
Simulator.Screen.Recording.-.iPhone.14.Plus.-.2023-09-25.at.13.44.51.mp4