@whetware/react-native-stroke-text 0.0.9 → 0.0.11

package/android/src/main/java/com/margelo/nitro/stroketext/HybridStrokeTextView.kt

@@ -3,6 +3,7 @@ package com.margelo.nitro.stroketext
 import android.view.View
 import com.facebook.jni.HybridData
 import com.facebook.react.uimanager.ThemedReactContext
+import kotlin.math.ceil
 
 class HybridStrokeTextView(context: ThemedReactContext) : HybridStrokeTextViewSpec() {
   private val strokeTextView = StrokeTextView(context)
@@ -77,12 +78,14 @@ class HybridStrokeTextView(context: ThemedReactContext) : HybridStrokeTextViewSp
         )
 
     strokeTextView.fontSizePx =
-        StrokeTextView.textToPx(
-            fontSize ?: 14.0,
-            resolvedAllowFontScaling,
-            resolvedMaxFontSizeMultiplier,
-            displayMetrics,
-        )
+        ceil(
+            StrokeTextView.textToPx(
+                fontSize ?: 14.0,
+                resolvedAllowFontScaling,
+                resolvedMaxFontSizeMultiplier,
+                displayMetrics,
+            ).toDouble()
+        ).toFloat()
     strokeTextView.fontWeight = fontWeight
     strokeTextView.fontFamily = fontFamily
     strokeTextView.fontStyle = fontStyle ?: StrokeTextFontStyle.NORMAL

package/android/src/main/java/com/margelo/nitro/stroketext/StrokeTextView.kt

@@ -85,6 +85,8 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
       val prevStrike = textPaint.isStrikeThruText
 
       val saveCount = canvas.save()
+      val compoundPaddingLeft = compoundPaddingLeft
+      val extendedPaddingTop = extendedPaddingTop
 
       canvas.translate(compoundPaddingLeft.toFloat(), extendedPaddingTop.toFloat())
       canvas.translate(-scrollX.toFloat(), -scrollY.toFloat())
@@ -194,6 +196,10 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
 
     // Line limits / ellipsizing
     val maxLines = if (numberOfLines > 0) numberOfLines else Int.MAX_VALUE
+    // React Native's single-line Text does not wrap at spaces. Without horizontal scrolling,
+    // Android TextView can create an internal second line inside a host view that was measured
+    // as one line by the hidden RN Text used for layout.
+    setHorizontallyScrolling(numberOfLines == 1)
     setMaxLines(maxLines)
     ellipsize =
       if (numberOfLines <= 0) {

package/lib/StrokeText.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { I18nManager, StyleSheet, Text, View, } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import { callback, getHostComponent } from 'react-native-nitro-modules';
 import StrokeTextViewConfig from '../nitrogen/generated/shared/json/StrokeTextViewConfig.json';
 const NativeStrokeTextView = getHostComponent('StrokeTextView', () => StrokeTextViewConfig);
@@ -21,6 +21,22 @@ function firstNumber(...values) {
     }
     return undefined;
 }
