feat: simplify onTransitionEnd to batch-fire once per animation group

Instead of firing per-property, onTransitionEnd now fires a single event
when all animations in a batch complete. Uses batch ID tracking to handle
interruptions correctly — starting new animations immediately fires the
old batch as interrupted. Also adds transformOrigin prop (0-1 fractions)
for controlling the pivot point of scale/rotation animations.

Author: janicduplessis

android/src/main/java/com/ease/EaseView.kt

@@ -35,12 +35,27 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     var transitionMass: Float = 1.0f
     var transitionLoop: String = "none"
 
+    // --- Transform origin (0–1 fractions) ---
+    var transformOriginX: Float = 0.5f
+        set(value) {
+            field = value
+            applyTransformOrigin()
+        }
+    var transformOriginY: Float = 0.5f
+        set(value) {
+            field = value
+            applyTransformOrigin()
+        }
+
     // --- Hardware layer ---
-    var useHardwareLayer: Boolean = true
+    var useHardwareLayer: Boolean = false
 
     // --- Event callback ---
-    var onTransitionEnd: ((property: String, finished: Boolean) -> Unit)? = null
+    var onTransitionEnd: ((finished: Boolean) -> Unit)? = null
     private var activeAnimationCount: Int = 0
+    private var animationBatchId: Int = 0
+    private var pendingBatchAnimationCount: Int = 0
+    private var anyInterrupted: Boolean = false
     private var savedLayerType: Int = View.LAYER_TYPE_NONE
 
     // --- Initial animate values (set by ViewManager) ---
@@ -69,16 +84,6 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         private val INTERPOLATOR_LINEAR by lazy { LinearInterpolator() }
     }
 
-    private fun toJsPropertyName(propertyName: String): String? = when (propertyName) {
-        "alpha" -> "opacity"
-        "translationX" -> "translateX"
-        "translationY" -> "translateY"
-        "scaleX" -> "scale"
-        "scaleY" -> null // Skip — scaleX already fires for scale
-        "rotation" -> "rotate"
-        else -> null
-    }
-
     private fun getInterpolator(easing: String): TimeInterpolator = when (easing) {
         "easeIn" -> INTERPOLATOR_EASE_IN
         "easeOut" -> INTERPOLATOR_EASE_OUT
@@ -107,6 +112,20 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         }
     }
 
+    // --- Transform origin ---
+
+    fun applyTransformOrigin() {
+        if (width > 0 && height > 0) {
+            pivotX = width * transformOriginX
+            pivotY = height * transformOriginY
+        }
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        super.onLayout(changed, left, top, right, bottom)
+        applyTransformOrigin()
+    }
+
     fun applyPendingAnimateValues() {
         applyAnimateValues(pendingOpacity, pendingTranslateX, pendingTranslateY, pendingScale, pendingRotate)
     }
