fix: fix event manager being shared for multiple views

Author: satya164

README.md

@@ -3,11 +3,11 @@
 [![npm][version-badge]][version]
 [![MIT License][license-badge]][license]
 
-Helpers that let you observe the value of an [`Animated.Value`][animated.value] or [`SharedValue`][reanimated.sharedvalue] and convert between them using native events.
+Helpers that let you observe the value of an [Animated][animated] or [Reanimated][reanimated] values and convert between them using native events.
 
 ## Use case
 
-This library is useful when you have a component that uses [`Animated`](https://reactnative.dev/docs/animated) and accepts animated values or styles, but you use [`Reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/) for your app's animations, or vice versa. You can use this library to convert your values to work with the component.
+This library is useful when you have a component that uses [Animated][animated] and accepts animated values or styles, but you use [Reanimated][reanimated] for your app's animations, or vice versa. You can use this library to convert your values to work with the component.
 
 ## Installation
 
@@ -21,19 +21,19 @@ The library exports the following components:
 
 ### `AnimatedConverter`
 
-A component that converts between an [`Animated.Value`][animated.value] and a [`SharedValue`][reanimated.sharedvalue] natively.
+A component that converts between an [`Animated.Node`][animated.node] and a [`SharedValue`][reanimated.sharedvalue] natively.
 
 It accepts the following props:
 
 - `from`: Value to read and observe changes from.
 
-  `Animated.Node` - `Animated.Value` and result of modifications such as interpolation (`Animated.AnimatedInterpolation`), addition (`Animated.AnimatedAddition`), etc.
+  [`Animated.Node`][animated.node] - [`Animated.Value`][animated.value] or result of modifications such as interpolation (`Animated.AnimatedInterpolation`), addition (`Animated.AnimatedAddition`), etc.
 
-  `SharedValue<number>` or `DerivedValue<number>`
+  [`SharedValue<number>`][reanimated.sharedvalue] or [`DerivedValue<number>`][reanimated.derivedvalue]
 
 - `to`: Value to update when the `from` value changes.
 
-  `Animated.Value` or `SharedValue<number>`
+  [`Animated.Value`][animated.value] or [`SharedValue<number>`][reanimated.sharedvalue]
 
 Usage:
 
@@ -55,7 +55,7 @@ A component that observes changes in a given value and emits an event when the v
 
 It accepts the following props:
 
-- `value`: The value to observe. It can be a `number`, [`Animated.Value`][animated.value], or [`SharedValue`][reanimated.sharedvalue].
+- `value`: The value to observe. It can be a `number`, [`Animated.Node`][animated.node] for [Animated][animated], [`SharedValue`][reanimated.sharedvalue] or [`DerivedValue`][reanimated.derivedvalue] for [Reanimated][reanimated].
 - `onValueChange`: A callback function that is called when the observed value changes.
 
 Usage:
@@ -77,7 +77,7 @@ const animatedValue = useRef(new Animated.Value(0)).current;
 
 ## How it works
 
-The library renders a native component that receives an [`Animated.Value`][animated.value] or [`SharedValue`][reanimated.sharedvalue] value. When the value changes, the library dispatches an event with the updated value.
+The library renders a native component that receives an [`Animated.Node`][animated.node] or [`SharedValue`][reanimated.sharedvalue] value. When the value changes, the library dispatches an event with this value.
 
 This event is then used with [`Animated.event`][animated.event] (with native driver) or [`useEvent`][reanimated.useevent] to update [`Animated.Value`][animated.value] or [`SharedValue`][reanimated.sharedvalue] respectively, depending on the usage.
 
@@ -93,9 +93,13 @@ MIT
 
 Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
 
+[animated]: https://reactnative.dev/docs/animated
+[reanimated]: https://docs.swmansion.com/react-native-reanimated/docs/
+[animated.node]: https://reactnative.dev/docs/animated#node
 [animated.value]: https://reactnative.dev/docs/animated#value
 [animated.event]: https://reactnative.dev/docs/animated#event
 [reanimated.sharedvalue]: https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/
+[reanimated.derivedvalue]: https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue
 [reanimated.useevent]: https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent
 [version-badge]: https://img.shields.io/npm/v/react-native-animated-observer.svg?style=flat-square
 [license-badge]: https://img.shields.io/npm/l/react-native-animated-observer.svg?style=flat-square

android/src/main/java/com/animatedobserver/AnimatedObserverEventManager.kt

@@ -16,7 +16,7 @@ class AnimatedObserverEventManager(private val emitter: (value: Double) -> Unit)
         field = value
 
         value?.let {
-          register(value)
+          unregister = register(value)
           emit()
         }
       }

android/src/main/java/com/animatedobserver/AnimatedObserverView.kt

