feat: Add onDropView() to Hybrid Views (#1266)

mrousavy · web-flow · commit dc233c5e7cd1 · 2026-03-13T14:41:41.000+01:00
* feat: Add `onDropView()` to Hybrid Views

* feat: Use `invalidate` on iOS for `onDropView()`

* specs

* chore: Lint

* fix: Whoops Android is optional

* chore: simplify

* chore: Call `super` last in ondrop

* chore: Implement `onDropVIew()` for test
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -2217,7 +2217,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   FBLazyVector: 7c1d69992204c5ec452eeefa4a24b0ff311709c8
-  hermes-engine: 16e781d7fca74c8bb3ca59b99527d9633ee9ee36
+  hermes-engine: b69aade2dcf59e8c2203c748ca79c7fa4c875053
   NitroModules: fb232c72f7f287543f0c6c214c2a75dce8de8cf3
   NitroTest: 732039c97fdd73f8d95887475ca4a8713696cc06
   NitroTestExternal: eaec60657bfaa38eb3e4eb6e996548221606e428
@@ -2229,7 +2229,7 @@ SPEC CHECKSUMS:
   React: f6f8fc5c01e77349cdfaf49102bcb928ac31d8ed
   React-callinvoker: 3e62a849bda1522c6422309c02f5dc3210bc5359
   React-Core: 0b765bc7c2b83dff178c2b03ed8a0390df26f18c
-  React-Core-prebuilt: 88810feb58457484bff17e9e91a15453407d745a
+  React-Core-prebuilt: 1ed3b91c7035f715bf741f1b8a2c87e94d126d38
   React-CoreModules: 55b932564ba696301cb683a86385be6a6f137e57
   React-cxxreact: 5bfb95256fde56cc0f9ce425f38cfaa085e71ad2
   React-debug: f9dda2791d3ebe2078bc6102641edab77917efb7
@@ -2292,7 +2292,7 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: 23e2bca1661f8781e55fcc05a151fc1df97bc1fb
   ReactCodegen: c049d7e966ed24be56d8e21cb1b8880316975e76
   ReactCommon: 89ccc6cb100ca5a0303b46483037ef8f3e06e2e0
-  ReactNativeDependencies: 1a7e3c3ffa57533d8118dd9bc01790ffa9e02a3b
+  ReactNativeDependencies: 69de62c8a59d21e7b6af8bdfb62b61e798f65351
   RNScreens: dd61bc3a3e6f6901ad833efa411917d44827cf51
   Yoga: 21f482cbc18b56cdc477cd3a0c5b8c2c83ac27ce
 
diff --git a/packages/nitrogen/src/syntax/swift/SwiftHybridObjectBridge.ts b/packages/nitrogen/src/syntax/swift/SwiftHybridObjectBridge.ts
@@ -69,6 +69,11 @@ public final func maybePrepareForRecycle() {
   guard let recyclable = __implementation as? any RecyclableView else { return }
   recyclable.prepareForRecycle()
 }
+`.trim(),
+      `
+public final func onDropView() {
+  __implementation.onDropView()
+}
 `.trim()
     )
   }
diff --git a/packages/nitrogen/src/views/kotlin/KotlinHybridViewManager.ts b/packages/nitrogen/src/views/kotlin/KotlinHybridViewManager.ts
@@ -75,7 +75,7 @@ public class ${manager}: SimpleViewManager<View>() {
   }
 
   override fun updateState(view: View, props: ReactStylesDiffMap, stateWrapper: StateWrapper): Any? {
-    val hybridView = view.getTag(associated_hybrid_view_tag) as? ${viewImplementation}
+    val hybridView = getHybridView(view)
       ?: throw Error("Couldn't find view $view in local views table!")
 
     // 1. Update each prop individually
@@ -87,9 +87,15 @@ public class ${manager}: SimpleViewManager<View>() {
     return super.updateState(view, props, stateWrapper)
   }
 
+  override fun onDropViewInstance(view: View) {
+    val hybridView = getHybridView(view)
+    hybridView?.onDropView()
+    return super.onDropViewInstance(view)
+  }
+
   protected override fun prepareToRecycleView(reactContext: ThemedReactContext, view: View): View? {
     super.prepareToRecycleView(reactContext, view)
-    val hybridView = view.getTag(associated_hybrid_view_tag) as? ${viewImplementation}
+    val hybridView = getHybridView(view)
       ?: return null
 
     @Suppress("USELESS_IS_CHECK")
@@ -103,6 +109,10 @@ public class ${manager}: SimpleViewManager<View>() {
       return null
     }
   }
+
+  private fun getHybridView(view: View): ${viewImplementation}? {
+    return view.getTag(associated_hybrid_view_tag) as? ${viewImplementation}
+  }
 }
   `.trim()
 
diff --git a/packages/nitrogen/src/views/swift/SwiftHybridViewManager.ts b/packages/nitrogen/src/views/swift/SwiftHybridViewManager.ts
@@ -150,6 +150,12 @@ using namespace ${namespace}::views;
   swiftPart.maybePrepareForRecycle();
 }
 
