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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @whetware/react-native-stroke-text
 
+## 0.0.13
+
+### Patch Changes
+
+- [`f94116e`](https://github.com/whetware/react-native-stroke-text/commit/f94116e693d2ee77e643d952f6943728e9d52c25) Thanks [@evelant](https://github.com/evelant)! - Fix Android stroke-text wrapping by measuring the outline inset as part of layout, drawing the RN-measured line breaks in the native overlay, aligning native text metrics with React Native Text, and preserving separate fill and outline colors.
+
+  Regenerate Nitro native bindings with Nitro/Nitrogen 0.36.1 so the Android C++ and Kotlin code builds with React Native 0.86 / Expo 57, including fbjni's current `HybridClass` requirements.
+
 ## 0.0.6
 
 ### Patch Changes

package/android/src/main/cpp/cpp-adapter.cpp

@@ -1,6 +1,9 @@
 #include <jni.h>
+#include <fbjni/fbjni.h>
 #include "NitroStrokeTextOnLoad.hpp"
 
 JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
-  return margelo::nitro::stroketext::initialize(vm);
+  return facebook::jni::initialize(vm, []() {
+    margelo::nitro::stroketext::registerAllNatives();
+  });
 }

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

@@ -1,8 +1,8 @@
 package com.margelo.nitro.stroketext
 
 import android.view.View
-import com.facebook.jni.HybridData
 import com.facebook.react.uimanager.ThemedReactContext
