react-native-morph-card 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MeliValesca
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# react-native-morph-card
+
+Native card-to-modal morph transition for React Native. The iOS App Store "card of the day" expand animation, as a library.
+
+- Native animations on both platforms (UIKit `UIViewPropertyAnimator` / Android Transition framework)
+- No JS-driven animation, no webview, no experimental flags
+- Works with any navigation setup
+- Supports old and new React Native architecture (Paper + Fabric)
+
+> **Status:** Early development — the skeleton is in place, native morph animation is not yet implemented.
+
+## Installation
+
+```sh
+yarn add react-native-morph-card
+```
+
+### iOS
+
+```sh
+cd ios && pod install
+```
+
+### Android
+
+No additional steps required.
+
+## Usage
+
+```tsx
+import { MorphCardSource } from 'react-native-morph-card';
+
+function App() {
+  return (
+    <MorphCardSource style={styles.card}>
+      <Pressable onPress={() => console.log('Morph!')}>
+        <Text>Tap me</Text>
+      </Pressable>
+    </MorphCardSource>
+  );
+}
+```
+
+## Running the example app
+
+The example app lives in the `example/` directory and uses [`react-native-test-app`](https://github.com/nicklasmoeller/react-native-test-app) to manage the native projects.
+
+### Prerequisites
+
+| Tool | Version |
+|------|---------|
+| Node.js | >= 18 |
+| Yarn | 1.x |
+| Ruby | >= 2.7 (for CocoaPods) |
+| CocoaPods | ~> 1.15 |
+| Xcode | >= 15 (iOS) |
+| Android Studio | latest (Android) |
+| JDK | 17 |
+
+Make sure you have an iOS Simulator or Android Emulator available.
+
+### 1. Install dependencies
+
+From the repository root:
+
+```sh
+# Install root (library) dependencies
+yarn install
+
+# Install example app dependencies
+cd example
+yarn install
+```
+
+### 2. Run on iOS
+
+```sh
+# Install CocoaPods (from example/ios)
+cd ios
+bundle install
+bundle exec pod install
+cd ..
+
+# Start Metro and build
+yarn ios
+```
+
+This opens the app on the iOS Simulator. Metro starts automatically.
+
+If you prefer to build from Xcode, open `example/ios/MorphCardExample.xcworkspace` and press Run.
+
+### 3. Run on Android
+
+Make sure an Android emulator is running (or a device is connected), then from `example/`:
+
+```sh
+yarn android
+```
+
+Gradle will download dependencies on first run — this can take a few minutes.
+
+### 4. Start Metro separately (optional)
+
+If you want to start the Metro bundler on its own (e.g. to see logs in a dedicated terminal):
+
+```sh
+cd example
+yarn start
+```
+
+Then run `yarn ios` or `yarn android` in another terminal.
+
+### Building JS bundles manually
+
+Only needed if you want to test pre-built bundles (not required for normal development):
+
+```sh
+cd example
+yarn build:ios
+yarn build:android
+```
+
+### Troubleshooting
+
+| Problem | Fix |
+|---------|-----|
+| `pod install` fails | Run `bundle install` first, then `bundle exec pod install` |
+| Android build fails on first run | Make sure `ANDROID_HOME` is set and an emulator/device is available |
+| Metro can't find `react-native-morph-card` | Run `yarn install` at the repo root first |
+| Duplicate module errors | Delete `node_modules` in both root and `example/`, then reinstall |
+
+## License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,59 @@
+buildscript {
+  ext.safeExtGet = { prop, fallback ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+  }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+def newArchEnabled = project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+
+android {
+  namespace "com.melivalesca.morphcard"
+  compileSdkVersion safeExtGet('compileSdkVersion', 34)
+
+  defaultConfig {
+    minSdkVersion safeExtGet('minSdkVersion', 21)
+    targetSdkVersion safeExtGet('targetSdkVersion', 34)
+  }
+
+  sourceSets.main {
+    java {
+      if (newArchEnabled) {
+        srcDirs += 'src/fabric/java'
+      } else {
+        srcDirs += 'src/paper/java'
+      }
+    }
+  }
+
+  lintOptions {
+    abortOnError false
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+dependencies {
+  implementation "com.facebook.react:react-native:+"
+}
+
+if (newArchEnabled) {
+  apply plugin: "com.facebook.react"
+}
+
+try {
+  apply plugin: 'com.diffplug.spotless'
+  spotless {
+    kotlin {
+      target '**/*.kt'
+      googleJavaFormat()
+    }
+  }
+} catch (Exception ignored) {
+  // Spotless plugin not available in consumer projects
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+  package="com.melivalesca.morphcard">
+</manifest>

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

@@ -0,0 +1,120 @@
+package com.melivalesca.morphcard
+
+import android.os.Handler
+import android.os.Looper
+import android.view.View
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.WritableNativeMap
+
+class MorphCardModule(reactContext: ReactApplicationContext) :
+  NativeMorphCardModuleSpec(reactContext) {
+
+  private val mainHandler = Handler(Looper.getMainLooper())
+
+  override fun prepareExpand(sourceTag: Double) {
+    mainHandler.post {
+      val sourceView = MorphCardViewRegistry.getView(sourceTag.toInt())
+      if (sourceView is MorphCardSourceView) {
+        sourceView.prepareExpand(null)
+      }
+    }
+  }
+
+  override fun setTargetConfig(
+    sourceTag: Double,
+    targetWidth: Double,
+    targetHeight: Double,
+    targetBorderRadius: Double,
+    contentOffsetY: Double,
+    contentCentered: Boolean
+  ) {
+    mainHandler.post {
+      val sourceView = MorphCardViewRegistry.getView(sourceTag.toInt())
+      if (sourceView is MorphCardSourceView) {
+        sourceView.pendingTargetWidth = targetWidth.toFloat()
+        sourceView.pendingTargetHeight = targetHeight.toFloat()
+        sourceView.pendingTargetBorderRadius = targetBorderRadius.toFloat()
+        sourceView.pendingContentOffsetY = contentOffsetY.toFloat()
+        sourceView.pendingContentCentered = contentCentered
+      }
+    }
+  }
+
+  override fun expand(sourceTag: Double, targetTag: Double, promise: Promise) {
+    mainHandler.post {
+      val sourceView = MorphCardViewRegistry.getView(sourceTag.toInt())
+      val targetView = MorphCardViewRegistry.getView(targetTag.toInt())
+
+      if (sourceView is MorphCardSourceView) {
+        // If prepareExpand wasn't called yet (e.g. via morphExpand API),
+        // create the overlay now.
+        if (!sourceView.hasOverlay) {
+          sourceView.prepareExpand(targetView)
+        }
+
+        // Wait until the target view is registered AND its
+        // screen container is ready, then animate.
+        animateWhenReady(sourceView, targetTag.toInt(), promise, 0)
+      } else {
+        promise.resolve(false)
+      }
+    }
+  }
+
+  private fun animateWhenReady(
+    sourceView: MorphCardSourceView,
+    targetTag: Int,
+    promise: Promise,
+    attempt: Int
+  ) {
+    val targetView = MorphCardViewRegistry.getView(targetTag)
+
+    // Wait if: target not registered yet, OR screen container not found
+    val needsWait = targetView == null || !sourceView.isTargetScreenReady(targetView)
+    if (needsWait && attempt < 20) {
+      mainHandler.postDelayed({
+        animateWhenReady(sourceView, targetTag, promise, attempt + 1)
+      }, 50)
+      return
+    }
+
+    // Re-hide target screen if we found the target late
+    if (targetView != null) {
+      sourceView.hideTargetScreen(targetView)
+    }
+
+    sourceView.animateExpand(targetView, promise)
+  }
+
+  override fun collapse(sourceTag: Double, promise: Promise) {
+    mainHandler.post {
+      val sourceView = MorphCardViewRegistry.getView(sourceTag.toInt())
+      if (sourceView is MorphCardSourceView) {
+        sourceView.collapseWithResolve(promise)
+      } else {
+        promise.resolve(false)
+      }
+    }
+  }
+
+  override fun getSourceSize(sourceTag: Double, promise: Promise) {
+    mainHandler.post {
+      val sourceView = MorphCardViewRegistry.getView(sourceTag.toInt())
+      val map = WritableNativeMap()
+      if (sourceView != null) {
+        val density = sourceView.resources.displayMetrics.density
+        map.putDouble("width", (sourceView.width / density).toDouble())
+        map.putDouble("height", (sourceView.height / density).toDouble())
+      } else {
+        map.putDouble("width", 0.0)
+        map.putDouble("height", 0.0)
+      }
+      promise.resolve(map)
+    }
+  }
+
+  companion object {
+    const val NAME = "RNCMorphCardModule"
+  }
+}

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

@@ -0,0 +1,42 @@
+package com.melivalesca.morphcard
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class MorphCardPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return when (name) {
+      MorphCardModule.NAME -> MorphCardModule(reactContext)
+      else -> null
+    }
+  }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+    return ReactModuleInfoProvider {
+      mapOf(
+        MorphCardModule.NAME to
+          ReactModuleInfo(
+            MorphCardModule.NAME,
+            MorphCardModule.NAME,
+            false, // canOverrideExistingModule
+            false, // needsEagerInit
+            false, // isCxxModule
+            true,  // isTurboModule
+          )
+      )
+    }
+  }
+
+  override fun createViewManagers(
+    reactContext: ReactApplicationContext
+  ): List<ViewManager<*, *>> {
+    return listOf(
+      MorphCardSourceManager(),
+      MorphCardTargetManager(),
+    )
+  }
+}

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

@@ -0,0 +1,40 @@
+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.RNCMorphCardSourceManagerDelegate
+import com.facebook.react.viewmanagers.RNCMorphCardSourceManagerInterface
+
+@ReactModule(name = MorphCardSourceManager.REACT_CLASS)
+class MorphCardSourceManager :
+  ViewGroupManager<MorphCardSourceView>(),
+  RNCMorphCardSourceManagerInterface<MorphCardSourceView> {
+
+  private val delegate = RNCMorphCardSourceManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<MorphCardSourceView> = delegate
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): MorphCardSourceView {
+    return MorphCardSourceView(reactContext)
+  }
+
+  override fun setDuration(view: MorphCardSourceView, value: Double) {
+    view.duration = value
+  }
+
+  override fun setScaleMode(view: MorphCardSourceView, value: String?) {
+    view.scaleMode = value ?: "aspectFill"
+  }
+
+  override fun setCardBorderRadius(view: MorphCardSourceView, value: Double) {
+    view.borderRadiusDp = value.toFloat()
+  }
+
+  companion object {
+    const val REACT_CLASS = "RNCMorphCardSource"
+  }
+}