react-native-morph-card 0.1.0

package/android/src/main/java/com/melivalesca/morphcard/MorphCardTargetManager.kt

@@ -0,0 +1,48 @@
+package com.melivalesca.morphcard
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.RNCMorphCardTargetManagerDelegate
+import com.facebook.react.viewmanagers.RNCMorphCardTargetManagerInterface
+
+@ReactModule(name = MorphCardTargetManager.REACT_CLASS)
+class MorphCardTargetManager :
+  ViewGroupManager<MorphCardTargetView>(),
+  RNCMorphCardTargetManagerInterface<MorphCardTargetView> {
+
+  private val delegate = RNCMorphCardTargetManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<MorphCardTargetView> = delegate
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): MorphCardTargetView {
+    return MorphCardTargetView(reactContext)
+  }
+
+  override fun setDuration(view: MorphCardTargetView, value: Double) {
+    // Duration is managed by the source view
+  }
+
+  override fun setSourceTag(view: MorphCardTargetView, value: Int) {
+    view.sourceTag = value
+  }
+
+  override fun setTargetWidth(view: MorphCardTargetView, value: Double) {
+    view.targetWidth = value.toFloat()
+  }
+
+  override fun setTargetHeight(view: MorphCardTargetView, value: Double) {
+    view.targetHeight = value.toFloat()
+  }
+
+  override fun setTargetBorderRadius(view: MorphCardTargetView, value: Double) {
+    view.targetBorderRadius = value.toFloat()
+  }
+
+  companion object {
+    const val REACT_CLASS = "RNCMorphCardTarget"
+  }
+}

package/android/src/main/java/com/melivalesca/morphcard/MorphCardTargetView.kt

@@ -0,0 +1,159 @@
+package com.melivalesca.morphcard
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Matrix
+import android.graphics.Outline
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.util.Log
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewOutlineProvider
+import android.widget.ImageView
+import com.facebook.react.views.view.ReactViewGroup
+
+class MorphCardTargetView(context: Context) : ReactViewGroup(context) {
+
+  var targetWidth: Float = 0f
+  var targetHeight: Float = 0f
+  var targetBorderRadius: Float = -1f
+  var sourceTag: Int = 0
+
+  // Snapshot drawn via canvas — Fabric can't remove it
+  private var snapshotBitmap: Bitmap? = null
+  private var snapshotFrame: RectF? = null
+  private var snapshotCornerRadius: Float = 0f
+  private var snapshotBgColor: Int? = null
+  private val snapshotPaint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.FILTER_BITMAP_FLAG)
+  private val bgPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+
+  private val density: Float
+    get() = resources.displayMetrics.density
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    MorphCardViewRegistry.register(this, id)
+    Log.d("MorphCard", "TargetView attached: id=$id sourceTag=$sourceTag")
+
+    if (sourceTag > 0) {
+      val screenContainer = findScreenContainer(this)
+      if (screenContainer != null) {
+        screenContainer.visibility = View.INVISIBLE
+        Log.d("MorphCard", "TargetView: set screen INVISIBLE")
+      }
+    }
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    MorphCardViewRegistry.unregister(id)
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    applyBorderRadiusClipping()
+  }
+
+  /**
+   * Draw the snapshot bitmap BEFORE children so React components
+   * (X button, etc.) render on top of it.
+   */
+  override fun dispatchDraw(canvas: Canvas) {
+    val bmp = snapshotBitmap
+    val frame = snapshotFrame
+    if (bmp != null && frame != null) {
+      val radiusPx = snapshotCornerRadius
+
+      // Clip to rounded rect if needed
+      if (radiusPx > 0) {
+        canvas.save()
+        val clipPath = Path()
+        clipPath.addRoundRect(
+          0f, 0f, width.toFloat(), height.toFloat(),
+          radiusPx, radiusPx, Path.Direction.CW
+        )
+        canvas.clipPath(clipPath)
+      }
+
+      // Draw background
+      snapshotBgColor?.let { color ->
+        bgPaint.color = color
+        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), bgPaint)
+      }
+
+      // Draw bitmap in the specified frame
+      val src = android.graphics.Rect(0, 0, bmp.width, bmp.height)
+      val dst = android.graphics.Rect(
+        frame.left.toInt(), frame.top.toInt(),
+        frame.right.toInt(), frame.bottom.toInt()
+      )
+      canvas.drawBitmap(bmp, src, dst, snapshotPaint)
+
+      if (radiusPx > 0) {
+        canvas.restore()
+      }
+    }
+
+    // Draw React children on top
+    super.dispatchDraw(canvas)
+  }
+
+  private fun applyBorderRadiusClipping() {
+    val radiusPx = if (targetBorderRadius > 0f) targetBorderRadius * density else 0f
+    if (radiusPx > 0f) {
+      clipToOutline = true
+      outlineProvider = object : ViewOutlineProvider() {
+        override fun getOutline(v: View, outline: Outline) {
+          outline.setRoundRect(0, 0, v.width, v.height, radiusPx)
+        }
+      }
+    } else {
+      clipToOutline = false
+    }
+  }
+
+  private fun findScreenContainer(view: View?): View? {
+    if (view == null) return null
+    var current: View? = view
+    while (current != null) {
+      val parent = current.parent
+      if (parent is ViewGroup) {
+        val parentName = parent.javaClass.name
+        if (parentName.contains("ScreenStack") || parentName.contains("ScreenContainer")) {
+          return current
+        }
+      }
+      current = if (current.parent is View) current.parent as View else null
+    }
+    return null
+  }
+
+  fun showSnapshot(
+    image: Bitmap,
+    scaleType: ImageView.ScaleType,
+    frame: RectF,
+    cornerRadius: Float,
+    backgroundColor: Int?
+  ) {
+    Log.d("MorphCard", "showSnapshot: viewSize=${width}x${height} frame=$frame cornerR=$cornerRadius bg=$backgroundColor")
+    snapshotBitmap = image
+    snapshotFrame = frame
+    snapshotCornerRadius = cornerRadius
+    snapshotBgColor = backgroundColor
+    invalidate()
+  }
+
+  fun clearSnapshot() {
+    if (snapshotBitmap != null) {
+      Log.d("MorphCard", "clearSnapshot: clearing bitmap")
+      snapshotBitmap = null
+      snapshotFrame = null
+      snapshotCornerRadius = 0f
+      snapshotBgColor = null
+      invalidate()
+    }
+  }
+}