@@ -0,0 +1,49 @@
+package com.animatedobserver
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.View
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+
+class AnimatedObserverView : View {
+  constructor(context: Context?) : super(context)
+  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
+  constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
+    context,
+    attrs,
+    defStyleAttr
+  )
+
+  val manager: AnimatedObserverEventManager = AnimatedObserverEventManager({ value ->
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, surfaceId)
+      ?: throw IllegalStateException("$NAME: EventDispatcher is not available for surfaceId: $surfaceId")
+
+    eventDispatcher.dispatchEvent(ValueChangeEvent(surfaceId, this.id, value))
+  })
+
+  inner class ValueChangeEvent(
+    surfaceId: Int, viewId: Int, private val value: Double
+  ) : Event<ValueChangeEvent>(surfaceId, viewId) {
+    override fun getEventName() = EVENT_ON_CHANGE
+
+    override fun getEventData(): WritableMap = Arguments.createMap().apply {
+      putDouble("value", value)
+    }
+  }
+
+  companion object {
+    const val NAME = "AnimatedObserverView"
+
+    /**
+     * On Android, it's necessary to use the `top` prefix for event names
+     * Otherwise, it doesn't work with `Animated.event` using `useNativeDriver: true`
+     */
+    const val EVENT_ON_CHANGE = "topValueChange"
+  }
+}

android/src/main/java/com/animatedobserver/AnimatedObserverViewManager.kt

@@ -1,97 +1,53 @@
 package com.animatedobserver
 
-import android.util.Log
-import android.view.View
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.ReactContext
-import com.facebook.react.bridge.WritableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.uimanager.events.Event
 import com.facebook.react.viewmanagers.AnimatedObserverViewManagerDelegate
 import com.facebook.react.viewmanagers.AnimatedObserverViewManagerInterface
-import java.util.concurrent.ConcurrentHashMap
 
-@ReactModule(name = AnimatedObserverViewManager.NAME)
-class AnimatedObserverViewManager : SimpleViewManager<View>(),
-  AnimatedObserverViewManagerInterface<View> {
-  private val mDelegate: ViewManagerDelegate<View> =
+@ReactModule(name = AnimatedObserverView.NAME)
+class AnimatedObserverViewManager : SimpleViewManager<AnimatedObserverView>(),
+  AnimatedObserverViewManagerInterface<AnimatedObserverView> {
+  private val mDelegate: ViewManagerDelegate<AnimatedObserverView> =
     AnimatedObserverViewManagerDelegate(this)
 
-  private var manager: AnimatedObserverEventManager? = null;
-
-  override fun createViewInstance(context: ThemedReactContext): View {
-    val view = View(context)
-
-    manager?.cleanup()
-    manager = AnimatedObserverEventManager({ value ->
-      val reactContext = view.context as ReactContext
-      val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
-      val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, surfaceId)
-        ?: throw IllegalStateException("$AnimatedObserverViewManager.NAME: EventDispatcher is not available for surfaceId: $surfaceId")
-
-      eventDispatcher.dispatchEvent(ValueChangeEvent(surfaceId, view.id, value))
-    })
+  override fun createViewInstance(context: ThemedReactContext): AnimatedObserverView {
+    val view = AnimatedObserverView(context)
 
     return view;
   }
 
-  override fun onDropViewInstance(view: View) {
-    manager?.cleanup()
-    manager = null
+  override fun onDropViewInstance(view: AnimatedObserverView) {
+    view.manager.cleanup()
 
     super.onDropViewInstance(view)
   }
 
   override fun prepareToRecycleView(
     reactContext: ThemedReactContext,
-    view: View
-  ): View? {
-    manager?.cleanup()
-    manager = null
-
+    view: AnimatedObserverView
+  ): AnimatedObserverView? {
     return super.prepareToRecycleView(reactContext, view)
   }
 
   override fun getDelegate() = mDelegate
 
-  override fun getName() = NAME
+  override fun getName() = AnimatedObserverView.NAME
 
   override fun getExportedCustomDirectEventTypeConstants() = mapOf(
-    EVENT_ON_CHANGE to mapOf("registrationName" to EVENT_ON_CHANGE)
+    AnimatedObserverView.EVENT_ON_CHANGE to mapOf("registrationName" to AnimatedObserverView.EVENT_ON_CHANGE)
   )
 
   @ReactProp(name = "tag")
-  override fun setTag(view: View, nextTag: String?) {
-    manager?.tag = nextTag
+  override fun setTag(view: AnimatedObserverView, nextTag: String?) {
+    view.manager.tag = nextTag
   }
 
   @ReactProp(name = "value")
-  override fun setValue(view: View, nextValue: Double) {
-   manager?.value = nextValue
-  }
-
-  inner class ValueChangeEvent(
-    surfaceId: Int, viewId: Int, private val value: Double
-  ) : Event<ValueChangeEvent>(surfaceId, viewId) {
-    override fun getEventName() = EVENT_ON_CHANGE
-
-    override fun getEventData(): WritableMap = Arguments.createMap().apply {
-      putDouble("value", value)
-    }
-  }
-
-  companion object {
-    const val NAME = "AnimatedObserverView"
-
-    /**
-     * On Android, it's necessary to use `top` prefix for event names
-     * Otherwise it doesn't work with `Animated.event` using `useNativeDriver: true`
-     */
-    const val EVENT_ON_CHANGE = "topValueChange"
+  override fun setValue(view: AnimatedObserverView, nextValue: Double) {
+    view.manager.value = nextValue
   }
 }

example/src/Examples.tsx

@@ -39,6 +39,7 @@ export function AnimatedToReanimated() {
     <View style={styles.container}>
       <AnimatedConverter from={positionAnimated} to={positionReanimated} />
       <AnimatedConverter
+        name="PositionAnimatedInterpolated"
         from={positionAnimatedInterpolated}
         to={positionReanimatedInterpolated}
       />