@@ -118,6 +137,14 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         scale: Float,
         rotate: Float
     ) {
+        if (pendingBatchAnimationCount > 0) {
+            onTransitionEnd?.invoke(false)
+        }
+
+        animationBatchId++
+        pendingBatchAnimationCount = 0
+        anyInterrupted = false
+
         if (isFirstMount) {
             isFirstMount = false
 
@@ -239,6 +266,9 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         cancelSpringForProperty(propertyName)
         runningAnimators[propertyName]?.cancel()
 
+        val batchId = animationBatchId
+        pendingBatchAnimationCount++
+
         val animator = ObjectAnimator.ofFloat(this, propertyName, fromValue, toValue).apply {
             duration = transitionDuration.toLong()
             interpolator = getInterpolator(transitionEasing)
@@ -260,8 +290,12 @@ class EaseView(context: Context) : ReactViewGroup(context) {
                 }
                 override fun onAnimationEnd(animation: Animator) {
                     this@EaseView.onEaseAnimationEnd()
-                    toJsPropertyName(propertyName)?.let { jsProp ->
-                        onTransitionEnd?.invoke(jsProp, !cancelled)
+                    if (batchId == animationBatchId) {
+                        if (cancelled) anyInterrupted = true
+                        pendingBatchAnimationCount--
+                        if (pendingBatchAnimationCount <= 0) {
+                            onTransitionEnd?.invoke(!anyInterrupted)
+                        }
                     }
                 }
             })
@@ -280,6 +314,9 @@ class EaseView(context: Context) : ReactViewGroup(context) {
             return
         }
 
+        val batchId = animationBatchId
+        pendingBatchAnimationCount++
+
         val dampingRatio = (transitionDamping / (2.0f * sqrt(transitionStiffness * transitionMass)))
             .coerceAtLeast(0.01f)
 
@@ -296,18 +333,11 @@ class EaseView(context: Context) : ReactViewGroup(context) {
             }
             addEndListener { _, canceled, _, _ ->
                 this@EaseView.onEaseAnimationEnd()
-                val viewPropertyName = when (viewProperty) {
-                    DynamicAnimation.ALPHA -> "alpha"
-                    DynamicAnimation.TRANSLATION_X -> "translationX"
-                    DynamicAnimation.TRANSLATION_Y -> "translationY"
-                    DynamicAnimation.SCALE_X -> "scaleX"
-                    DynamicAnimation.SCALE_Y -> "scaleY"
-                    DynamicAnimation.ROTATION -> "rotation"
-                    else -> null
-                }
-                viewPropertyName?.let { name ->
-                    toJsPropertyName(name)?.let { jsProp ->
-                        onTransitionEnd?.invoke(jsProp, !canceled)
+                if (batchId == animationBatchId) {
+                    if (canceled) anyInterrupted = true
+                    pendingBatchAnimationCount--
+                    if (pendingBatchAnimationCount <= 0) {
+                        onTransitionEnd?.invoke(!anyInterrupted)
                     }
                 }
             }

android/src/main/java/com/ease/EaseViewManager.kt

@@ -1,7 +1,6 @@
 package com.ease
 
 import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.module.annotations.ReactModule
@@ -20,11 +19,11 @@ class EaseViewManager : ReactViewManager() {
 
     override fun createViewInstance(context: ThemedReactContext): EaseView {
         val view = EaseView(context)
-        view.onTransitionEnd = { property, finished ->
+        view.onTransitionEnd = { finished ->
             val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
             val surfaceId = UIManagerHelper.getSurfaceId(context)
             eventDispatcher?.dispatchEvent(
-                TransitionEndEvent(surfaceId, view.id, property, finished)
+                TransitionEndEvent(surfaceId, view.id, finished)
             )
         }
         return view
@@ -123,23 +122,21 @@ class EaseViewManager : ReactViewManager() {
 
     // --- Hardware layer ---
 
-    @ReactProp(name = "useHardwareLayer", defaultBoolean = true)
+    @ReactProp(name = "useHardwareLayer", defaultBoolean = false)
     fun setUseHardwareLayer(view: EaseView, value: Boolean) {
         view.useHardwareLayer = value
     }
 
-    // --- Prevent BaseViewManager from resetting animated properties ---
+    // --- Transform origin ---
 
-    override fun setTransformProperty(
-        view: ReactViewGroup,
-        transforms: ReadableArray?,
-        transformOrigin: ReadableArray?
-    ) {
-        // No-op: we manage translationX/Y, scaleX/Y, rotation ourselves via animations.
+    @ReactProp(name = "transformOriginX", defaultFloat = 0.5f)
+    fun setTransformOriginX(view: EaseView, value: Float) {
+        view.transformOriginX = value
     }
 
-    override fun setOpacity(view: ReactViewGroup, opacity: Float) {
-        // No-op: we manage opacity ourselves via animations.
+    @ReactProp(name = "transformOriginY", defaultFloat = 0.5f)
+    fun setTransformOriginY(view: EaseView, value: Float) {
+        view.transformOriginY = value
     }
 
     // --- Lifecycle ---
@@ -163,12 +160,10 @@ class EaseViewManager : ReactViewManager() {
     private class TransitionEndEvent(
         surfaceId: Int,
         viewId: Int,
-        private val property: String,
         private val finished: Boolean
     ) : Event<TransitionEndEvent>(surfaceId, viewId) {
         override fun getEventName() = "onTransitionEnd"
         override fun getEventData(): WritableMap = Arguments.createMap().apply {
-            putString("property", property)
             putBoolean("finished", finished)
         }
     }

ios/EaseView.mm

@@ -40,6 +40,11 @@ static inline CGFloat degreesToRadians(CGFloat degrees) {
 
 @implementation EaseView {
   BOOL _isFirstMount;
+  NSInteger _animationBatchId;
+  NSInteger _pendingAnimationCount;
+  BOOL _anyInterrupted;
+  CGFloat _transformOriginX;
+  CGFloat _transformOriginY;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider {
@@ -51,10 +56,51 @@ - (instancetype)initWithFrame:(CGRect)frame {
     static const auto defaultProps = std::make_shared<const EaseViewProps>();
     _props = defaultProps;
     _isFirstMount = YES;
+    _transformOriginX = 0.5;
+    _transformOriginY = 0.5;
   }
   return self;
 }
 
+#pragma mark - Transform origin
+
+- (void)updateAnchorPoint {
+  CGPoint newAnchor = CGPointMake(_transformOriginX, _transformOriginY);
+  if (CGPointEqualToPoint(newAnchor, self.layer.anchorPoint)) {
+    return;
+  }
+  CGPoint oldAnchor = self.layer.anchorPoint;
+  CGSize size = self.layer.bounds.size;
+  CGPoint pos = self.layer.position;
+  pos.x += (newAnchor.x - oldAnchor.x) * size.width;
+  pos.y += (newAnchor.y - oldAnchor.y) * size.height;
+  self.layer.anchorPoint = newAnchor;
+  self.layer.position = pos;
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics {
+  // Temporarily reset to default anchorPoint so super's frame setting
+  // computes position correctly, then re-apply our custom anchorPoint.
+  CGPoint customAnchor = self.layer.anchorPoint;
+  BOOL hasCustomAnchor =
+      !CGPointEqualToPoint(customAnchor, CGPointMake(0.5, 0.5));
+  if (hasCustomAnchor) {
+    self.layer.anchorPoint = CGPointMake(0.5, 0.5);
+  }
+
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+
+  if (hasCustomAnchor) {
+    CGSize size = self.layer.bounds.size;
+    CGPoint pos = self.layer.position;
+    pos.x += (customAnchor.x - 0.5) * size.width;
+    pos.y += (customAnchor.y - 0.5) * size.height;
+    self.layer.anchorPoint = customAnchor;
+    self.layer.position = pos;
+  }
+}
+
 #pragma mark - Animation helpers
 
 - (NSValue *)presentationValueForKeyPath:(NSString *)keyPath {
@@ -112,7 +158,8 @@ - (void)applyAnimationForKeyPath:(NSString *)keyPath
                                                    toValue:toValue
                                                      props:props
                                                       loop:loop];
-  [animation setValue:animationKey forKey:@"easeAnimKey"];
+  _pendingAnimationCount++;
+  [animation setValue:@(_animationBatchId) forKey:@"easeBatchId"];
   animation.delegate = self;
   [self.layer addAnimation:animation forKey:animationKey];
 }
@@ -131,6 +178,25 @@ - (void)updateProps:(const Props::Shared &)props
   [CATransaction begin];
   [CATransaction setDisableActions:YES];
 
+  if (_transformOriginX != newViewProps.transformOriginX ||
+      _transformOriginY != newViewProps.transformOriginY) {
+    _transformOriginX = newViewProps.transformOriginX;
+    _transformOriginY = newViewProps.transformOriginY;
+    [self updateAnchorPoint];
+  }
+
+  if (_pendingAnimationCount > 0 && _eventEmitter) {
+    auto emitter =
+        std::static_pointer_cast<const EaseViewEventEmitter>(_eventEmitter);
+    emitter->onTransitionEnd(EaseViewEventEmitter::OnTransitionEnd{
+        .finished = false,
+    });
+  }
+
+  _animationBatchId++;
+  _pendingAnimationCount = 0;
+  _anyInterrupted = NO;
+
   if (_isFirstMount) {
     _isFirstMount = NO;
 
@@ -291,34 +357,20 @@ - (void)updateProps:(const Props::Shared &)props
 #pragma mark - CAAnimationDelegate
 
 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
-  NSString *animKey = [anim valueForKey:@"easeAnimKey"];
-  if (!animKey || !_eventEmitter) {
+  NSNumber *batchId = [anim valueForKey:@"easeBatchId"];
+  if (!batchId || batchId.integerValue != _animationBatchId || !_eventEmitter) {
     return;
   }
 
-  // Map animation key to JS property name
-  NSString *jsProperty = nil;
-  if ([animKey isEqualToString:kAnimKeyOpacity]) {
-    jsProperty = @"opacity";
-  } else if ([animKey isEqualToString:kAnimKeyTranslateX]) {
-    jsProperty = @"translateX";
-  } else if ([animKey isEqualToString:kAnimKeyTranslateY]) {
-    jsProperty = @"translateY";
-  } else if ([animKey isEqualToString:kAnimKeyScaleX]) {
-    jsProperty = @"scale";
-  } else if ([animKey isEqualToString:kAnimKeyScaleY]) {
-    // Skip — scaleX already fires for scale
-    return;
-  } else if ([animKey isEqualToString:kAnimKeyRotate]) {
-    jsProperty = @"rotate";
+  if (!flag) {
+    _anyInterrupted = YES;
   }
-
-  if (jsProperty) {
+  _pendingAnimationCount--;
+  if (_pendingAnimationCount <= 0) {
     auto emitter =
         std::static_pointer_cast<const EaseViewEventEmitter>(_eventEmitter);
     emitter->onTransitionEnd(EaseViewEventEmitter::OnTransitionEnd{
-        .property = std::string([jsProperty UTF8String]),
-        .finished = static_cast<bool>(flag),
+        .finished = !_anyInterrupted,
     });
   }
 }
@@ -327,6 +379,11 @@ - (void)prepareForRecycle {
   [super prepareForRecycle];
   [self.layer removeAllAnimations];
   _isFirstMount = YES;
+  _pendingAnimationCount = 0;
+  _anyInterrupted = NO;
+  _transformOriginX = 0.5;
+  _transformOriginY = 0.5;
+  self.layer.anchorPoint = CGPointMake(0.5, 0.5);
 }
 
 @end