+import com.margelo.nitro.R.id.associated_hybrid_view_tag
 import kotlin.math.ceil
 
 class HybridStrokeTextView(context: ThemedReactContext) : HybridStrokeTextViewSpec() {
@@ -43,17 +43,11 @@ class HybridStrokeTextView(context: ThemedReactContext) : HybridStrokeTextViewSp
     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 onDropView() {
+    strokeTextView.setTag(associated_hybrid_view_tag, null)
+    dispose()
   }
 
   override fun afterUpdate() {

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.StrokeTextViewManager
+import com.margelo.nitro.stroketext.views.HybridStrokeTextViewManager
 
 class NitroStrokeTextPackage : BaseReactPackage(), ViewManagerOnDemandReactPackage {
     private val viewManagers: Map<String, ModuleSpec> by lazy {
         mapOf(
-            "StrokeTextView" to ModuleSpec.viewManagerSpec { StrokeTextViewManager() }
+            "StrokeTextView" to ModuleSpec.viewManagerSpec { HybridStrokeTextViewManager() }
         )
     }
 

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

@@ -5,6 +5,7 @@ import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.Paint.FontMetricsInt
 import android.graphics.Typeface
+import android.content.res.ColorStateList
 import android.os.Build
 import android.text.Layout
 import android.text.TextDirectionHeuristics
@@ -71,9 +72,9 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
   }
 
   override fun onDraw(canvas: Canvas) {
-    // Draw stroke behind fill, using TextView's layout so metrics match RN <Text/> as closely as
-    // possible (especially for bold fonts).
-    val layout = layout
+    // Draw stroke behind fill through TextView's normal drawing path. Calling super.onDraw()
+    // for both passes keeps Android's TextView layout, glyph shaping, and color state handling
+    // consistent with the fill render while still letting us switch the paint style for outline.
     if (layout != null && strokeWidthPx > 0f && strokeColor != Color.TRANSPARENT) {
       val textPaint = paint
       val prevStyle = textPaint.style
@@ -81,29 +82,23 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
       val prevStrokeJoin = textPaint.strokeJoin
       val prevStrokeCap = textPaint.strokeCap
       val prevColor = textPaint.color
+      val prevTextColors: ColorStateList = textColors
       val prevUnderline = textPaint.isUnderlineText
       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())
-
       // Only stroke the glyph outlines; keep underline/strike in the fill pass.
       textPaint.isUnderlineText = false
       textPaint.isStrikeThruText = false
 
+      setTextColor(strokeColor)
       textPaint.style = Paint.Style.STROKE
       textPaint.strokeJoin = Paint.Join.ROUND
       textPaint.strokeCap = Paint.Cap.ROUND
       textPaint.strokeWidth = strokeWidthPx
       textPaint.color = strokeColor
-      layout.draw(canvas)
-
-      canvas.restoreToCount(saveCount)
+      super.onDraw(canvas)
 
+      setTextColor(prevTextColors)
       textPaint.style = prevStyle
       textPaint.strokeWidth = prevStrokeWidth
       textPaint.strokeJoin = prevStrokeJoin
@@ -196,10 +191,6 @@ internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
 
     // Line limits / ellipsizing
     val maxLines = if (numberOfLines > 0) numberOfLines else Int.MAX_VALUE
-    // React Native's single-line Text does not wrap at spaces. Without horizontal scrolling,
-    // Android TextView can create an internal second line inside a host view that was measured
-    // as one line by the hidden RN Text used for layout.
-    setHorizontallyScrolling(numberOfLines == 1)
     setMaxLines(maxLines)
     ellipsize =
       if (numberOfLines <= 0) {

package/lib/StrokeText.js

@@ -114,6 +114,12 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
     const [measuredNativeText, setMeasuredNativeText] = React.useState(undefined);
     const nativeText = measuredNativeText ?? resolvedText;
     const nativeTextTransform = measuredNativeText == null ? effectiveTextTransform : 'none';
+    // 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
+    // single line into a native soft wrap.
+    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]);
     React.useEffect(() => {
         setMeasuredNativeText(undefined);
@@ -141,6 +147,11 @@ export function StrokeText({ text, children, style, hybridRef, ...rest }) {
     const handleTextLayout = React.useCallback((event) => {
         if (!shouldSyncMeasuredLineBreaks)
             return;
+        const lineCount = event.nativeEvent.lines.length;
+        if (lineCount <= 1) {
+            setMeasuredNativeText((currentText) => currentText == null ? currentText : undefined);
+            return;
+        }
         const nextText = toNativeMeasuredText(event.nativeEvent.lines);
         if (nextText == null)
             return;
@@ -189,7 +200,17 @@ 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: styles.overlay })));
+        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: [
+                styles.overlay,
+                nativeOverlayInset > 0
+                    ? {
+                        top: -nativeOverlayInset,
+                        right: -nativeOverlayRightInset,
+                        bottom: -nativeOverlayInset,
+                        left: -nativeOverlayInset,
+                    }
+                    : null,
+            ] })));
 }
 const styles = StyleSheet.create({
     container: {},

package/nitro.json

@@ -14,8 +14,14 @@
   },
   "autolinking": {
     "StrokeTextView": {
-      "swift": "HybridStrokeTextView",
-      "kotlin": "HybridStrokeTextView"
+      "ios": {
+        "language": "swift",
+        "implementationClassName": "HybridStrokeTextView"
+      },
+      "android": {
+        "language": "kotlin",
+        "implementationClassName": "HybridStrokeTextView"
+      }
     }
   },
   "ignorePaths": [

package/nitrogen/generated/android/NitroStrokeTextOnLoad.cpp

@@ -22,25 +22,35 @@
 namespace margelo::nitro::stroketext {
 
 int initialize(JavaVM* vm) {
+  return facebook::jni::initialize(vm, []() {
+    ::margelo::nitro::stroketext::registerAllNatives();
+  });
+}
+
+struct JHybridStrokeTextViewSpecImpl: public jni::JavaClass<JHybridStrokeTextViewSpecImpl, JHybridStrokeTextViewSpec::JavaPart> {
+  static constexpr auto kJavaDescriptor = "Lcom/margelo/nitro/stroketext/HybridStrokeTextView;";
+  static std::shared_ptr<JHybridStrokeTextViewSpec> create() {
+    static const auto constructorFn = javaClassStatic()->getConstructor<JHybridStrokeTextViewSpecImpl::javaobject()>();
+    jni::local_ref<JHybridStrokeTextViewSpec::JavaPart> javaPart = javaClassStatic()->newObject(constructorFn);
+    return javaPart->getJHybridStrokeTextViewSpec();
+  }
+};
+
+void registerAllNatives() {
   using namespace margelo::nitro;
   using namespace margelo::nitro::stroketext;
-  using namespace facebook;
-
-  return facebook::jni::initialize(vm, [] {
-    // Register native JNI methods
-    margelo::nitro::stroketext::JHybridStrokeTextViewSpec::registerNatives();
-    margelo::nitro::stroketext::views::JHybridStrokeTextViewStateUpdater::registerNatives();
-
-    // Register Nitro Hybrid Objects
-    HybridObjectRegistry::registerHybridObjectConstructor(
-      "StrokeTextView",
-      []() -> std::shared_ptr<HybridObject> {
-        static DefaultConstructableObject<JHybridStrokeTextViewSpec::javaobject> object("com/margelo/nitro/stroketext/HybridStrokeTextView");
-        auto instance = object.create();
-        return instance->cthis()->shared();
-      }
-    );
-  });
+
+  // Register native JNI methods
+  margelo::nitro::stroketext::JHybridStrokeTextViewSpec::CxxPart::registerNatives();
+  margelo::nitro::stroketext::views::JHybridStrokeTextViewStateUpdater::registerNatives();
+
+  // Register Nitro Hybrid Objects
+  HybridObjectRegistry::registerHybridObjectConstructor(
+    "StrokeTextView",
+    []() -> std::shared_ptr<HybridObject> {
+      return JHybridStrokeTextViewSpecImpl::create();
+    }
+  );
 }
 
 } // namespace margelo::nitro::stroketext

package/nitrogen/generated/android/NitroStrokeTextOnLoad.hpp

@@ -6,20 +6,29 @@
 ///
 
 #include <jni.h>
+#include <functional>
 #include <NitroModules/NitroDefines.hpp>
 
 namespace margelo::nitro::stroketext {
 
+  [[deprecated("Use registerNatives() instead.")]]
+  int initialize(JavaVM* vm);
+
   /**
-   * Initializes the native (C++) part of NitroStrokeText, and autolinks all Hybrid Objects.
-   * Call this in your `JNI_OnLoad` function (probably inside `cpp-adapter.cpp`).
+   * Register the native (C++) part of NitroStrokeText, and autolinks all Hybrid Objects.
+   * Call this in your `JNI_OnLoad` function (probably inside `cpp-adapter.cpp`),
+   * inside a `facebook::jni::initialize(vm, ...)` call.
    * Example:
    * ```cpp (cpp-adapter.cpp)
    * JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
-   *   return margelo::nitro::stroketext::initialize(vm);
+   *   return facebook::jni::initialize(vm, []() {
+   *     // register all NitroStrokeText HybridObjects
+   *     margelo::nitro::stroketext::registerNatives();
+   *     // any other custom registrations go here.
+   *   });
    * }
    * ```
    */
-  int initialize(JavaVM* vm);
+  void registerAllNatives();
 
 } // namespace margelo::nitro::stroketext