+function toNativeMeasuredLineText(line) {
+    return line.text.replace(/ /g, '\u00a0');
+}
+function toNativeMeasuredText(lines) {
+    if (lines.length === 0)
+        return undefined;
+    let result = '';
+    lines.forEach((line, index) => {
+        const lineText = toNativeMeasuredLineText(line);
+        result += lineText;
+        if (index < lines.length - 1 && !lineText.endsWith('\n')) {
+            result += '\n';
+        }
+    });
+    return result;
+}
 function toFontWeightString(value) {
     if (typeof value === 'string')
         return value;
@@ -71,32 +87,12 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
     const baseRight = firstNumber(paddingRight, stylePaddingRight, paddingHorizontal, stylePaddingHorizontal, padding, stylePadding) ?? 0;
     const baseBottom = firstNumber(paddingBottom, stylePaddingBottom, paddingVertical, stylePaddingVertical, padding, stylePadding) ?? 0;
     const baseLeft = firstNumber(paddingLeft, stylePaddingLeft, paddingHorizontal, stylePaddingHorizontal, padding, stylePadding) ?? 0;
-    const baseMarginTop = firstNumber(containerStyle.marginTop, containerStyle.marginVertical, containerStyle.margin) ?? 0;
-    const baseMarginRight = firstNumber(containerStyle.marginRight, I18nManager.isRTL ? containerStyle.marginStart : containerStyle.marginEnd, containerStyle.marginHorizontal, containerStyle.margin) ?? 0;
-    const baseMarginBottom = firstNumber(containerStyle.marginBottom, containerStyle.marginVertical, containerStyle.margin) ?? 0;
-    const baseMarginLeft = firstNumber(containerStyle.marginLeft, I18nManager.isRTL ? containerStyle.marginEnd : containerStyle.marginStart, containerStyle.marginHorizontal, containerStyle.margin) ?? 0;
-    const baseMarginStart = toNumber(containerStyle.marginStart);
-    const baseMarginEnd = toNumber(containerStyle.marginEnd);
-    const strokeInsetMarginStyle = strokeInset === 0
-        ? null
-        : {
-            marginTop: baseMarginTop - strokeInset,
-            marginRight: baseMarginRight - strokeInset,
-            marginBottom: baseMarginBottom - strokeInset,
-            marginLeft: baseMarginLeft - strokeInset,
-            ...(baseMarginStart == null
-                ? {}
-                : { marginStart: baseMarginStart - strokeInset }),
-            ...(baseMarginEnd == null
-                ? {}
-                : { marginEnd: baseMarginEnd - strokeInset }),
-        };
     const effectiveNumberOfLines = nativeProps.numberOfLines != null && nativeProps.numberOfLines > 0
         ? nativeProps.numberOfLines
         : undefined;
     const effectiveEllipsizeMode = effectiveNumberOfLines == null
         ? undefined
-        : (nativeProps.ellipsizeMode ?? 'tail');
+        : nativeProps.ellipsizeMode ?? 'tail';
     const mappedTextAlignVerticalFromVerticalAlign = styleVerticalAlign === 'middle'
         ? 'center'
         : toTextAlignVertical(styleVerticalAlign);
@@ -114,7 +110,45 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
     const effectiveTextDecorationLine = nativeProps.textDecorationLine ?? styleTextDecorationLine;
     const effectiveTextTransform = nativeProps.textTransform ?? styleTextTransform;
     const effectiveColor = nativeProps.color ?? toColorString(styleColor);
+    const shouldSyncMeasuredLineBreaks = Platform.OS === 'android' && effectiveNumberOfLines == null;
+    const [measuredNativeText, setMeasuredNativeText] = React.useState(undefined);
+    const nativeText = measuredNativeText ?? resolvedText;
+    const nativeTextTransform = measuredNativeText == null ? effectiveTextTransform : 'none';
     const wrappedHybridRef = React.useMemo(() => (hybridRef ? callback(hybridRef) : undefined), [hybridRef]);
+    React.useEffect(() => {
+        setMeasuredNativeText(undefined);
+    }, [
+        resolvedText,
+        effectiveNumberOfLines,
+        effectiveEllipsizeMode,
+        effectiveFontSize,
+        effectiveFontWeight,
+        effectiveFontFamily,
+        effectiveFontStyle,
+        effectiveLineHeight,
+        effectiveLetterSpacing,
+        effectiveTextAlign,
+        effectiveTextAlignVertical,
+        effectiveTextDecorationLine,
+        effectiveTextTransform,
+        effectiveIncludeFontPadding,
+        baseTop,
+        baseRight,
+        baseBottom,
+        baseLeft,
+        strokeInset,
+    ]);
+    const handleTextLayout = React.useCallback((event) => {
+        if (!shouldSyncMeasuredLineBreaks)
+            return;
+        const nextText = toNativeMeasuredText(event.nativeEvent.lines);
+        if (nextText == null)
+            return;
+        const nextMeasuredNativeText = nextText === resolvedText ? undefined : nextText;
+        setMeasuredNativeText((currentText) => currentText === nextMeasuredNativeText
+            ? currentText
+            : nextMeasuredNativeText);
+    }, [resolvedText, shouldSyncMeasuredLineBreaks]);
     const measurerTextStyle = React.useMemo(() => ({
         color: effectiveColor,
         fontSize: effectiveFontSize,
@@ -142,9 +176,11 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
         effectiveTextTransform,
         effectiveIncludeFontPadding,
     ]);
-    return (React.createElement(View, { style: [styles.container, containerStyle, strokeInsetMarginStyle] },
-        React.createElement(Text, { accessible: false, pointerEvents: "none", numberOfLines: effectiveNumberOfLines, ellipsizeMode: effectiveEllipsizeMode, allowFontScaling: nativeProps.allowFontScaling, maxFontSizeMultiplier: nativeProps.maxFontSizeMultiplier, style: [
+    return (React.createElement(View, { style: [styles.container, containerStyle] },
+        React.createElement(Text, { accessible: false, pointerEvents: "none", numberOfLines: effectiveNumberOfLines, ellipsizeMode: effectiveEllipsizeMode, onTextLayout: handleTextLayout, allowFontScaling: nativeProps.allowFontScaling, maxFontSizeMultiplier: nativeProps.maxFontSizeMultiplier, style: [
                 measurerTextStyle,
+                // The hidden RN Text is the layout source of truth, so reserve the same
+                // inset that the native TextView uses to keep the outline inside bounds.
                 {
                     paddingTop: baseTop + strokeInset,
                     paddingRight: baseRight + strokeInset,
@@ -153,7 +189,7 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
                 },
                 styles.hiddenText,
             ] }, resolvedText),
-        React.createElement(NativeStrokeTextView, { ...nativeProps, text: resolvedText, color: effectiveColor, fontSize: effectiveFontSize, fontWeight: effectiveFontWeight, fontFamily: effectiveFontFamily, fontStyle: effectiveFontStyle, lineHeight: effectiveLineHeight, letterSpacing: effectiveLetterSpacing, textAlign: effectiveTextAlign, textAlignVertical: effectiveTextAlignVertical, textDecorationLine: effectiveTextDecorationLine, textTransform: effectiveTextTransform, opacity: nativeProps.opacity ?? toNumber(styleOpacity), includeFontPadding: effectiveIncludeFontPadding, numberOfLines: nativeProps.numberOfLines, ellipsizeMode: effectiveEllipsizeMode, paddingTop: baseTop, paddingRight: baseRight, paddingBottom: baseBottom, paddingLeft: baseLeft, hybridRef: wrappedHybridRef, pointerEvents: "none", style: styles.overlay })));
+        React.createElement(NativeStrokeTextView, { ...nativeProps, text: nativeText, color: effectiveColor, fontSize: effectiveFontSize, fontWeight: effectiveFontWeight, fontFamily: effectiveFontFamily, fontStyle: effectiveFontStyle, lineHeight: effectiveLineHeight, letterSpacing: effectiveLetterSpacing, textAlign: effectiveTextAlign, textAlignVertical: effectiveTextAlignVertical, textDecorationLine: effectiveTextDecorationLine, textTransform: nativeTextTransform, opacity: nativeProps.opacity ?? toNumber(styleOpacity), includeFontPadding: effectiveIncludeFontPadding, numberOfLines: nativeProps.numberOfLines, ellipsizeMode: effectiveEllipsizeMode, paddingTop: baseTop, paddingRight: baseRight, paddingBottom: baseBottom, paddingLeft: baseLeft, hybridRef: wrappedHybridRef, pointerEvents: "none", style: styles.overlay })));
 }
 const styles = StyleSheet.create({
     container: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whetware/react-native-stroke-text",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Stroke/outline text for React Native (New Architecture) on iOS, Android, and Web.",
   "type": "module",
   "main": "./lib/index.js",