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

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

@@ -74,22 +74,18 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
     // Draw stroke behind fill, using TextView's layout so metrics match RN <Text/> as closely as
     // possible (especially for bold fonts).
     val layout = layout
-    if (layout == null || strokeWidthPx <= 0f || strokeColor == Color.TRANSPARENT) {
-      super.onDraw(canvas)
-      return
-    }
+    if (layout != null && strokeWidthPx > 0f && strokeColor != Color.TRANSPARENT) {
+      val textPaint = paint
+      val prevStyle = textPaint.style
+      val prevStrokeWidth = textPaint.strokeWidth
+      val prevStrokeJoin = textPaint.strokeJoin
+      val prevStrokeCap = textPaint.strokeCap
+      val prevColor = textPaint.color
+      val prevUnderline = textPaint.isUnderlineText
+      val prevStrike = textPaint.isStrikeThruText
+
+      val saveCount = canvas.save()
 
-    val textPaint = paint
-    val prevStyle = textPaint.style
-    val prevStrokeWidth = textPaint.strokeWidth
-    val prevStrokeJoin = textPaint.strokeJoin
-    val prevStrokeCap = textPaint.strokeCap
-    val prevColor = textPaint.color
-    val prevUnderline = textPaint.isUnderlineText
-    val prevStrike = textPaint.isStrikeThruText
-
-    val saveCount = canvas.save()
-    try {
       canvas.translate(compoundPaddingLeft.toFloat(), extendedPaddingTop.toFloat())
       canvas.translate(-scrollX.toFloat(), -scrollY.toFloat())
 
@@ -104,12 +100,6 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
       textPaint.color = strokeColor
       layout.draw(canvas)
 
-      textPaint.style = Paint.Style.FILL
-      textPaint.color = prevColor
-      textPaint.isUnderlineText = prevUnderline
-      textPaint.isStrikeThruText = prevStrike
-      layout.draw(canvas)
-    } finally {
       canvas.restoreToCount(saveCount)
 
       textPaint.style = prevStyle
@@ -120,6 +110,8 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
       textPaint.isUnderlineText = prevUnderline
       textPaint.isStrikeThruText = prevStrike
     }
+
+    super.onDraw(canvas)
   }
 
   private fun applyProps() {

package/lib/StrokeText.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { I18nManager, 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);
@@ -71,12 +71,32 @@ 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);
@@ -122,28 +142,18 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
         effectiveTextTransform,
         effectiveIncludeFontPadding,
     ]);
-    return (React.createElement(View, { style: [styles.container, containerStyle] },
+    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: [
                 measurerTextStyle,
                 {
-                    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: 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 })));
 }
 const styles = StyleSheet.create({
     container: {},

package/package.json

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