@whetware/react-native-stroke-text 0.0.13 → 0.0.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @whetware/react-native-stroke-text
 
+## 0.0.15
+
+### Patch Changes
+
+- [`57b743f`](https://github.com/whetware/react-native-stroke-text/commit/57b743f53c5ef6777be9564d38d2d95c5facb13b) Thanks [@evelant](https://github.com/evelant)! - Keep the native `textTransform` prop concrete during Android measured-line updates so Fabric never sends Nitro a null enum value.
+
 ## 0.0.13
 
 ### Patch Changes

package/lib/StrokeText.js

@@ -2,6 +2,8 @@ import React from 'react';
 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';
+import { createNativePropPresenceKey, normalizeNativeOptionalProps, } from './createNativePropPresenceKey';
+import { resolveNativeTextTransform } from './resolveNativeTextTransform';
 const NativeStrokeTextView = getHostComponent('StrokeTextView', () => StrokeTextViewConfig);
 function resolveText(text, children) {
     if (typeof text === 'string')
@@ -113,7 +115,7 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
     const shouldSyncMeasuredLineBreaks = Platform.OS === 'android' && effectiveNumberOfLines == null;
     const [measuredNativeText, setMeasuredNativeText] = React.useState(undefined);
     const nativeText = measuredNativeText ?? resolvedText;
-    const nativeTextTransform = measuredNativeText == null ? effectiveTextTransform : 'none';
+    const nativeTextTransform = resolveNativeTextTransform(effectiveTextTransform, measuredNativeText != null);
     // 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
@@ -121,6 +123,39 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
     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]);
+    const nativeOptionalProps = normalizeNativeOptionalProps({
+        color: effectiveColor,
+        strokeColor: nativeProps.strokeColor,
+        strokeWidth,
+        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),
+        allowFontScaling: nativeProps.allowFontScaling,
+        maxFontSizeMultiplier: nativeProps.maxFontSizeMultiplier,
+        includeFontPadding: effectiveIncludeFontPadding,
+        numberOfLines: effectiveNumberOfLines ?? 0,
+        ellipsizeMode: effectiveEllipsizeMode ?? 'tail',
+        padding: undefined,
+        paddingVertical: undefined,
+        paddingHorizontal: undefined,
+        paddingTop: baseTop,
+        paddingRight: baseRight,
+        paddingBottom: baseBottom,
+        paddingLeft: baseLeft,
+        hybridRef: wrappedHybridRef,
+    });
+    // Fabric encodes a removed view prop as null, but Nitro 0.36's optional
+    // converter accepts only undefined. Remount the native host when any optional
+    // prop changes definedness so Fabric never sends a value-to-null update.
+    const nativePropPresenceKey = createNativePropPresenceKey(nativeOptionalProps);
     React.useEffect(() => {
         setMeasuredNativeText(undefined);
     }, [
@@ -200,7 +235,7 @@ 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: [
+        React.createElement(NativeStrokeTextView, { key: nativePropPresenceKey, text: nativeText, ...nativeOptionalProps, pointerEvents: "none", style: [
                 styles.overlay,
                 nativeOverlayInset > 0
                     ? {

package/lib/createNativePropPresenceKey.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeNativeOptionalProps<T extends Readonly<Record<string, unknown>>>(props: T): T;
+export declare function createNativePropPresenceKey(props: Readonly<Record<string, unknown>>): string;

package/lib/createNativePropPresenceKey.js

@@ -0,0 +1,12 @@
+export function normalizeNativeOptionalProps(props) {
+    return Object.fromEntries(Object.entries(props).map(([propName, value]) => [
+        propName,
+        value ?? undefined,
+    ]));
+}
+export function createNativePropPresenceKey(props) {
+    return Object.keys(props)
+        .sort()
+        .map((propName) => (props[propName] == null ? '0' : '1'))
+        .join('');
+}

package/lib/resolveNativeTextTransform.d.ts

@@ -0,0 +1,7 @@
+import type { StrokeTextTransform } from './specs/StrokeTextView.nitro';
+/**
+ * Keep the Fabric host prop concrete across text-measurement state changes.
+ * React Native represents a removed prop as null during native updates, while
+ * Nitro's optional enum converter accepts undefined but rejects null.
+ */
+export declare function resolveNativeTextTransform(effectiveTextTransform: StrokeTextTransform | undefined, hasMeasuredNativeText: boolean): StrokeTextTransform;

package/lib/resolveNativeTextTransform.js

@@ -0,0 +1,8 @@
+/**
+ * Keep the Fabric host prop concrete across text-measurement state changes.
+ * React Native represents a removed prop as null during native updates, while
+ * Nitro's optional enum converter accepts undefined but rejects null.
+ */
+export function resolveNativeTextTransform(effectiveTextTransform, hasMeasuredNativeText) {
+    return hasMeasuredNativeText ? 'none' : (effectiveTextTransform ?? 'none');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whetware/react-native-stroke-text",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "description": "Stroke/outline text for React Native (New Architecture) on iOS, Android, and Web.",
   "type": "module",
   "main": "./lib/index.js",
@@ -33,6 +33,7 @@
     "clean": "rm -rf android/build node_modules/**/android/build lib",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
     "lint-ci": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "tsc && node --test test/*.test.mjs",
     "typescript": "tsc",
     "prepare": "npm run prepack",
     "prepack": "tsc",
@@ -121,4 +122,4 @@
     "useTabs": false,
     "semi": false
   }
-}
+}