Calculating truncation index not taking into account default React Native word break mode?

[roycedot]

Am I correct that the calculation for truncationIndex doesn't properly account for the default word break mode for React Native's Text? namely, a word will not be cut partially for line wrap - the entire word will be moved to the next line (at least for iOS - I know you can control this behavior with Android).

This severely undercounts the width (really space/pixels) needed to render some given text:
const { width: totalTextWidth } = await reactNativeTextSize.measure({ text, fontSize: scaledFontSize, fontFamily, fontWeight, });

as a line will be filled with empty space if the last word needs to be moved to the next line.

Example of incorrect calculation(s), current v1.3.0 code and behavior I saw using v1.1.0 for a year+:

Expected (and using my fixes):

I have modified SeeMoreUtils.js to instead calculate how each line would be rendered, thus taking into account word break where the word is not broken partially. I can post it here, but

1. please let me know if I'm misunderstanding the current behavior and/or am missing some prop/config that will account for this behavior
2. or if I should just fork, I can do that as well

Just want to help others, if possible

Basically, my code breaks up the text into lines, accounting for word break moving the last word of a line to the next line if it can't fit, so it better mimics the actual rendering when it does the truncationIndex calculation. Then, I re-assemble the text based on numberOfLines and truncate the last line appropriately to fit the seeMoreText

[kashishgrover]

@roycedot thanks for sharing your feedback. You are right that right now we are guessing the amount of whitespace in a line. This can lead to buggy behaviour at times. I haven't been able to find much time for the project lately. Why don't you send a pull request? I would absolutely love to see and review any fixes you might have made around this.

[Karansidds]

@roycedot Can you please submit your solution here? So that I can test it out in my application, as I am facing a similar problem.

[roycedot]

Yes - I will post later tonight. It works well in most iOS situations but there is some fine tuning I need to do and I also need to do some tweaking for Android as it doesn't work nearly as well.

[roycedot]

@Karansidds here is the code for SeeMoreUtils.js

https://pastebin.com/191jzbw2

I will create the pull request tonight. Note, depending on how your app is set up, you'll need to adjust the value of:
const allowFontScaling = false

on Line 95.

My app ignores the OS's font scaling (as it caused too many display issues). If your app doesn't ignore the OS's font scaling, you'll need to set that to true. NOTE: I have not tested an app that does not ignore font scaling, so YMMV

In relation to my last comment and Android, it seems the issue was font scaling and should be good now.

[Karansidds]

@roycedot I tried your solution, but unfortunately it's not working for me. The text shrinks down to one line every time. I don't know if I am doing something wrong. But, FYI I've just replaced your new function with the old function.

[roycedot]

Did you supply numberOfLines as a prop? And set fontSize, fontFamily in style

[Karansidds]

So, this is the part where I call your function to get the truncationIndex.

const findTruncationIndex = async containerWidth => {
    if (
      containerWidthToTruncationIndexMap &&
      containerWidthToTruncationIndexMap[containerWidth]
    ) {
      return containerWidthToTruncationIndexMap[containerWidth];
    }

    const index = await SeeMoreUtil.getTruncationIndex(
      text,
      lines,
      styles.text.fontSize,
      styles.text.fontFamily,
      styles.text.fontWeight,
      containerWidth,
      showButtonText,
    );

    containerWidthToTruncationIndexMap = {
      ...containerWidthToTruncationIndexMap,
      [containerWidth]: index,
    };

    return index;
  };

This is the part where I use the truncationIndex.

<Text
      testID="SeeMore"
      onLayout={isShowingMore ? undefined : onLayout}
      numberOfLines={isShowingMore ? undefined : lines}>
      <Text style={[styles.text, rnStyles.text]}>
        {isShowingMore ? text : text.slice(0, truncationIndex)}
      </Text>
      {'  '}
      {renderSeeMoreSeeLessLink()}
</Text>

And this is how I call the component.

const App = () => {
  const text = `He determined to drop his litigation\nwith the monastry, and relinguish his claims to the wood-cuting\nand fishery rihg at once He was the more ready to do this becuase the rights had becom much less valuable, and he had indeed the vaguest idea where the wood and river in quedtion were.`;

  const styles = {
    text: {
      fontSize: 16,
      fontWeight: '500',
      fontFamily: 'sans',
    },
    showButtonText: {},
    hideButtonText: {},
  };

  return <SeeMore text={text} lines={3} styles={styles} />;
};

Let me know if I am doing it wrong.

[roycedot]

Looks like you have modified a lot of the code included with this library and are calling it differently.

I simply replace SeeMoreUtils.js in node_modules with the one I attached, and then my usage:

<SeeMore
            numberOfLines={5}
            style={{ fontFamily: 'CircularStd-Bold', fontSize: 24, textAlign: 'left' }}
            linkColor={'#FE8A71'}
            linkPressedColor={'#FE8A71'}
            linkStyle={{ fontFamily: 'CircularStd-Bold', fontSize: 24 }}
            seeMoreText={'read more'}
            seeLessText={'hide full text'}
          >
            {postMessageForDisplay}
          </SeeMore>