@whetware/react-native-stroke-text 0.0.11 → 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
@@ -196,10 +191,6 @@ 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

@@ -114,6 +114,12 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
     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);
@@ -141,6 +147,11 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
     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;
@@ -189,7 +200,17 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
                 },
                 styles.hiddenText,
             ] }, resolvedText),
-        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 })));
+        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,
+                nativeOverlayInset > 0
+                    ? {
+                        top: -nativeOverlayInset,
+                        right: -nativeOverlayRightInset,
+                        bottom: -nativeOverlayInset,
+                        left: -nativeOverlayInset,
+                    }
+                    : null,
+            ] })));
 }
 const styles = StyleSheet.create({
     container: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whetware/react-native-stroke-text",
-  "version": "0.0.11",
+  "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
   }
-}
+}