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

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

@@ -58,6 +58,10 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
   init {
     gravity = Gravity.TOP or Gravity.START
     includeFontPadding = true
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+      breakStrategy = Layout.BREAK_STRATEGY_HIGH_QUALITY
+      hyphenationFrequency = Layout.HYPHENATION_FREQUENCY_NONE
+    }
   }
 
   fun invalidateTextLayout() {
@@ -81,8 +85,6 @@ 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())

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.7",
+  "version": "0.0.9",
   "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
   }
-}
+}