Shared element refactor (#6146)

* Declare animator options once
* Fix <Image> sometimes losing its dimensions during the transition

lib/android/app/src/main/java/com/reactnativenavigation/parse/SharedElementTransitionOptions.java

@@ -1,57 +0,0 @@
-package com.reactnativenavigation.parse;
-
-import com.reactnativenavigation.parse.params.Interpolation;
-import com.reactnativenavigation.parse.params.NullNumber;
-import com.reactnativenavigation.parse.params.NullText;
-import com.reactnativenavigation.parse.params.Number;
-import com.reactnativenavigation.parse.params.Text;
-import com.reactnativenavigation.parse.parsers.InterpolationParser;
-import com.reactnativenavigation.parse.parsers.NumberParser;
-import com.reactnativenavigation.parse.parsers.TextParser;
-
-import org.json.JSONObject;
-
-import androidx.annotation.Nullable;
-
-public class SharedElementTransitionOptions {
-    public Text fromId = new NullText();
-    public Text toId = new NullText();
-    public Number duration = new NullNumber();
-    public Number startDelay = new NullNumber();
-    public Interpolation interpolation = Interpolation.NO_VALUE;
-
-    public static SharedElementTransitionOptions parse(@Nullable JSONObject json) {
-        SharedElementTransitionOptions transition = new SharedElementTransitionOptions();
-        if (json == null) return transition;
-
-        transition.fromId = TextParser.parse(json, "fromId");
-        transition.toId = TextParser.parse(json, "toId");
-        transition.duration = NumberParser.parse(json, "duration");
-        transition.startDelay = NumberParser.parse(json, "startDelay");
-        transition.interpolation = InterpolationParser.parse(json, "interpolation");
-
-        return transition;
-    }
-
-    void mergeWith(SharedElementTransitionOptions other) {
-        if (other.fromId.hasValue()) fromId = other.fromId;
-        if (other.toId.hasValue()) toId = other.toId;
-        if (other.duration.hasValue()) duration = other.duration;
-        if (other.startDelay.hasValue()) startDelay = other.startDelay;
-    }
-
-    void mergeWithDefault(SharedElementTransitionOptions defaultOptions) {
-        if (!fromId.hasValue()) fromId = defaultOptions.fromId;
-        if (!toId.hasValue()) toId = defaultOptions.toId;
-        if (!duration.hasValue()) duration = defaultOptions.duration;
-        if (!startDelay.hasValue()) startDelay = defaultOptions.startDelay;
-    }
-
-    public long getDuration() {
-        return duration.get(0).longValue();
-    }
-
-    public long getStartDelay() {
-        return startDelay.get(0).longValue();
-    }
-}

lib/android/app/src/main/java/com/reactnativenavigation/parse/SharedElementTransitionOptions.kt

@@ -0,0 +1,35 @@
+package com.reactnativenavigation.parse
+
+import android.animation.TimeInterpolator
+import com.reactnativenavigation.parse.params.*
+import com.reactnativenavigation.parse.params.Number
+import com.reactnativenavigation.parse.parsers.InterpolationParser
+import com.reactnativenavigation.parse.parsers.NumberParser
+import com.reactnativenavigation.parse.parsers.TextParser
+import org.json.JSONObject
+
+class SharedElementTransitionOptions {
+    var fromId: Text = NullText()
+    var toId: Text = NullText()
+    var duration: Number = NullNumber()
+    var startDelay: Number = NullNumber()
+    var interpolation = Interpolation.NO_VALUE
+
+    fun getDuration() = duration[0].toLong()
+    fun getStartDelay() = startDelay[0].toLong()
+    fun getInterpolator(): TimeInterpolator = interpolation.interpolator
+
+    companion object {
+        @JvmStatic
+        fun parse(json: JSONObject?): SharedElementTransitionOptions {
+            val transition = SharedElementTransitionOptions()
+            if (json == null) return transition
+            transition.fromId = TextParser.parse(json, "fromId")
+            transition.toId = TextParser.parse(json, "toId")
+            transition.duration = NumberParser.parse(json, "duration")
+            transition.startDelay = NumberParser.parse(json, "startDelay")
+            transition.interpolation = InterpolationParser.parse(json, "interpolation")
+            return transition
+        }
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/utils/Animator.kt

@@ -1,19 +0,0 @@
-package com.reactnativenavigation.utils
-
-import android.animation.Animator
-import android.animation.TimeInterpolator
-
-fun Animator.withStartDelay(delay: Long): Animator {
-    startDelay = delay
-    return this
-}
-
-fun Animator.withDuration(duration: Long): Animator {
-    this.duration = duration
-    return this
-}
-
-fun Animator.withInterpolator(interpolator: TimeInterpolator): Animator {
-    this.interpolator = interpolator
-    return this
-}

lib/android/app/src/main/java/com/reactnativenavigation/views/element/SharedElementTransition.kt

@@ -22,7 +22,11 @@ class SharedElementTransition(appearing: ViewController<*>, private val options:
     override fun createAnimators(): AnimatorSet {
         val animators = animators()
                 .filter { it.shouldAnimateProperty() }
-                .map { it.create(options) }
+                .map { it.create(options).apply {
+                    duration = options.getDuration()
+                    startDelay = options.getStartDelay()
+                    interpolator = options.getInterpolator()
+                } }
         val set = AnimatorSet()
         set.playTogether(animators)
         return set

lib/android/app/src/main/java/com/reactnativenavigation/views/element/TransitionAnimatorCreator.kt

@@ -116,10 +116,8 @@ open class TransitionAnimatorCreator {
             val lp = FrameLayout.LayoutParams(view.layoutParams)
             lp.topMargin = loc.y
             lp.leftMargin = loc.x
-            if (view !is ReactImageView) {
-                lp.width = view.width
-                lp.height = view.height
-            }
+            lp.width = view.width
+            lp.height = view.height
             view.layoutParams = lp
             transition.viewController.requireParentController().addOverlay(view)
         }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorAnimator.kt

@@ -26,14 +26,6 @@ class BackgroundColorAnimator(from: View, to: View) : PropertyAnimatorCreator<Vi
         val toColor = ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(to))
 
         backgroundColorEvaluator.evaluate(0f, fromColor, toColor)
-        return ObjectAnimator
-                .ofObject(
-                        backgroundColorEvaluator,
-                        fromColor,
-                        toColor
-                )
-                .withDuration(options.getDuration())
-                .withStartDelay(options.getStartDelay())
-                .withInterpolator(options.interpolation.interpolator)
+        return ObjectAnimator.ofObject(backgroundColorEvaluator, fromColor, toColor)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/MatrixAnimator.kt

@@ -9,9 +9,6 @@ import com.facebook.drawee.drawable.ScalingUtils.InterpolatingScaleType
 import com.facebook.react.views.image.ReactImageView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.ViewUtils
-import com.reactnativenavigation.utils.withDuration
-import com.reactnativenavigation.utils.withInterpolator
-import com.reactnativenavigation.utils.withStartDelay
 
 class MatrixAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactImageView>(from, to) {
     override fun shouldAnimateProperty(fromChild: ReactImageView, toChild: ReactImageView): Boolean {
@@ -27,17 +24,13 @@ class MatrixAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactImageV
                     calculateBounds(to)
             )
 
-            return ObjectAnimator
-                    .ofObject(TypeEvaluator<Float> { fraction: Float, _: Any, _: Any ->
-                        hierarchy.actualImageScaleType?.let {
-                            (hierarchy.actualImageScaleType as InterpolatingScaleType?)!!.value = fraction
-                            to.invalidate()
-                        }
-                        null
-                    }, 0, 1)
-                    .withDuration(options.getDuration())
-                    .withStartDelay(options.getStartDelay())
-                    .withInterpolator(options.interpolation.interpolator)
+            return ObjectAnimator.ofObject(TypeEvaluator<Float> { fraction: Float, _: Any, _: Any ->
+                hierarchy.actualImageScaleType?.let {
+                    (hierarchy.actualImageScaleType as InterpolatingScaleType?)!!.value = fraction
+                    to.invalidate()
+                }
+                null
+            }, 0, 1)
         }
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/RotationAnimator.kt

@@ -5,9 +5,6 @@ import android.animation.ObjectAnimator
 import android.view.View
 import com.facebook.react.views.image.ReactImageView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
-import com.reactnativenavigation.utils.withDuration
-import com.reactnativenavigation.utils.withInterpolator
-import com.reactnativenavigation.utils.withStartDelay
 
 class RotationAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactImageView>(from, to) {
     private val fromRotation = from.rotation
@@ -21,10 +18,6 @@ class RotationAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactImag
         to.rotation = fromRotation
         to.pivotX = 0f
         to.pivotY = 0f
-        return ObjectAnimator
-                .ofFloat(to, View.ROTATION, fromRotation, toRotation)
-                .withDuration(options.getDuration())
-                .withStartDelay(options.getStartDelay())
-                .withInterpolator(options.interpolation.interpolator)
+        return ObjectAnimator.ofFloat(to, View.ROTATION, fromRotation, toRotation)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/ScaleXAnimator.kt

@@ -4,13 +4,8 @@ import android.animation.Animator
 import android.animation.ObjectAnimator
 import android.view.View
 import android.view.ViewGroup
-import androidx.core.animation.addListener
-import androidx.core.animation.doOnStart
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
-import com.reactnativenavigation.utils.withDuration
-import com.reactnativenavigation.utils.withInterpolator
-import com.reactnativenavigation.utils.withStartDelay
 
 class ScaleXAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
     override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
@@ -21,10 +16,6 @@ class ScaleXAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(
 
     override fun create(options: SharedElementTransitionOptions): Animator {
         to.scaleX = from.width.toFloat() / to.width
-        return ObjectAnimator
-                .ofFloat(to, View.SCALE_X, from.width.toFloat() / to.width, 1f)
-                .withDuration(options.getDuration())
-                .withStartDelay(options.getStartDelay())
-                .withInterpolator(options.interpolation.interpolator)
+        return ObjectAnimator.ofFloat(to, View.SCALE_X, from.width.toFloat() / to.width, 1f)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/ScaleYAnimator.kt

@@ -6,9 +6,6 @@ import android.view.View
 import android.view.ViewGroup
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
-import com.reactnativenavigation.utils.withDuration
-import com.reactnativenavigation.utils.withInterpolator
-import com.reactnativenavigation.utils.withStartDelay
 
 class ScaleYAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
     override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
@@ -19,10 +16,6 @@ class ScaleYAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(
 
     override fun create(options: SharedElementTransitionOptions): Animator {
         to.scaleY = from.height.toFloat() / to.height
-        return ObjectAnimator
-                .ofFloat(to, View.SCALE_Y, from.height.toFloat() / to.height, 1f)
-                .withDuration(options.getDuration())
-                .withStartDelay(options.getStartDelay())
-                .withInterpolator(options.interpolation.interpolator)
+        return ObjectAnimator.ofFloat(to, View.SCALE_Y, from.height.toFloat() / to.height, 1f)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/TextChangeAnimator.kt

@@ -35,9 +35,6 @@ class TextChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactTe
                 }
                 .setTextColorGetter {
                     TextViewUtils.getTextColor(it)
-                }
-                .buildAnimator()
-                .setDuration(options.getDuration())
-                .withInterpolator(options.interpolation.interpolator)
+                }.buildAnimator()
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/XAnimator.kt

@@ -1,19 +1,12 @@
 package com.reactnativenavigation.views.element.animators
 
 import android.animation.Animator
-import android.animation.AnimatorListenerAdapter
 import android.animation.ObjectAnimator
 import android.view.View
 import android.view.View.TRANSLATION_X
-import androidx.core.animation.addListener
-import androidx.core.animation.doOnStart
-import com.facebook.react.views.image.ReactImageView
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.ViewUtils
-import com.reactnativenavigation.utils.withDuration
-import com.reactnativenavigation.utils.withInterpolator
-import com.reactnativenavigation.utils.withStartDelay
 
 class XAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to) {
     private val dx: Int
@@ -31,10 +24,6 @@ class XAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to)
     override fun create(options: SharedElementTransitionOptions): Animator {
         to.translationX = dx.toFloat()
         to.pivotX = 0f
-        return ObjectAnimator
-                .ofFloat(to, TRANSLATION_X, dx.toFloat(), 0f)
-                .withDuration(options.getDuration())
-                .withStartDelay(options.getStartDelay())
-                .withInterpolator(options.interpolation.interpolator)
+        return ObjectAnimator.ofFloat(to, TRANSLATION_X, dx.toFloat(), 0f)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/YAnimator.kt

@@ -8,10 +8,6 @@ import android.view.ViewGroup
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.ViewUtils
-import com.reactnativenavigation.utils.withDuration
-
-import com.reactnativenavigation.utils.withInterpolator
-import com.reactnativenavigation.utils.withStartDelay
 
 class YAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to) {
     private val dy: Int
@@ -29,10 +25,6 @@ class YAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to)
     override fun create(options: SharedElementTransitionOptions): Animator {
         to.translationY = dy.toFloat()
         to.pivotY = 0f
-        return ObjectAnimator
-                .ofFloat(to, TRANSLATION_Y, dy.toFloat(), 0f)
-                .withDuration(options.getDuration())
-                .withStartDelay(options.getStartDelay())
-                .withInterpolator(options.interpolation.interpolator)
+        return ObjectAnimator.ofFloat(to, TRANSLATION_Y, dy.toFloat(), 0f)
     }
 }