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

package/lib/StrokeText.js

@@ -2,6 +2,7 @@ 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) {
@@ -122,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);
     }, [
@@ -201,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/package.json

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