package/android/src/main/java/com/melivalesca/morphcard/MorphCardViewRegistry.kt

@@ -0,0 +1,24 @@
+package com.melivalesca.morphcard
+
+import android.view.View
+import java.lang.ref.WeakReference
+
+/**
+ * Singleton registry mapping React view tags to native views.
+ * Uses weak references so views can be garbage-collected normally.
+ */
+object MorphCardViewRegistry {
+  private val views = mutableMapOf<Int, WeakReference<View>>()
+
+  fun register(view: View, tag: Int) {
+    views[tag] = WeakReference(view)
+  }
+
+  fun unregister(tag: Int) {
+    views.remove(tag)
+  }
+
+  fun getView(tag: Int): View? {
+    return views[tag]?.get()
+  }
+}

package/android/src/main/jni/CMakeLists.txt

@@ -0,0 +1,62 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+
+set(LIB_LITERAL morphcard)
+set(LIB_TARGET_NAME react_codegen_${LIB_LITERAL})
+
+set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
+set(LIB_COMMON_DIR ${LIB_ANDROID_DIR}/../common/cpp)
+set(LIB_COMMON_COMPONENTS_DIR ${LIB_COMMON_DIR}/react/renderer/components/${LIB_LITERAL})
+set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/build/generated/source/codegen/jni)
+set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})
+
+add_compile_options(
+  -fexceptions
+  -frtti
+  -std=c++20
+  -Wall
+  -Wpedantic
+)
+
+file(GLOB LIB_CUSTOM_SRCS CONFIGURE_DEPENDS *.cpp ${LIB_COMMON_COMPONENTS_DIR}/*.cpp)
+file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS
+  ${LIB_ANDROID_GENERATED_JNI_DIR}/*.cpp
+  ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp
+)
+
+add_library(
+  ${LIB_TARGET_NAME}
+  SHARED
+  ${LIB_CUSTOM_SRCS}
+  ${LIB_CODEGEN_SRCS}
+)
+
+target_include_directories(
+  ${LIB_TARGET_NAME}
+  PUBLIC
+  .
+  ${LIB_COMMON_DIR}
+  ${LIB_ANDROID_GENERATED_JNI_DIR}
+  ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
+)
+
+target_link_libraries(
+  ${LIB_TARGET_NAME}
+  ReactAndroid::reactnative
+  ReactAndroid::jsi
+  fbjni::fbjni
+)
+
+if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 80)
+  target_compile_reactnative_options(${LIB_TARGET_NAME} PRIVATE)
+else()
+  target_compile_options(
+    ${LIB_TARGET_NAME}
+    PRIVATE
+    -DLOG_TAG=\"ReactNative\"
+    -fexceptions
+    -frtti
+    -std=c++20
+    -Wall
+  )
+endif()

package/common/cpp/react/renderer/components/morphcard/RNCMorphCardState.h

@@ -0,0 +1,30 @@
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook::react {
+
+class RNCMorphCardState final {
+public:
+  RNCMorphCardState() = default;
+
+#ifdef ANDROID
+  RNCMorphCardState(
+      const RNCMorphCardState& previousState,
+      folly::dynamic data) {}
+
+  folly::dynamic getDynamic() const {
+    return {};
+  }
+
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  }
+#endif
+};
+
+} // namespace facebook::react

package/ios/Fabric/RNCMorphCardSourceComponentView.h

@@ -0,0 +1,25 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNCMorphCardSourceComponentView : RCTViewComponentView
+
+@property (nonatomic, assign) CGFloat pendingTargetWidth;
+@property (nonatomic, assign) CGFloat pendingTargetHeight;
+@property (nonatomic, assign) CGFloat pendingTargetBorderRadius;
+@property (nonatomic, assign) CGFloat pendingContentOffsetY;
+@property (nonatomic, assign) BOOL pendingContentCentered;
+
+- (void)expandToTarget:(nullable UIView *)targetView
+               resolve:(RCTPromiseResolveBlock)resolve;
+
+- (void)collapseFromTarget:(nullable UIView *)targetView
+                   resolve:(RCTPromiseResolveBlock)resolve;
+
+/// Collapse using the stored target from the last expand call.
+- (void)collapseWithResolve:(RCTPromiseResolveBlock)resolve;
+
+@end
+
+NS_ASSUME_NONNULL_END