+- (void)invalidate {
+  ${swiftNamespace}::${HybridTSpecCxx}& swiftPart = _hybridView->getSwiftPart();
+  swiftPart.onDropView();
+  [super invalidate];
+}
+
 @end
   `
 
diff --git a/packages/react-native-nitro-modules/android/src/main/java/com/margelo/nitro/views/HybridView.kt b/packages/react-native-nitro-modules/android/src/main/java/com/margelo/nitro/views/HybridView.kt
@@ -25,4 +25,12 @@ abstract class HybridView : HybridObject() {
    * React props are updated in a single batch/transaction.
    */
   open fun afterUpdate() { /* noop */ }
+
+  /**
+   * Called when the [HybridView] is about
+   * to be dropped and unmounted.
+   * This is a good place to clean up view-related
+   * resources.
+   */
+  open fun onDropView() { /* noop */ }
 }
diff --git a/packages/react-native-nitro-modules/ios/views/HybridView.swift b/packages/react-native-nitro-modules/ios/views/HybridView.swift
@@ -29,11 +29,20 @@
      * React props are updated in a single batch/transaction.
      */
     func afterUpdate()
+
+    /**
+     * Called when the `HybridView` is about
+     * to be dropped and unmounted.
+     * This is a good place to clean up view-related
+     * resources.
+     */
+    func onDropView()
   }
 
   extension HybridView {
     public func beforeUpdate() { /* noop */  }
     public func afterUpdate() { /* noop */  }
+    public func onDropView() { /* noop */  }
   }
 
   extension HybridView {
diff --git a/packages/react-native-nitro-test/android/src/main/java/com/margelo/nitro/test/HybridRecyclableTestView.kt b/packages/react-native-nitro-test/android/src/main/java/com/margelo/nitro/test/HybridRecyclableTestView.kt
@@ -1,6 +1,7 @@
 package com.margelo.nitro.test
 
 import android.graphics.Color
+import android.util.Log
 import android.view.View
 import androidx.annotation.Keep
 import com.facebook.proguard.annotations.DoNotStrip
@@ -27,6 +28,10 @@ class HybridRecyclableTestView(
       }
     }
 
+  override fun onDropView() {
+    Log.i(TAG, "View dropped!")
+  }
+
   // Recycling conformance
   override fun prepareForRecycle() {
     view.setBackgroundColor(Color.YELLOW)
diff --git a/packages/react-native-nitro-test/ios/HybridRecyclableTestView.swift b/packages/react-native-nitro-test/ios/HybridRecyclableTestView.swift
@@ -22,6 +22,10 @@ class HybridRecyclableTestView: HybridRecyclableTestViewSpec, RecyclableView {
     }
   }
 
+  func onDropView() {
+    print("View dropped!")
+  }
+
   // Recycling conformance
   func prepareForRecycle() {
     view.backgroundColor = .yellow
diff --git a/packages/react-native-nitro-test/nitrogen/generated/android/kotlin/com/margelo/nitro/test/views/HybridRecyclableTestViewManager.kt b/packages/react-native-nitro-test/nitrogen/generated/android/kotlin/com/margelo/nitro/test/views/HybridRecyclableTestViewManager.kt
@@ -39,7 +39,7 @@ public class HybridRecyclableTestViewManager: SimpleViewManager<View>() {
   }
 
   override fun updateState(view: View, props: ReactStylesDiffMap, stateWrapper: StateWrapper): Any? {
-    val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridRecyclableTestView
+    val hybridView = getHybridView(view)
       ?: throw Error("Couldn't find view $view in local views table!")
 
     // 1. Update each prop individually
@@ -51,9 +51,15 @@ public class HybridRecyclableTestViewManager: SimpleViewManager<View>() {
     return super.updateState(view, props, stateWrapper)
   }
 
+  override fun onDropViewInstance(view: View) {
+    val hybridView = getHybridView(view)
+    hybridView?.onDropView()
+    return super.onDropViewInstance(view)
+  }
+
   protected override fun prepareToRecycleView(reactContext: ThemedReactContext, view: View): View? {
     super.prepareToRecycleView(reactContext, view)
-    val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridRecyclableTestView
+    val hybridView = getHybridView(view)
       ?: return null
 
     @Suppress("USELESS_IS_CHECK")
@@ -67,4 +73,8 @@ public class HybridRecyclableTestViewManager: SimpleViewManager<View>() {
       return null
     }
   }
+
+  private fun getHybridView(view: View): HybridRecyclableTestView? {
+    return view.getTag(associated_hybrid_view_tag) as? HybridRecyclableTestView
+  }
 }
diff --git a/packages/react-native-nitro-test/nitrogen/generated/android/kotlin/com/margelo/nitro/test/views/HybridTestViewManager.kt b/packages/react-native-nitro-test/nitrogen/generated/android/kotlin/com/margelo/nitro/test/views/HybridTestViewManager.kt
@@ -39,7 +39,7 @@ public class HybridTestViewManager: SimpleViewManager<View>() {
   }
 
   override fun updateState(view: View, props: ReactStylesDiffMap, stateWrapper: StateWrapper): Any? {
-    val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridTestView
+    val hybridView = getHybridView(view)
       ?: throw Error("Couldn't find view $view in local views table!")
 
     // 1. Update each prop individually
@@ -51,9 +51,15 @@ public class HybridTestViewManager: SimpleViewManager<View>() {
     return super.updateState(view, props, stateWrapper)
   }
 
+  override fun onDropViewInstance(view: View) {
+    val hybridView = getHybridView(view)
+    hybridView?.onDropView()
+    return super.onDropViewInstance(view)
+  }
+
   protected override fun prepareToRecycleView(reactContext: ThemedReactContext, view: View): View? {
     super.prepareToRecycleView(reactContext, view)
-    val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridTestView
+    val hybridView = getHybridView(view)
       ?: return null
 
     @Suppress("USELESS_IS_CHECK")
@@ -67,4 +73,8 @@ public class HybridTestViewManager: SimpleViewManager<View>() {
       return null
     }
   }
+
+  private fun getHybridView(view: View): HybridTestView? {
+    return view.getTag(associated_hybrid_view_tag) as? HybridTestView
+  }
 }
diff --git a/packages/react-native-nitro-test/nitrogen/generated/ios/c++/views/HybridRecyclableTestViewComponent.mm b/packages/react-native-nitro-test/nitrogen/generated/ios/c++/views/HybridRecyclableTestViewComponent.mm
@@ -104,4 +104,10 @@ - (void)prepareForRecycle {
   swiftPart.maybePrepareForRecycle();
 }
 
+- (void)invalidate {
+  NitroTest::HybridRecyclableTestViewSpec_cxx& swiftPart = _hybridView->getSwiftPart();
+  swiftPart.onDropView();
+  [super invalidate];
+}
+
 @end
diff --git a/packages/react-native-nitro-test/nitrogen/generated/ios/c++/views/HybridTestViewComponent.mm b/packages/react-native-nitro-test/nitrogen/generated/ios/c++/views/HybridTestViewComponent.mm
@@ -119,4 +119,10 @@ - (void)prepareForRecycle {
   swiftPart.maybePrepareForRecycle();
 }
 
+- (void)invalidate {
+  NitroTest::HybridTestViewSpec_cxx& swiftPart = _hybridView->getSwiftPart();
+  swiftPart.onDropView();
+  [super invalidate];
+}
+
 @end
diff --git a/packages/react-native-nitro-test/nitrogen/generated/ios/swift/HybridRecyclableTestViewSpec_cxx.swift b/packages/react-native-nitro-test/nitrogen/generated/ios/swift/HybridRecyclableTestViewSpec_cxx.swift
@@ -149,4 +149,8 @@ open class HybridRecyclableTestViewSpec_cxx {
     guard let recyclable = __implementation as? any RecyclableView else { return }
     recyclable.prepareForRecycle()
   }
+  
+  public final func onDropView() {
+    __implementation.onDropView()
+  }
 }
diff --git a/packages/react-native-nitro-test/nitrogen/generated/ios/swift/HybridTestViewSpec_cxx.swift b/packages/react-native-nitro-test/nitrogen/generated/ios/swift/HybridTestViewSpec_cxx.swift
@@ -201,4 +201,8 @@ open class HybridTestViewSpec_cxx {
     guard let recyclable = __implementation as? any RecyclableView else { return }
     recyclable.prepareForRecycle()
   }
+  
+  public final func onDropView() {
+    __implementation.onDropView()
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,11 @@ public final func maybePrepareForRecycle() {`
`69`	`69`	`guard let recyclable = __implementation as? any RecyclableView else { return }`
`70`	`70`	`recyclable.prepareForRecycle()`
`71`	`71`	`}`
	`72`	+`.trim(),
	`73`	+ `
	`74`	`+public final func onDropView() {`
	`75`	`+ __implementation.onDropView()`
	`76`	`+}`
