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

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

@@ -196,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 { 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;
@@ -94,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,
@@ -123,27 +177,19 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
         effectiveIncludeFontPadding,
     ]);
     return (React.createElement(View, { style: [styles.container, containerStyle] },
-        React.createElement(Text, { accessible: false, pointerEvents: "none", numberOfLines: effectiveNumberOfLines, ellipsizeMode: effectiveEllipsizeMode, allowFontScaling: nativeProps.allowFontScaling, maxFontSizeMultiplier: nativeProps.maxFontSizeMultiplier, style: [
+        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,
-                    paddingRight: baseRight,
-                    paddingBottom: baseBottom,
-                    paddingLeft: baseLeft,
+                    paddingTop: baseTop + strokeInset,
+                    paddingRight: baseRight + strokeInset,
+                    paddingBottom: baseBottom + strokeInset,
+                    paddingLeft: baseLeft + strokeInset,
                 },
                 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,
-                strokeInset === 0
-                    ? null
-                    : {
-                        top: -strokeInset,
-                        right: -strokeInset,
-                        bottom: -strokeInset,
-                        left: -strokeInset,
-                    },
-            ] })));
+        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.10",
+  "version": "0.0.11",
   "description": "Stroke/outline text for React Native (New Architecture) on iOS, Android, and Web.",
   "type": "module",
   "main": "./lib/index.js",