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

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

@@ -5,6 +5,7 @@ import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.Paint.FontMetricsInt
 import android.graphics.Typeface
+import android.content.res.ColorStateList
 import android.os.Build
 import android.text.Layout
 import android.text.TextDirectionHeuristics
@@ -71,9 +72,9 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
   }
 
   override fun onDraw(canvas: Canvas) {
-    // Draw stroke behind fill, using TextView's layout so metrics match RN <Text/> as closely as
-    // possible (especially for bold fonts).
-    val layout = layout
+    // Draw stroke behind fill through TextView's normal drawing path. Calling super.onDraw()
+    // for both passes keeps Android's TextView layout, glyph shaping, and color state handling
+    // consistent with the fill render while still letting us switch the paint style for outline.
     if (layout != null && strokeWidthPx > 0f && strokeColor != Color.TRANSPARENT) {
       val textPaint = paint
       val prevStyle = textPaint.style
@@ -81,29 +82,23 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
       val prevStrokeJoin = textPaint.strokeJoin
       val prevStrokeCap = textPaint.strokeCap
       val prevColor = textPaint.color
+      val prevTextColors: ColorStateList = textColors
       val prevUnderline = textPaint.isUnderlineText
       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())
-
       // Only stroke the glyph outlines; keep underline/strike in the fill pass.
       textPaint.isUnderlineText = false
       textPaint.isStrikeThruText = false
 
+      setTextColor(strokeColor)
       textPaint.style = Paint.Style.STROKE
       textPaint.strokeJoin = Paint.Join.ROUND
       textPaint.strokeCap = Paint.Cap.ROUND
       textPaint.strokeWidth = strokeWidthPx
       textPaint.color = strokeColor
-      layout.draw(canvas)
-
-      canvas.restoreToCount(saveCount)
+      super.onDraw(canvas)
 
+      setTextColor(prevTextColors)
       textPaint.style = prevStyle
       textPaint.strokeWidth = prevStrokeWidth
       textPaint.strokeJoin = prevStrokeJoin

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,56 @@ 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';
+    // RN's hidden Text owns measurement, but Android TextView gets its own layout pass.
+    // Compensate for the native stroke inset on every edge, then give that native
+    // pass extra right-side room so one-pixel/font-metric drift cannot turn an RN
+    // single line into a native soft wrap.
+    const nativeOverlayInset = Platform.OS === 'android' && strokeInset > 0 ? strokeInset : 0;
+    const nativeOverlayRightInset = nativeOverlayInset > 0 ? nativeOverlayInset * 2 : 0;
     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 lineCount = event.nativeEvent.lines.length;
+        if (lineCount <= 1) {
+            setMeasuredNativeText((currentText) => currentText == null ? currentText : undefined);
+            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,26 +188,28 @@ 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: [
+        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,
-                strokeInset === 0
-                    ? null
-                    : {
-                        top: -strokeInset,
-                        right: -strokeInset,
-                        bottom: -strokeInset,
-                        left: -strokeInset,
-                    },
+                nativeOverlayInset > 0
+                    ? {
+                        top: -nativeOverlayInset,
+                        right: -nativeOverlayRightInset,
+                        bottom: -nativeOverlayInset,
+                        left: -nativeOverlayInset,
+                    }
+                    : null,
             ] })));
 }
 const styles = StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whetware/react-native-stroke-text",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Stroke/outline text for React Native (New Architecture) on iOS, Android, and Web.",
   "type": "module",
   "main": "./lib/index.js",
@@ -121,4 +121,4 @@
     "useTabs": false,
     "semi": false
   }
-}
+}