`72`	`77`	`.trim()
`73`	`78`	`)`
`74`	`79`	`}`
Original file line number	Diff line number	Diff line change
`@@ -150,6 +150,12 @@ using namespace ${namespace}::views;`
`150`	`150`	`swiftPart.maybePrepareForRecycle();`
`151`	`151`	`}`
`152`	`152`
	`153`	`+- (void)invalidate {`
	`154`	`+ ${swiftNamespace}::${HybridTSpecCxx}& swiftPart = _hybridView->getSwiftPart();`
	`155`	`+ swiftPart.onDropView();`
	`156`	`+ [super invalidate];`
	`157`	`+}`
	`158`	`+`
`153`	`159`	`@end`
`154`	`160`	`
`155`	`161`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,10 @@ class HybridRecyclableTestView: HybridRecyclableTestViewSpec, RecyclableView {`
`22`	`22`	`}`
`23`	`23`	`}`
`24`	`24`
	`25`	`+ func onDropView() {`
	`26`	`+ print("View dropped!")`
	`27`	`+ }`
	`28`	`+`
`25`	`29`	`// Recycling conformance`
`26`	`30`	`func prepareForRecycle() {`
`27`	`31`	`view.backgroundColor = .yellow`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ public class HybridRecyclableTestViewManager: SimpleViewManager<View>() {`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`override fun updateState(view: View, props: ReactStylesDiffMap, stateWrapper: StateWrapper): Any? {`
`42`		`- val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridRecyclableTestView`
	`42`	`+ val hybridView = getHybridView(view)`
`43`	`43`	`?: throw Error("Couldn't find view $view in local views table!")`
`44`	`44`
`45`	`45`	`// 1. Update each prop individually`
`@@ -51,9 +51,15 @@ public class HybridRecyclableTestViewManager: SimpleViewManager<View>() {`
`51`	`51`	`return super.updateState(view, props, stateWrapper)`
`52`	`52`	`}`
`53`	`53`
	`54`	`+ override fun onDropViewInstance(view: View) {`
	`55`	`+ val hybridView = getHybridView(view)`
	`56`	`+ hybridView?.onDropView()`
	`57`	`+ return super.onDropViewInstance(view)`
	`58`	`+ }`
	`59`	`+`
`54`	`60`	`protected override fun prepareToRecycleView(reactContext: ThemedReactContext, view: View): View? {`
`55`	`61`	`super.prepareToRecycleView(reactContext, view)`
`56`		`- val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridRecyclableTestView`
	`62`	`+ val hybridView = getHybridView(view)`
`57`	`63`	`?: return null`
`58`	`64`
`59`	`65`	`@Suppress("USELESS_IS_CHECK")`
`@@ -67,4 +73,8 @@ public class HybridRecyclableTestViewManager: SimpleViewManager<View>() {`
`67`	`73`	`return null`
`68`	`74`	`}`
`69`	`75`	`}`
	`76`	`+`
	`77`	`+ private fun getHybridView(view: View): HybridRecyclableTestView? {`
	`78`	`+ return view.getTag(associated_hybrid_view_tag) as? HybridRecyclableTestView`
	`79`	`+ }`
`70`	`80`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ public class HybridTestViewManager: SimpleViewManager<View>() {`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`override fun updateState(view: View, props: ReactStylesDiffMap, stateWrapper: StateWrapper): Any? {`
`42`		`- val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridTestView`
	`42`	`+ val hybridView = getHybridView(view)`
`43`	`43`	`?: throw Error("Couldn't find view $view in local views table!")`
`44`	`44`
`45`	`45`	`// 1. Update each prop individually`
`@@ -51,9 +51,15 @@ public class HybridTestViewManager: SimpleViewManager<View>() {`
`51`	`51`	`return super.updateState(view, props, stateWrapper)`
`52`	`52`	`}`
`53`	`53`
	`54`	`+ override fun onDropViewInstance(view: View) {`
	`55`	`+ val hybridView = getHybridView(view)`
	`56`	`+ hybridView?.onDropView()`
	`57`	`+ return super.onDropViewInstance(view)`
	`58`	`+ }`
	`59`	`+`
`54`	`60`	`protected override fun prepareToRecycleView(reactContext: ThemedReactContext, view: View): View? {`
`55`	`61`	`super.prepareToRecycleView(reactContext, view)`
`56`		`- val hybridView = view.getTag(associated_hybrid_view_tag) as? HybridTestView`
	`62`	`+ val hybridView = getHybridView(view)`
`57`	`63`	`?: return null`
`58`	`64`
`59`	`65`	`@Suppress("USELESS_IS_CHECK")`
`@@ -67,4 +73,8 @@ public class HybridTestViewManager: SimpleViewManager<View>() {`
`67`	`73`	`return null`
`68`	`74`	`}`
`69`	`75`	`}`
	`76`	`+`
	`77`	`+ private fun getHybridView(view: View): HybridTestView? {`
	`78`	`+ return view.getTag(associated_hybrid_view_tag) as? HybridTestView`
	`79`	`+ }`
`70`	`80`	`}`