Does not break properly when there is a linebreak in the text

[fliklab]

Thanks to @kashishgrover for developing the plug-in exactly what i needed.

In a recent update, I found something different from before:
If there is a line break in the text, it works to break the text right there and display 'see more'.
Previously, there was a case where 'see more' was not displayed when there was a line break, so it seems to be an improvement. However, it seems not intended when there is a line-break in a position less than the max-number of lines, 'see more' is displayed from there.

[dzbrozek]

Faced the same issue, fixed it by changing implementation of getTruncationIndex

async function getTruncationIndex(
  text,
  numberOfLines,
  fontSize,
  fontFamily,
  fontWeight,
  containerWidth,
  seeMoreText,
) {
  const scaledFontSize = Math.round(fontSize * PixelRatio.getFontScale());

  const { width: totalTextWidth, lineCount, lineInfo } = await reactNativeTextSize.measure({
    text,
    fontSize: scaledFontSize,
    fontFamily,
    fontWeight,
    width: containerWidth,
    lineInfoForLine: numberOfLines - 1
  });
  if (lineCount <= numberOfLines) {
    return undefined;
  }
  return Math.ceil(lineInfo.end) - (seeMoreText.length + 10);
}

[Karansidds]

Can someone please take a look at this issue? The above solution doesn't work out for large texts with multiple line breaks.

[neiker]

The problem is this module uses the dimensions of the text instead of number of lines. I solved it using lineCount like this:

import { PixelRatio } from "react-native";
import reactNativeTextSize, { TSFontSpecs } from "react-native-text-size";

/**
 * Finds the point where the text should be truncated, leaving enough space to show
 * the "read more" link and ellipsis
 *
 * @param {string} text Text for which you need to find the truncation index
 * @param {number} numberOfLines Number of lines being displayed
 * @param {object} specs {fontSize, fontFamily, letterSpacing, fontWeight}
 * @param {number} containerWidth Width of the text container
 * @param {string} seeMoreText  "See more" link text
 *
 * @returns {(number|undefined)} number when text should be truncated or undefined otherwise
 */
export async function getTruncationIndex(
  text: string,
  numberOfLines: number,
  specs: TSFontSpecs,
  containerWidth: number,
  seeMoreText: string
) {
  const measureArgs = {
    fontSize: specs.fontSize ? Math.round(specs.fontSize * PixelRatio.getFontScale()) : undefined,
    fontFamily: specs.fontFamily,
    letterSpacing: specs.letterSpacing,
    fontWeight: specs.fontWeight,
    width: containerWidth
  };

  // Check how many lines will take the text
  const { lineCount } = await reactNativeTextSize.measure({
    text,
    ...measureArgs
  });

  // If it already fits on numberOfLines we are done
  if (lineCount <= numberOfLines) {
    return undefined;
  }

  let start = 0;
  let end = text.length;

  // Try to find where to truncate the string using binary search
  while (start <= end) {
    const middle = Math.floor(start + (end - start) / 2);

    const partialMeasure = await reactNativeTextSize.measure({
      text: text.slice(0, middle) + "... " + seeMoreText,
      ...measureArgs
    });

    if (partialMeasure.lineCount > numberOfLines) {
      end = middle - 1;
    } else {
      start = middle + 1;
    }
  }

  return Math.min(start, end);
}