@whetware/react-native-stroke-text 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @whetware/react-native-stroke-text
 
+## 0.0.4
+
+### Patch Changes
+
+- [`80ded08`](https://github.com/whetware/react-native-stroke-text/commit/80ded08eb3acf84344f56e12b24f74f771726ec1) Thanks [@evelant](https://github.com/evelant)! - Fix handles leak on Android causing crash
+
+## 0.0.3
+
+### Patch Changes
+
+- [`dd724fd`](https://github.com/whetware/react-native-stroke-text/commit/dd724fd18055ec28e173029a6d3aa0a5744af919) Thanks [@evelant](https://github.com/evelant)! - fix bounding boxes
+
 ## 0.0.2
 
 ### Patch Changes

package/README.md

@@ -39,6 +39,12 @@ export function Example() {
 }
 ```
 
+## Layout notes
+
+To avoid the outline getting clipped during animations (especially on Android), `StrokeText` keeps the
+stroke inside the component bounds by applying an internal inset of `ceil(strokeWidth) / 2`. It then
+uses matching negative margins so the layout footprint matches a normal `<Text />`.
+
 ## Development
 
 - Generate Nitro bindings: `pnpm specs`

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

@@ -1,12 +1,16 @@
 package com.margelo.nitro.stroketext
 
 import android.view.View
+import com.facebook.jni.HybridData
 import com.facebook.react.uimanager.ThemedReactContext
+import com.margelo.nitro.views.RecyclableView
 
-class HybridStrokeTextView(context: ThemedReactContext) : HybridStrokeTextViewSpec() {
+class HybridStrokeTextView(context: ThemedReactContext) : HybridStrokeTextViewSpec(), RecyclableView {
   private val strokeTextView = StrokeTextView(context)
   override val view: View = strokeTextView
 
+  private var isDisposed = false
+
   override var text: String = ""
   override var color: String? = null
   override var strokeColor: String? = null
@@ -34,6 +38,54 @@ class HybridStrokeTextView(context: ThemedReactContext) : HybridStrokeTextViewSp
   override var paddingBottom: Double? = null
   override var paddingLeft: Double? = null
 
+  override fun dispose() {
+    if (isDisposed) return
+    isDisposed = true
+    super.dispose()
+
+    try {
+      val hybridDataField = HybridStrokeTextViewSpec::class.java.getDeclaredField("mHybridData")
+      hybridDataField.isAccessible = true
+      val hybridData = hybridDataField.get(this) as? HybridData ?: return
+
+      val resetNativeMethod = HybridData::class.java.getDeclaredMethod("resetNative")
+      resetNativeMethod.isAccessible = true
+      resetNativeMethod.invoke(hybridData)
+    } catch (_: Throwable) {
+    }
+  }
+
+  override fun prepareForRecycle() {
+    text = ""
+    color = null
+    strokeColor = null
+    strokeWidth = null
+    fontSize = null
+    fontWeight = null
+    fontFamily = null
+    fontStyle = null
+    lineHeight = null
+    letterSpacing = null
+    textAlign = null
+    textDecorationLine = null
+    textTransform = null
+    opacity = null
+    allowFontScaling = null
+    maxFontSizeMultiplier = null
+    includeFontPadding = null
+    numberOfLines = null
+    ellipsizeMode = null
+    padding = null
+    paddingVertical = null
+    paddingHorizontal = null
+    paddingTop = null
+    paddingRight = null
+    paddingBottom = null
+    paddingLeft = null
+
+    afterUpdate()
+  }
+
   override fun afterUpdate() {
     val displayMetrics = strokeTextView.resources.displayMetrics
     val resolvedAllowFontScaling = allowFontScaling ?: true

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

@@ -7,12 +7,12 @@ import com.facebook.react.BaseReactPackage
 import com.facebook.react.ViewManagerOnDemandReactPackage
 import com.facebook.react.bridge.ModuleSpec
 import com.facebook.react.uimanager.ViewManager
-import com.margelo.nitro.stroketext.views.HybridStrokeTextViewManager
+import com.margelo.nitro.stroketext.views.StrokeTextViewManager
 
 class NitroStrokeTextPackage : BaseReactPackage(), ViewManagerOnDemandReactPackage {
     private val viewManagers: Map<String, ModuleSpec> by lazy {
         mapOf(
-            "StrokeTextView" to ModuleSpec.viewManagerSpec { HybridStrokeTextViewManager() }
+            "StrokeTextView" to ModuleSpec.viewManagerSpec { StrokeTextViewManager() }
         )
     }
 

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

@@ -113,7 +113,7 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
   }
 
   private fun applyProps() {
-    // Padding: apply stroke inset in native to compensate for the overlay expansion in JS.
+    // Padding: apply a stroke inset so the outline stays within the view bounds.
     val inset = strokeInsetPx()
     val left = floorToInt(resolvePadding(paddingLeftPx, paddingHorizontalPx, paddingAllPx) + inset)
     val top = floorToInt(resolvePadding(paddingTopPx, paddingVerticalPx, paddingAllPx) + inset)

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

@@ -0,0 +1,15 @@
+package com.margelo.nitro.stroketext.views
+
+import android.view.View
+import com.margelo.nitro.R.id.associated_hybrid_view_tag
+import com.margelo.nitro.stroketext.HybridStrokeTextView
+
+class StrokeTextViewManager : HybridStrokeTextViewManager() {
+  override fun onDropViewInstance(view: View) {
+    val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridStrokeTextView
+    view.setTag(associated_hybrid_view_tag, null)
+    hybridView?.dispose()
+    super.onDropViewInstance(view)
+  }
+}
+

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);
@@ -63,6 +63,24 @@ 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;
@@ -70,31 +88,22 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
         ? undefined
         : nativeProps.ellipsizeMode ?? 'tail';
     const effectiveIncludeFontPadding = nativeProps.includeFontPadding ?? styleIncludeFontPadding ?? false;
-    return (React.createElement(View, { style: [styles.container, containerStyle] },
+    const wrappedHybridRef = React.useMemo(() => (hybridRef ? callback(hybridRef) : undefined), [hybridRef]);
+    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: [
                 style,
                 {
-                    paddingTop: baseTop,
-                    paddingRight: baseRight,
-                    paddingBottom: baseBottom,
-                    paddingLeft: baseLeft,
+                    paddingTop: baseTop + strokeInset,
+                    paddingRight: baseRight + strokeInset,
+                    paddingBottom: baseBottom + strokeInset,
+                    paddingLeft: baseLeft + strokeInset,
                 },
                 effectiveIncludeFontPadding == null
                     ? null
                     : { includeFontPadding: effectiveIncludeFontPadding },
                 styles.hiddenText,
             ] }, resolvedText),
-        React.createElement(NativeStrokeTextView, { ...nativeProps, text: resolvedText, color: nativeProps.color ?? toColorString(styleColor), fontSize: nativeProps.fontSize ?? toNumber(styleFontSize), fontWeight: nativeProps.fontWeight ?? toFontWeightString(styleFontWeight), fontFamily: nativeProps.fontFamily ?? styleFontFamily, fontStyle: nativeProps.fontStyle ?? styleFontStyle, lineHeight: nativeProps.lineHeight ?? toNumber(styleLineHeight), letterSpacing: nativeProps.letterSpacing ?? toNumber(styleLetterSpacing), textAlign: nativeProps.textAlign ?? styleTextAlign, textDecorationLine: nativeProps.textDecorationLine ?? styleTextDecorationLine, textTransform: nativeProps.textTransform ?? styleTextTransform, opacity: nativeProps.opacity ?? toNumber(styleOpacity), includeFontPadding: effectiveIncludeFontPadding, numberOfLines: nativeProps.numberOfLines, ellipsizeMode: effectiveEllipsizeMode, paddingTop: baseTop, paddingRight: baseRight, paddingBottom: baseBottom, paddingLeft: baseLeft, hybridRef: hybridRef ? callback(hybridRef) : undefined, pointerEvents: "none", style: [
-                styles.overlay,
-                strokeInset === 0
-                    ? null
-                    : {
-                        top: -strokeInset,
-                        right: -strokeInset,
-                        bottom: -strokeInset,
-                        left: -strokeInset,
-                    },
-            ] })));
+        React.createElement(NativeStrokeTextView, { ...nativeProps, text: resolvedText, color: nativeProps.color ?? toColorString(styleColor), fontSize: nativeProps.fontSize ?? toNumber(styleFontSize), fontWeight: nativeProps.fontWeight ?? toFontWeightString(styleFontWeight), fontFamily: nativeProps.fontFamily ?? styleFontFamily, fontStyle: nativeProps.fontStyle ?? styleFontStyle, lineHeight: nativeProps.lineHeight ?? toNumber(styleLineHeight), letterSpacing: nativeProps.letterSpacing ?? toNumber(styleLetterSpacing), textAlign: nativeProps.textAlign ?? styleTextAlign, textDecorationLine: nativeProps.textDecorationLine ?? styleTextDecorationLine, textTransform: nativeProps.textTransform ?? styleTextTransform, 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/lib/StrokeText.web.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
 function resolveText(text, children) {
     if (typeof text === 'string')
         return text;
@@ -38,6 +38,24 @@ export function StrokeText({ text, children, style, ...rest }) {
     const strokeColor = rest.strokeColor ?? 'transparent';
     const strokeWidth = Math.max(0, rest.strokeWidth ?? 0);
     const strokeInset = Math.ceil(strokeWidth) / 2;
+    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 baseTop = firstNumber(rest.paddingTop, stylePaddingTop, rest.paddingVertical, stylePaddingVertical, rest.padding, stylePadding) ?? 0;
     const baseRight = firstNumber(rest.paddingRight, stylePaddingRight, rest.paddingHorizontal, stylePaddingHorizontal, rest.padding, stylePadding) ?? 0;
     const baseBottom = firstNumber(rest.paddingBottom, stylePaddingBottom, rest.paddingVertical, stylePaddingVertical, rest.padding, stylePadding) ?? 0;
@@ -46,15 +64,17 @@ export function StrokeText({ text, children, style, ...rest }) {
         ? rest.numberOfLines
         : undefined;
     const effectiveEllipsizeMode = effectiveNumberOfLines == null ? undefined : rest.ellipsizeMode ?? 'tail';
-    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, style: [
                 textStyle,
                 {
-                    paddingTop: baseTop,
-                    paddingRight: baseRight,
-                    paddingBottom: baseBottom,
-                    paddingLeft: baseLeft,
+                    paddingTop: baseTop + strokeInset,
+                    paddingRight: baseRight + strokeInset,
+                    paddingBottom: baseBottom + strokeInset,
+                    paddingLeft: baseLeft + strokeInset,
                 },
+                strokeInset === 0 ? null : { maxWidth: 'none' },
+                strokeInset === 0 ? null : { boxSizing: 'content-box' },
                 styles.hiddenText,
             ] }, resolvedText),
         React.createElement(Text, { pointerEvents: "none", numberOfLines: effectiveNumberOfLines, ellipsizeMode: effectiveEllipsizeMode, style: [
@@ -83,14 +103,6 @@ export function StrokeText({ text, children, style, ...rest }) {
                     }
                     : null,
                 styles.overlay,
-                strokeInset === 0
-                    ? null
-                    : {
-                        top: -strokeInset,
-                        right: -strokeInset,
-                        bottom: -strokeInset,
-                        left: -strokeInset,
-                    },
             ] }, resolvedText)));
 }
 const styles = StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whetware/react-native-stroke-text",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Stroke/outline text for React Native (New Architecture) on iOS, Android, and Web.",
   "type": "module",
   "main": "./lib/index.js",
@@ -28,19 +28,6 @@
     "CHANGELOG.md",
     "README.md"
   ],
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf android/build node_modules/**/android/build lib",
-    "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
-    "lint-ci": "eslint \"**/*.{js,ts,tsx}\"",
-    "typescript": "tsc",
-    "prepare": "npm run prepack",
-    "prepack": "tsc",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "changeset publish",
-    "specs": "tsc --noEmit false && nitrogen --logLevel=\"debug\""
-  },
   "keywords": [
     "react-native",
     "nitro",
@@ -120,5 +107,16 @@
     "trailingComma": "es5",
     "useTabs": false,
     "semi": false
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf android/build node_modules/**/android/build lib",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "lint-ci": "eslint \"**/*.{js,ts,tsx}\"",
+    "typescript": "tsc",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish",
+    "specs": "tsc --noEmit false && nitrogen --logLevel=\"debug\""
   }
-}
+}