[v2]Shared element transition android (#3632)

Implement Element transition on Android

This commit adds basic support for Element transition to Android.
Currently, only Shared Transition is supported and only when pushing screens.

There are a few caveats you need to be aware of if you intend to use
this feature in its current state:

1. Since elements need to be laid out before the transition can start, Set `waitForRender: true` when pushing the destination screen.
2. Fade animation has to be used when pushing screens with shared elements.

API

```js
options: {
  animations: {
    push: {
      waitForRender: true,
      content: {
        alpha: {
          from: 0,
          to: 1,
          duration: 250
        }
      }
    }
  },
  customTransition: {
    animations: [
    ]
  }
}
```

lib/android/app/build.gradle

@@ -75,8 +75,9 @@ dependencies {
     implementation 'com.android.support:design:26.1.0'
     implementation 'com.android.support:appcompat-v7:26.1.0'
     implementation 'com.android.support:support-v4:26.1.0'
-    implementation 'com.github.wix-playground:ahbottomnavigation:2.4.5'
 
+    implementation 'com.github.wix-playground:ahbottomnavigation:2.4.5'
+    implementation 'com.github.wix-playground:reflow-animator:1.0.4'
     implementation 'com.github.clans:fab:1.6.4'
 
     //noinspection GradleDynamicVersion

lib/android/app/src/main/java/com/reactnativenavigation/anim/NavigationAnimator.java

@@ -6,24 +6,41 @@ import android.animation.AnimatorListenerAdapter;
 import android.animation.AnimatorSet;
 import android.content.Context;
 import android.view.View;
+import android.view.ViewGroup;
 
 import com.reactnativenavigation.parse.AnimationOptions;
 import com.reactnativenavigation.parse.NestedAnimationsOptions;
+import com.reactnativenavigation.parse.Transitions;
+import com.reactnativenavigation.views.element.Element;
+import com.reactnativenavigation.views.element.ElementTransitionManager;
+
+import java.util.Collections;
+import java.util.List;
+
+import static com.reactnativenavigation.utils.CollectionUtils.merge;
 
 @SuppressWarnings("ResourceType")
 public class NavigationAnimator extends BaseAnimator {
 
-    public NavigationAnimator(Context context) {
+    private final ElementTransitionManager transitionManager;
+
+    public NavigationAnimator(Context context, ElementTransitionManager transitionManager) {
         super(context);
+        this.transitionManager = transitionManager;
     }
 
-    public void push(View view, NestedAnimationsOptions push, Runnable onAnimationEnd) {
-        view.setVisibility(View.INVISIBLE);
-        AnimatorSet set = push.content.getAnimation(view, getDefaultPushAnimation(view));
+    public void push(ViewGroup view, NestedAnimationsOptions animation, Runnable onAnimationEnd) {
+        push(view, animation, new Transitions(), Collections.EMPTY_LIST, Collections.EMPTY_LIST, onAnimationEnd);
+    }
+
+    public void push(ViewGroup view, NestedAnimationsOptions animation, Transitions transitions, List<Element> fromElements, List<Element> toElements, Runnable onAnimationEnd) {
+        view.setAlpha(0);
+        AnimatorSet set = animation.content.getAnimation(view, getDefaultPushAnimation(view));
+        set.playTogether(merge(set.getChildAnimations(), transitionManager.createTransitions(transitions, fromElements, toElements)));
         set.addListener(new AnimatorListenerAdapter() {
             @Override
             public void onAnimationStart(Animator animation) {
-                view.setVisibility(View.VISIBLE);
+                view.setAlpha(1);
             }
 
             @Override

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

@@ -28,6 +28,7 @@ public class Options {
         result.modal = ModalOptions.parse(json);
         result.statusBar = StatusBarOptions.parse(json.optJSONObject("statusBar"));
         result.layout = LayoutOptions.parse(json.optJSONObject("layout"));
+        result.transitions = Transitions.parse(json.optJSONObject("customTransition"));
 
         return result;
     }
@@ -44,6 +45,7 @@ public class Options {
     @NonNull public ModalOptions modal = new ModalOptions();
     @NonNull public StatusBarOptions statusBar = new StatusBarOptions();
     @NonNull public LayoutOptions layout = new LayoutOptions();
+    @NonNull public Transitions transitions = new Transitions();
 
     void setTopTabIndex(int i) {
         topTabOptions.tabIndex = i;
@@ -64,6 +66,7 @@ public class Options {
         result.modal.mergeWith(modal);
         result.statusBar.mergeWith(statusBar);
         result.layout.mergeWith(layout);
+        result.transitions.mergeWith(transitions);
         return result;
     }
 
@@ -81,6 +84,7 @@ public class Options {
         result.modal.mergeWith(other.modal);
         result.statusBar.mergeWith(other.statusBar);
         result.layout.mergeWith(other.layout);
+        result.transitions.mergeWith(transitions);
         return result;
     }
 
@@ -96,6 +100,7 @@ public class Options {
         modal.mergeWithDefault(defaultOptions.modal);
         statusBar.mergeWithDefault(defaultOptions.statusBar);
         layout.mergeWithDefault(defaultOptions.layout);
+        transitions.mergeWithDefault(defaultOptions.transitions);
         return this;
     }
 

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

@@ -0,0 +1,50 @@
+package com.reactnativenavigation.parse;
+
+import com.reactnativenavigation.parse.params.Fraction;
+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.FractionParser;
+import com.reactnativenavigation.parse.parsers.TextParser;
+
+import org.json.JSONObject;
+
+public class Transition {
+    public Text fromId = new NullText();
+    public Text toId = new NullText();
+    public Number startDelay = new NullNumber();
+    public Number duration = new NullNumber();
+
+    public static Transition parse(JSONObject json) {
+        Transition transition = new Transition();
+        if (json == null) return transition;
+
+        transition.fromId = TextParser.parse(json, "fromId");
+        transition.toId = TextParser.parse(json, "toId");
+        Fraction startDelay = FractionParser.parse(json, "startDelay");
+        if (startDelay.hasValue()) {
+            transition.startDelay = new Number((int) (startDelay.get() * 1000));
+        }
+        Fraction duration = FractionParser.parse(json, "duration");
+        if (duration.hasValue()) {
+            transition.duration = new Number((int) (duration.get() * 1000));
+        }
+
+        return transition;
+    }
+
+    void mergeWith(Transition other) {
+        if (other.fromId.hasValue()) fromId = other.fromId;
+        if (other.toId.hasValue()) toId = other.toId;
+        if (other.startDelay.hasValue()) startDelay = other.startDelay;
+        if (other.duration.hasValue()) duration = other.duration;
+    }
+
+    void mergeWithDefault(Transition defaultOptions) {
+        if (!fromId.hasValue()) fromId = defaultOptions.fromId;
+        if (!toId.hasValue()) toId = defaultOptions.toId;
+        if (!startDelay.hasValue()) startDelay = defaultOptions.startDelay;
+        if (!duration.hasValue()) duration = defaultOptions.duration;
+    }
+}

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

@@ -0,0 +1,49 @@
+package com.reactnativenavigation.parse;
+
+import android.support.annotation.RestrictTo;
+
+import org.json.JSONArray;
+import org.json.JSONObject;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class Transitions {
+    private List<Transition> transitions = new ArrayList<>();
+
+    public List<Transition> get() {
+        return transitions;
+    }
+
+    public Transitions() {
+
+    }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public Transitions(List<Transition> transitions) {
+        this.transitions = transitions;
+    }
+
+    public static Transitions parse(JSONObject json) {
+        Transitions result = new Transitions();
+        if (json != null && json.has("animations")) {
+            JSONArray animations = json.optJSONArray("animations");
+            for (int i = 0; i < animations.length(); i++) {
+                result.transitions.add(Transition.parse(animations.optJSONObject(i)));
+            }
+        }
+        return result;
+    }
+
+    public boolean hasValue() {
+        return !transitions.isEmpty();
+    }
+
+    void mergeWith(final Transitions other) {
+        if (other.hasValue()) transitions = other.transitions;
+    }
+
+    void mergeWithDefault(Transitions defaultOptions) {
+        if (!hasValue()) transitions = defaultOptions.transitions;
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/react/ElementViewManager.java

@@ -0,0 +1,52 @@
+package com.reactnativenavigation.react;
+
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.reactnativenavigation.views.element.Element;
+
+import static com.reactnativenavigation.utils.UiUtils.runOnPreDrawOnce;
+import static com.reactnativenavigation.utils.ViewUtils.performOnParentReactView;
+
+public class ElementViewManager extends ViewGroupManager<Element> {
+
+    @Override
+    public String getName() {
+        return "RNNElement";
+    }
+
+    @Override
+    protected Element createViewInstance(ThemedReactContext reactContext) {
+        Element element = createView(reactContext);
+        register(element);
+        return element;
+    }
+
+    public Element createView(ThemedReactContext reactContext) {
+        return new Element(reactContext);
+    }
+
+    @Override
+    public void onDropViewInstance(Element element) {
+        super.onDropViewInstance(element);
+        unregister(element);
+    }
+
+    @ReactProp(name = "elementId")
+    public void setElementId(Element element, String id) {
+        element.setElementId(id);
+    }
+
+    @Override
+    public boolean needsCustomLayoutForChildren() {
+        return true;
+    }
+
+    private void register(Element element) {
+        runOnPreDrawOnce(element, () -> performOnParentReactView(element, (parent) -> parent.registerElement(element)));
+    }
+
+    private void unregister(Element element) {
+        performOnParentReactView(element, (parent) -> parent.unregisterElement(element));
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.java

@@ -25,6 +25,6 @@ public class NavigationPackage implements ReactPackage {
 
 	@Override
 	public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-		return Collections.emptyList();
-	}
+        return Collections.singletonList(new ElementViewManager());
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java

@@ -14,6 +14,10 @@ import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.ArrayList;
+import java.util.List;
 
 @SuppressLint("ViewConstructor")
 public class ReactView extends ReactRootView implements IReactView {
@@ -23,6 +27,7 @@ public class ReactView extends ReactRootView implements IReactView {
 	private final String componentName;
 	private boolean isAttachedToReactInstance = false;
     private final JSTouchDispatcher jsTouchDispatcher;
+    private ArrayList<Element> elements = new ArrayList<>();
 
     public ReactView(final Context context, ReactInstanceManager reactInstanceManager, String componentId, String componentName) {
 		super(context);
@@ -106,4 +111,17 @@ public class ReactView extends ReactRootView implements IReactView {
     public String getComponentName() {
         return componentName;
     }
+
+    public void registerElement(Element element) {
+        elements.add(element);
+    }
+
+    public void unregisterElement(Element element) {
+        elements.remove(element);
+    }
+
+    @Override
+    public List<Element> getElements() {
+        return elements;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/utils/CollectionUtils.java

@@ -1,9 +1,43 @@
 package com.reactnativenavigation.utils;
 
+import java.util.ArrayList;
 import java.util.Collection;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
 
 public class CollectionUtils {
     public static boolean isNullOrEmpty(Collection collection) {
         return collection == null || collection.isEmpty();
     }
+
+    public interface Mapper<K, V> {
+        K map(V value);
+    }
+
+    public static <K, V> Map<K, V> map(Collection<V> elements, Mapper<K, V> mapper) {
+        Map<K, V> map = new HashMap<>();
+        for (V value : elements) {
+            map.put(mapper.map(value), value);
+        }
+        return map;
+    }
+
+    public interface Filter<T> {
+        boolean filter(T value);
+    }
+
+    public static <T> List<T> filter(Collection<T> list, Filter<T> filter) {
+        List<T> result = new ArrayList<>();
+        for (T t : list) {
+            if (filter.filter(t)) result.add(t);
+        }
+        return result;
+    }
+
+    public static <T> List<T> merge(Collection<T> a, Collection<T> b) {
+        List<T> result = new ArrayList<>(a);
+        result.addAll(b);
+        return result;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/utils/ColorUtils.java

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.utils;
+
+public class ColorUtils {
+    public static double[] colorToLAB(int color) {
+        final double[] result = new double[3];
+        android.support.v4.graphics.ColorUtils.colorToLAB(color, result);
+        return result;
+    }
+
+    public static int labToColor(double[] lab) {
+        return android.support.v4.graphics.ColorUtils.LABToColor(lab[0], lab[1], lab[2]);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/utils/TextViewUtils.java

@@ -0,0 +1,41 @@
+package com.reactnativenavigation.utils;
+
+import android.graphics.Color;
+import android.support.annotation.ColorInt;
+import android.text.SpannableString;
+import android.text.Spanned;
+import android.text.SpannedString;
+import android.text.style.AbsoluteSizeSpan;
+import android.text.style.ForegroundColorSpan;
+import android.util.Log;
+import android.widget.TextView;
+
+import com.reactnativenavigation.views.element.animators.AntiRelativeSizeSpan;
+
+public class TextViewUtils {
+    @ColorInt
+    public static int getTextColor(TextView view) {
+        SpannedString text = new SpannedString(view.getText());
+        ForegroundColorSpan[] spans = text.getSpans(0, text.length(), ForegroundColorSpan.class);
+        return spans.length == 0 ? Color.WHITE : spans[0].getForegroundColor();
+    }
+
+    public static float getTextSize(TextView view) {
+        SpannedString text = new SpannedString(view.getText());
+        AbsoluteSizeSpan[] spans = text.getSpans(0, text.length(), AbsoluteSizeSpan.class);
+        return spans.length == 0 ? -1 : spans[0].getSize();
+    }
+
+    public static void setColor(SpannableString span, int color) {
+        span.setSpan(new ForegroundColorSpan(color), 0, span.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
+    }
+
+    public static void setRelativeTextSize(SpannableString span, float scale) {
+        Log.i("TextViewUtils", "setRelativeTextSize: " + scale + " - " + span);
+        span.setSpan(new AntiRelativeSizeSpan(scale), 0, span.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
+    }
+
+    public static void setAbsoluteTextSize(SpannableString span, float size) {
+        span.setSpan(new AbsoluteSizeSpan((int) size), 0, span.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -1,8 +1,13 @@
 package com.reactnativenavigation.utils;
 
+import android.graphics.Point;
 import android.support.annotation.Nullable;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.ViewParent;
+
+import com.facebook.react.views.view.ReactViewBackgroundDrawable;
+import com.reactnativenavigation.react.ReactView;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -79,4 +84,45 @@ public class ViewUtils {
         if (view.getLayoutParams() == null) return 0;
         return view.getLayoutParams().height < 0 ? view.getHeight() : view.getLayoutParams().height;
     }
+
+    public static void performOnParentReactView(View child, Task<ReactView> task) {
+        ReactView parent = findParentReactView(child.getParent());
+        if (parent != null) {
+            task.run(parent);
+        }
+    }
+
+    private static ReactView findParentReactView(ViewParent parent) {
+        if (parent == null) {
+            return null;
+        }
+        if (parent instanceof ReactView) {
+            return (ReactView) parent;
+        }
+        return findParentReactView(parent.getParent());
+    }
+
+    public static Point getLocationOnScreen(View view) {
+        int[] xy = new int[2];
+        view.getLocationOnScreen(xy);
+        return new Point(xy[0], xy[1]);
+    }
+
+    public static boolean areDimensionsEqual(View a, View b) {
+        return a.getWidth() == b.getWidth() && a.getHeight() == b.getHeight();
+    }
+
+    public static boolean instanceOf(Class clazz, View... views) {
+        for (View view : views) {
+            if (!view.getClass().isAssignableFrom(clazz)) return false;
+        }
+        return true;
+    }
+
+    public static int getBackgroundColor(View view) {
+        if (view.getBackground() instanceof ReactViewBackgroundDrawable) {
+            return ((ReactViewBackgroundDrawable) view.getBackground()).getColor();
+        }
+        throw new RuntimeException(view.getBackground().getClass().getSimpleName() + " is not ReactViewBackgroundDrawable");
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/IReactView.java

@@ -4,6 +4,9 @@ import android.view.MotionEvent;
 import android.view.View;
 
 import com.reactnativenavigation.interfaces.ScrollEventListener;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.List;
 
 public interface IReactView extends Destroyable {
 
@@ -22,4 +25,6 @@ public interface IReactView extends Destroyable {
     void dispatchTouchEventToJs(MotionEvent event);
 
     boolean isRendered();
+
+    List<Element> getElements();
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/Navigator.java

@@ -17,6 +17,7 @@ import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.modal.ModalStack;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
+import com.reactnativenavigation.views.element.ElementTransitionManager;
 
 import java.util.Collection;
 import java.util.Collections;
@@ -107,7 +108,7 @@ public class Navigator extends ParentController {
         root = viewController;
         contentLayout.addView(viewController.getView());
         if (viewController.options.animations.startApp.hasAnimation()) {
-            new NavigationAnimator(viewController.getActivity())
+            new NavigationAnimator(viewController.getActivity(), new ElementTransitionManager())
                     .animateStartApp(viewController.getView(), viewController.options.animations.startApp, new AnimatorListenerAdapter() {
                         @Override
                         public void onAnimationEnd(Animator animation) {

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ViewController.java

@@ -18,13 +18,19 @@ import com.reactnativenavigation.presentation.FabOptionsPresenter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.StringUtils;
 import com.reactnativenavigation.utils.Task;
+import com.reactnativenavigation.utils.UiThread;
 import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
 import com.reactnativenavigation.views.Component;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.Collections;
+import java.util.List;
 
 public abstract class ViewController<T extends ViewGroup> implements ViewTreeObserver.OnGlobalLayoutListener {
 
     private Runnable onAppearedListener;
+    private boolean appearEventPosted;
     private Bool waitForRender = new NullBool();
 
     public interface ViewVisibilityListener {
@@ -191,9 +197,12 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
             parentController.clearOptions();
             if (getView() instanceof Component) parentController.applyChildOptions(options, (Component) getView());
         });
-        if (onAppearedListener != null) {
-            onAppearedListener.run();
-            onAppearedListener = null;
+        if (onAppearedListener != null && !appearEventPosted) {
+            appearEventPosted = true;
+            UiThread.post(() -> {
+                onAppearedListener.run();
+                onAppearedListener = null;
+            });
         }
     }
 
@@ -264,4 +273,8 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     void applyOnController(ViewController controller, Task<ViewController> task) {
         if (controller != null) task.run(controller);
     }
+
+    public List<Element> getElements() {
+        return getView() instanceof IReactView ? ((IReactView) view).getElements() : Collections.EMPTY_LIST;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackController.java

@@ -135,7 +135,8 @@ public class StackController extends ParentController<StackLayout> {
         if (toRemove != null) {
             if (resolvedOptions.animations.push.enable.isTrueOrUndefined()) {
                 if (resolvedOptions.animations.push.waitForRender.isTrue()) {
-                    child.setOnAppearedListener(() -> animator.push(child.getView(), resolvedOptions.animations.push, () -> {
+                    child.getView().setAlpha(0);
+                    child.setOnAppearedListener(() -> animator.push(child.getView(), resolvedOptions.animations.push, resolvedOptions.transitions, toRemove.getElements(), child.getElements(), () -> {
                         getView().removeView(toRemove.getView());
                         listener.onSuccess(child.getId());
                     }));

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackControllerBuilder.java

@@ -11,6 +11,7 @@ import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarBackgroundViewController;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarController;
+import com.reactnativenavigation.views.element.ElementTransitionManager;
 import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
 
 import java.util.ArrayList;
@@ -34,7 +35,7 @@ public class StackControllerBuilder {
     public StackControllerBuilder(Activity activity) {
         this.activity = activity;
         presenter = new OptionsPresenter(activity, new Options());
-        animator = new NavigationAnimator(activity);
+        animator = new NavigationAnimator(activity, new ElementTransitionManager());
     }
 
     public StackControllerBuilder setChildren(List<ViewController> children) {

lib/android/app/src/main/java/com/reactnativenavigation/views/ComponentLayout.java

@@ -13,9 +13,12 @@ import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.IReactView;
 import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
+import com.reactnativenavigation.views.element.Element;
 import com.reactnativenavigation.views.topbar.TopBar;
 import com.reactnativenavigation.views.touch.OverlayTouchDelegate;
 
+import java.util.List;
+
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 
 @SuppressLint("ViewConstructor")
@@ -104,6 +107,11 @@ public class ComponentLayout extends FrameLayout implements ReactComponent, TopB
         return reactView.isRendered();
     }
 
+    @Override
+    public List<Element> getElements() {
+        return reactView.getElements();
+    }
+
     @Override
     public void onPress(String buttonId) {
         reactView.sendOnNavigationButtonPressed(buttonId);

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

@@ -0,0 +1,100 @@
+package com.reactnativenavigation.views.element;
+
+import android.content.Context;
+import android.graphics.Rect;
+import android.support.annotation.Keep;
+import android.support.annotation.NonNull;
+import android.support.annotation.Nullable;
+import android.text.SpannableString;
+import android.text.SpannedString;
+import android.util.Log;
+import android.view.View;
+import android.widget.FrameLayout;
+import android.widget.TextView;
+
+import com.facebook.drawee.drawable.ScalingUtils;
+import com.facebook.drawee.generic.GenericDraweeHierarchy;
+import com.facebook.drawee.view.DraweeView;
+import com.facebook.react.views.view.ReactViewBackgroundDrawable;
+import com.reactnativenavigation.utils.TextViewUtils;
+import com.reactnativenavigation.utils.UiUtils;
+
+import static com.reactnativenavigation.utils.ColorUtils.labToColor;
+import static com.reactnativenavigation.utils.TextViewUtils.setColor;
+
+public class Element extends FrameLayout {
+    private String elementId;
+    @Nullable private SpannableString spannableText;
+    private float originalTextSize;
+
+    public Element(@NonNull Context context) {
+        super(context);
+    }
+
+    public String getElementId() {
+        return elementId;
+    }
+
+    public void setElementId(String elementId) {
+        this.elementId = elementId;
+    }
+
+    public View getChild() {
+        return getChildAt(0);
+    }
+
+    @Override
+    public void onViewAdded(View child) {
+        super.onViewAdded(child);
+        UiUtils.runOnPreDrawOnce(child, () -> {
+            if (child instanceof TextView) {
+                SpannedString spannedText = new SpannedString(((TextView) child).getText());
+                spannableText = new SpannableString(spannedText);
+                ((TextView) child).setText(spannableText);
+
+                originalTextSize = TextViewUtils.getTextSize((TextView) child);
+            }
+        });
+    }
+
+    @Keep
+    public void setClipBounds(Rect clipBounds) {
+        getChild().setClipBounds(clipBounds);
+    }
+
+    @Keep
+    public void setMatrixTransform(float value) {
+        GenericDraweeHierarchy hierarchy = ((DraweeView<GenericDraweeHierarchy>) getChild()).getHierarchy();
+        if (hierarchy.getActualImageScaleType() != null) {
+            ((ScalingUtils.InterpolatingScaleType) hierarchy.getActualImageScaleType()).setValue(value);
+            getChild().invalidate();
+        }
+    }
+
+    @Keep
+    public void setBackgroundColor(double[] color) {
+        ((ReactViewBackgroundDrawable) getChild().getBackground()).setColor(labToColor(color));
+    }
+
+    @Keep
+    public void setTextColor(double[] color) {
+        if (spannableText != null) {
+            setColor(spannableText, labToColor(color));
+            ((TextView) getChild()).setText(spannableText);
+        }
+    }
+
+    @Keep
+    public void setTextSize(float size) {
+        if (spannableText != null) {
+            Log.d("Element", "setTextSize: " + size);
+//            ((ReactTextView) getChild()).setTextSize(TypedValue.COMPLEX_UNIT_PX, size);
+
+//            ((ReactTextView) getChild()).updateView();
+//            TextViewUtils.setAbsoluteTextSize(spannableText, size);
+            TextViewUtils.setRelativeTextSize(spannableText, size);
+            ((TextView) getChild()).setText(spannableText);
+//            getChild().invalidate();
+        }
+    }
+}

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

@@ -0,0 +1,42 @@
+package com.reactnativenavigation.views.element;
+
+import android.animation.Animator;
+import android.support.annotation.RestrictTo;
+import android.util.Log;
+
+import com.reactnativenavigation.parse.Transition;
+import com.reactnativenavigation.parse.Transitions;
+
+import java.util.Collection;
+import java.util.Collections;
+import java.util.List;
+import java.util.Map;
+
+import static com.reactnativenavigation.utils.CollectionUtils.filter;
+import static com.reactnativenavigation.utils.CollectionUtils.map;
+
+public class ElementTransitionManager {
+
+    private final TransitionValidator validator;
+    private final TransitionAnimatorCreator animatorCreator;
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    ElementTransitionManager(TransitionValidator validator, TransitionAnimatorCreator animatorCreator) {
+        this.validator = validator;
+        this.animatorCreator = animatorCreator;
+    }
+
+    public ElementTransitionManager() {
+        validator = new TransitionValidator();
+        animatorCreator = new TransitionAnimatorCreator();
+    }
+
+    public Collection<Animator> createTransitions(Transitions transitions, List<Element> fromElements, List<Element> toElements) {
+        if (!transitions.hasValue() || fromElements.isEmpty() || toElements.isEmpty()) return Collections.EMPTY_LIST;
+        Map<String, Element> from = map(fromElements, Element::getElementId);
+        Map<String, Element> to = map(toElements, Element::getElementId);
+        List<Transition> validTransitions = filter(transitions.get(), (t) -> validator.validate(t, from, to));
+
+        return animatorCreator.create(validTransitions, from, to);
+    }
+}

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

@@ -0,0 +1,52 @@
+package com.reactnativenavigation.views.element;
+
+import android.animation.Animator;
+
+import com.reactnativenavigation.parse.Transition;
+import com.reactnativenavigation.views.element.animators.BackgroundColorAnimator;
+import com.reactnativenavigation.views.element.animators.MatrixAnimator;
+import com.reactnativenavigation.views.element.animators.PropertyAnimatorCreator;
+import com.reactnativenavigation.views.element.animators.ScaleXAnimator;
+import com.reactnativenavigation.views.element.animators.ScaleYAnimator;
+import com.reactnativenavigation.views.element.animators.TextChangeAnimator;
+import com.reactnativenavigation.views.element.animators.XAnimator;
+import com.reactnativenavigation.views.element.animators.YAnimator;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.Collections;
+import java.util.List;
+import java.util.Map;
+
+public class TransitionAnimatorCreator {
+
+    public Collection<Animator> create(List<Transition> transitions, Map<String, Element> from, Map<String, Element> to) {
+        if (transitions.isEmpty()) return Collections.EMPTY_LIST;
+        List<Animator> animators = new ArrayList<>();
+        for (Transition transition : transitions) {
+            animators.addAll(create(transition, from.get(transition.fromId.get()), to.get(transition.toId.get())));
+        }
+        return animators;
+    }
+
+    protected Collection<? extends Animator> create(Transition transition, Element from, Element to) {
+        Collection<Animator> animators = new ArrayList<>();
+        for (PropertyAnimatorCreator creator : getAnimators(from, to)) {
+            if (creator.shouldAnimateProperty()) animators.add(creator.create(transition));
+        }
+        return animators;
+    }
+
+    protected List<PropertyAnimatorCreator> getAnimators(Element from, Element to) {
+        return Arrays.asList(
+                new XAnimator(from, to),
+                new YAnimator(from, to),
+                new MatrixAnimator(from, to),
+                new ScaleXAnimator(from, to),
+                new ScaleYAnimator(from, to),
+                new BackgroundColorAnimator(from, to),
+                new TextChangeAnimator(from, to)
+        );
+    }
+}

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

@@ -0,0 +1,15 @@
+package com.reactnativenavigation.views.element;
+
+import com.reactnativenavigation.parse.Transition;
+
+import java.util.Map;
+
+public class TransitionValidator {
+    protected boolean validate(Transition transition, Map<String, Element> fromMap, Map<String, Element> toMap) {
+        return transition.fromId.hasValue() &&
+                fromMap.containsKey(transition.fromId.get()) &&
+               transition.toId.hasValue() &&
+               toMap.containsKey(transition.toId.get()) &&
+               transition.duration.hasValue();
+    }
+}

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

@@ -0,0 +1,29 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.text.TextPaint;
+import android.text.style.MetricAffectingSpan;
+import android.util.Log;
+
+public class AntiRelativeSizeSpan extends MetricAffectingSpan {
+    private final float size;
+
+    public AntiRelativeSizeSpan(float size) {
+        this.size = size;
+    }
+
+    @Override
+    public void updateDrawState(TextPaint ds) {
+        updateAnyState(ds);
+    }
+
+    @Override
+    public void updateMeasureState(TextPaint ds) {
+        updateAnyState(ds);
+    }
+
+    private void updateAnyState(TextPaint ds) {
+        Log.i("AntiRelativeSizeSpan", "updateAnyState: " + size + "|" + ds.density);
+        ds.setTextSize(size);
+    }
+}
+

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

@@ -0,0 +1,44 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.ObjectAnimator;
+import android.view.ViewGroup;
+
+import com.facebook.react.views.text.ReactTextView;
+import com.facebook.react.views.view.ReactViewBackgroundDrawable;
+import com.reactnativenavigation.utils.ColorUtils;
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.Collections;
+import java.util.List;
+
+public class BackgroundColorAnimator extends PropertyAnimatorCreator<ViewGroup> {
+
+    public BackgroundColorAnimator(Element from, Element to) {
+        super(from, to);
+    }
+
+    @Override
+    public boolean shouldAnimateProperty(ViewGroup fromChild, ViewGroup toChild) {
+        return fromChild.getBackground() instanceof ReactViewBackgroundDrawable &&
+               toChild.getBackground() instanceof ReactViewBackgroundDrawable &&
+               ((ReactViewBackgroundDrawable) fromChild.getBackground()).getColor() != ((ReactViewBackgroundDrawable) toChild.getBackground()).getColor();
+    }
+
+    @Override
+    protected List<Class> excludedViews() {
+        return Collections.singletonList(ReactTextView.class);
+    }
+
+    @Override
+    public Animator create() {
+        return ObjectAnimator.ofObject(
+                to,
+                "backgroundColor",
+                new LabColorEvaluator(),
+                ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(from.getChild())),
+                ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(to.getChild()))
+        );
+    }
+}

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

@@ -0,0 +1,45 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.TypeEvaluator;
+import android.graphics.Rect;
+
+public class ClipBoundsEvaluator implements TypeEvaluator<Rect> {
+    private int fromWidth;
+    private int fromHeight;
+    private int toWidth;
+    private int toHeight;
+    private final Rect result = new Rect();
+
+    @Override
+    public Rect evaluate(float ratio, Rect from, Rect to) {
+        sync(from, to);
+
+        if (toHeight == fromHeight ) {
+            result.bottom = toHeight;
+        } else {
+            if (toHeight > fromHeight) {
+                result.bottom = (int) (toHeight - (toHeight - fromHeight) * (1 - ratio));
+            } else {
+                result.bottom = (int) (toHeight + (fromHeight - toHeight) * (1 - ratio));
+            }
+        }
+
+        if (toWidth == fromWidth) {
+            result.right = toWidth;
+        } else {
+            if (toWidth > fromWidth) {
+                result.right = (int) (toWidth - (toWidth - fromWidth) * (1 - ratio));
+            } else {
+                result.right = (int) (toWidth + (fromWidth - toWidth) * (1 - ratio));
+            }
+        }
+        return result;
+    }
+
+    private void sync(Rect from, Rect to) {
+        fromWidth = from.right;
+        fromHeight = from.bottom;
+        toWidth = to.right;
+        toHeight = to.bottom;
+    }
+}

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

@@ -0,0 +1,14 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.TypeEvaluator;
+import android.support.v4.graphics.ColorUtils;
+
+public class LabColorEvaluator implements TypeEvaluator<double[]> {
+    private final double[] color = new double[3];
+
+    @Override
+    public double[] evaluate(float ratio, double[] from, double[] to) {
+        ColorUtils.blendLAB(from, to, ratio, color);
+        return color;
+    }
+}

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

@@ -0,0 +1,63 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
+import android.graphics.Rect;
+import android.view.View;
+
+import com.facebook.drawee.drawable.ScalingUtils;
+import com.facebook.drawee.generic.GenericDraweeHierarchy;
+import com.facebook.drawee.view.DraweeView;
+import com.facebook.react.views.image.ReactImageView;
+import com.reactnativenavigation.views.element.Element;
+
+import static com.reactnativenavigation.utils.ViewUtils.areDimensionsEqual;
+
+public class MatrixAnimator extends PropertyAnimatorCreator<ReactImageView> {
+
+    public MatrixAnimator(Element from, Element to) {
+        super(from, to);
+    }
+
+    @Override
+    public boolean shouldAnimateProperty(ReactImageView fromChild, ReactImageView toChild) {
+        return !areDimensionsEqual(from.getChild(), to.getChild());
+    }
+
+    @Override
+    public Animator create() {
+        AnimatorSet set = new AnimatorSet();
+        set.playTogether(clipBoundsAnimator(), imageTransformAnimator());
+        return set;
+    }
+
+    private Animator clipBoundsAnimator() {
+        Rect startDrawingRect = new Rect(); from.getDrawingRect(startDrawingRect);
+        Rect endDrawingRect = new Rect(); to.getDrawingRect(endDrawingRect);
+        return ObjectAnimator.ofObject(to,
+                "clipBounds",
+                new ClipBoundsEvaluator(),
+                startDrawingRect,
+                endDrawingRect);
+    }
+
+    private Animator imageTransformAnimator() {
+        ScalingUtils.InterpolatingScaleType ist = new ScalingUtils.InterpolatingScaleType(
+                getScaleType(from.getChild()),
+                getScaleType(to.getChild()),
+                calculateBounds(from.getChild()),
+                calculateBounds(to.getChild())
+        );
+        ((DraweeView<GenericDraweeHierarchy>) to.getChild()).getHierarchy().setActualImageScaleType(ist);
+        return ObjectAnimator.ofFloat(to, "matrixTransform", 0, 1);
+    }
+
+    private ScalingUtils.ScaleType getScaleType(View child) {
+        return ((DraweeView<GenericDraweeHierarchy>) child).getHierarchy().getActualImageScaleType();
+    }
+
+    private Rect calculateBounds(View view) {
+        return new Rect(0, 0, view.getWidth(), view.getHeight());
+    }
+}

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

@@ -0,0 +1,63 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.support.annotation.CallSuper;
+import android.view.ViewGroup;
+
+import com.reactnativenavigation.parse.Transition;
+import com.reactnativenavigation.views.element.Element;
+
+import java.lang.reflect.ParameterizedType;
+import java.util.Collections;
+import java.util.List;
+
+public abstract class PropertyAnimatorCreator<T> {
+
+    protected Element from;
+    protected Element to;
+
+    PropertyAnimatorCreator(Element from, Element to) {
+        this.from = from;
+        this.to = to;
+    }
+
+    @CallSuper
+    public boolean shouldAnimateProperty() {
+        Class<T> type = getChildClass();
+        return type.isInstance(from.getChild()) &&
+               type.isInstance(to.getChild()) &&
+               !excludedViews().contains(from.getChild().getClass()) &&
+               !excludedViews().contains(to.getChild().getClass()) &&
+               shouldAnimateProperty((T) from.getChild(), (T) to.getChild());
+    }
+
+    protected abstract boolean shouldAnimateProperty(T fromChild, T toChild);
+
+    protected List<Class> excludedViews() {
+        return Collections.EMPTY_LIST;
+    }
+
+    public Animator create(Transition transition) {
+        Animator animator = create().setDuration(transition.duration.get());
+        animator.addListener(new AnimatorListenerAdapter() {
+            private final boolean originalClipChildren = ((ViewGroup) to.getParent()).getClipChildren();
+            @Override
+            public void onAnimationStart(Animator animation) {
+                ((ViewGroup) to.getParent()).setClipChildren(false);
+            }
+
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                ((ViewGroup) to.getParent()).setClipChildren(originalClipChildren);
+            }
+        });
+        return animator;
+    }
+
+    protected abstract Animator create();
+
+    private Class<T> getChildClass() {
+        return (Class<T>) ((ParameterizedType) getClass().getGenericSuperclass()).getActualTypeArguments()[0];
+    }
+}

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

@@ -0,0 +1,39 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.ObjectAnimator;
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.facebook.react.views.text.ReactTextView;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.Collections;
+import java.util.List;
+
+public class ScaleXAnimator extends PropertyAnimatorCreator<ViewGroup> {
+
+    public ScaleXAnimator(Element from, Element to) {
+        super(from, to);
+    }
+
+    @Override
+    public boolean shouldAnimateProperty(ViewGroup fromChild, ViewGroup toChild) {
+        return fromChild.getChildCount() == 0 && toChild.getChildCount() == 0;
+    }
+
+    @Override
+    protected List<Class> excludedViews() {
+        return Collections.singletonList(ReactTextView.class);
+    }
+
+    @Override
+    public Animator create() {
+        return ObjectAnimator.ofFloat(
+                to.getChild(),
+                View.SCALE_X,
+                ((float) from.getChild().getWidth()) / to.getChild().getWidth(),
+                1
+        );
+    }
+}

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

@@ -0,0 +1,39 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.ObjectAnimator;
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.facebook.react.views.text.ReactTextView;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.Collections;
+import java.util.List;
+
+public class ScaleYAnimator extends PropertyAnimatorCreator<ViewGroup> {
+
+    public ScaleYAnimator(Element from, Element to) {
+        super(from, to);
+    }
+
+    @Override
+    public boolean shouldAnimateProperty(ViewGroup fromChild, ViewGroup toChild) {
+        return fromChild.getChildCount() == 0 && toChild.getChildCount() == 0;
+    }
+
+    @Override
+    protected List<Class> excludedViews() {
+        return Collections.singletonList(ReactTextView.class);
+    }
+
+    @Override
+    public Animator create() {
+        return ObjectAnimator.ofFloat(
+                to.getChild(),
+                View.SCALE_Y,
+                ((float) from.getChild().getHeight()) / to.getChild().getHeight(),
+                1
+        );
+    }
+}

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

@@ -0,0 +1,30 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.widget.TextView;
+
+import com.facebook.react.views.text.ReactTextView;
+import com.reactnativenavigation.views.element.Element;
+import com.shazam.android.widget.text.reflow.ReflowTextAnimatorHelper;
+
+import static com.reactnativenavigation.utils.TextViewUtils.getTextSize;
+
+public class TextChangeAnimator extends PropertyAnimatorCreator<ReactTextView> {
+
+    public TextChangeAnimator(Element from, Element to) {
+        super(from, to);
+    }
+
+    @Override
+    protected boolean shouldAnimateProperty(ReactTextView fromChild, ReactTextView toChild) {
+        return getTextSize(fromChild) != getTextSize(toChild);
+    }
+
+    @Override
+    public Animator create() {
+        return new ReflowTextAnimatorHelper
+                .Builder((TextView) from.getChild(), (TextView) to.getChild())
+                .calculateDuration(false)
+                .buildAnimator();
+    }
+}

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

@@ -0,0 +1,35 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.ObjectAnimator;
+import android.widget.TextView;
+
+import com.facebook.react.views.text.ReactTextView;
+import com.reactnativenavigation.utils.ColorUtils;
+import com.reactnativenavigation.utils.TextViewUtils;
+import com.reactnativenavigation.views.element.Element;
+
+import static com.reactnativenavigation.utils.TextViewUtils.getTextColor;
+
+public class TextColorAnimator extends PropertyAnimatorCreator<ReactTextView> {
+
+    public TextColorAnimator(Element from, Element to) {
+        super(from, to);
+    }
+
+    @Override
+    protected boolean shouldAnimateProperty(ReactTextView fromChild, ReactTextView toChild) {
+        return getTextColor(fromChild) != getTextColor(toChild);
+    }
+
+    @Override
+    public Animator create() {
+        return ObjectAnimator.ofObject(
+                to,
+                "textColor",
+                new LabColorEvaluator(),
+                ColorUtils.colorToLAB(TextViewUtils.getTextColor((TextView) from.getChild())),
+                ColorUtils.colorToLAB(TextViewUtils.getTextColor((TextView) to.getChild()))
+        );
+    }
+}

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

@@ -0,0 +1,33 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.ObjectAnimator;
+import android.widget.TextView;
+
+import com.facebook.react.views.text.ReactTextView;
+import com.reactnativenavigation.utils.TextViewUtils;
+import com.reactnativenavigation.views.element.Element;
+
+import static com.reactnativenavigation.utils.TextViewUtils.getTextSize;
+
+public class TextSizeAnimator extends PropertyAnimatorCreator<ReactTextView> {
+
+    public TextSizeAnimator(Element from, Element to) {
+        super(from, to);
+    }
+
+    @Override
+    protected boolean shouldAnimateProperty(ReactTextView fromChild, ReactTextView toChild) {
+        return getTextSize(fromChild) != getTextSize(toChild);
+    }
+
+    @Override
+    public Animator create() {
+        return ObjectAnimator.ofFloat(
+                to,
+                "textSize",
+                TextViewUtils.getTextSize((TextView) from.getChild()),
+                TextViewUtils.getTextSize((TextView) to.getChild())
+        );
+    }
+}

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

@@ -0,0 +1,40 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.ObjectAnimator;
+import android.graphics.Point;
+import android.view.View;
+
+import com.facebook.react.views.text.ReactTextView;
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.Collections;
+import java.util.List;
+
+public class XAnimator extends PropertyAnimatorCreator<View> {
+
+    private final int dx;
+
+    public XAnimator(Element from, Element to) {
+        super(from, to);
+        final Point fromXy = ViewUtils.getLocationOnScreen(from.getChild());
+        final Point toXy = ViewUtils.getLocationOnScreen(to.getChild());
+        dx = fromXy.x - toXy.x;
+    }
+
+    @Override
+    protected List<Class> excludedViews() {
+        return Collections.singletonList(ReactTextView.class);
+    }
+
+    @Override
+    public boolean shouldAnimateProperty(View fromChild, View toChild) {
+        return dx != 0;
+    }
+
+    @Override
+    public Animator create() {
+        return ObjectAnimator.ofFloat(to.getChild(), View.TRANSLATION_X, dx, 0);
+    }
+}

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

@@ -0,0 +1,40 @@
+package com.reactnativenavigation.views.element.animators;
+
+import android.animation.Animator;
+import android.animation.ObjectAnimator;
+import android.graphics.Point;
+import android.view.View;
+
+import com.facebook.react.views.text.ReactTextView;
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.Collections;
+import java.util.List;
+
+public class YAnimator extends PropertyAnimatorCreator<View> {
+
+    private final int dy;
+
+    public YAnimator(Element from, Element to) {
+        super(from, to);
+        final Point fromXy = ViewUtils.getLocationOnScreen(from.getChild());
+        final Point toXy = ViewUtils.getLocationOnScreen(to.getChild());
+        dy = fromXy.y - toXy.y;
+    }
+
+    @Override
+    protected List<Class> excludedViews() {
+        return Collections.singletonList(ReactTextView.class);
+    }
+
+    @Override
+    public boolean shouldAnimateProperty(View fromChild, View toChild) {
+        return dy != 0;
+    }
+
+    @Override
+    public Animator create() {
+        return ObjectAnimator.ofFloat(to.getChild(), View.TRANSLATION_Y, dy, 0);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/mocks/SimpleOverlay.java

@@ -8,6 +8,10 @@ import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.Collections;
+import java.util.List;
 
 public class SimpleOverlay extends RelativeLayout implements IReactView {
     public SimpleOverlay(Context context) {
@@ -61,4 +65,9 @@ public class SimpleOverlay extends RelativeLayout implements IReactView {
     public boolean isRendered() {
         return getChildCount() >= 1;
     }
+
+    @Override
+    public List<Element> getElements() {
+        return Collections.EMPTY_LIST;
+    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/mocks/SimpleViewController.java

@@ -4,22 +4,23 @@ import android.app.Activity;
 import android.content.Context;
 import android.support.annotation.NonNull;
 import android.view.MotionEvent;
-import android.view.View;
-import android.widget.FrameLayout;
 import android.widget.RelativeLayout;
 
+import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.OptionsPresenter;
+import com.reactnativenavigation.react.ReactView;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.ChildController;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.views.ReactComponent;
 import com.reactnativenavigation.views.topbar.TopBar;
 
+import org.mockito.Mockito;
+
 public class SimpleViewController extends ChildController<SimpleViewController.SimpleView> {
 
-    private SimpleView simpleView;
 
     public SimpleViewController(Activity activity, ChildControllersRegistry childRegistry, String id, Options options) {
         this(activity, childRegistry, id, new OptionsPresenter(activity, new Options()), options);
@@ -31,13 +32,12 @@ public class SimpleViewController extends ChildController<SimpleViewController.S
 
     @Override
     protected SimpleView createView() {
-        simpleView = new SimpleView(getActivity());
-        return simpleView;
+        return new SimpleView(getActivity());
     }
 
     @Override
     public void sendOnNavigationButtonPressed(String buttonId) {
-        simpleView.sendOnNavigationButtonPressed(buttonId);
+        getView().sendOnNavigationButtonPressed(buttonId);
     }
 
     @Override
@@ -51,10 +51,10 @@ public class SimpleViewController extends ChildController<SimpleViewController.S
         super.mergeOptions(options);
     }
 
-    public static class SimpleView extends FrameLayout implements ReactComponent {
+    public static class SimpleView extends ReactView implements ReactComponent {
 
         public SimpleView(@NonNull Context context) {
-            super(context);
+            super(context, Mockito.mock(ReactInstanceManager.class), "compId", "compName");
         }
 
         @Override
@@ -88,8 +88,8 @@ public class SimpleViewController extends ChildController<SimpleViewController.S
         }
 
         @Override
-        public View asView() {
-            return null;
+        public ReactView asView() {
+            return this;
         }
 
         @Override

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TestReactView.java

@@ -8,6 +8,10 @@ import android.widget.FrameLayout;
 
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.views.element.Element;
+
+import java.util.Collections;
+import java.util.List;
 
 public class TestReactView extends FrameLayout implements IReactView {
 
@@ -59,4 +63,9 @@ public class TestReactView extends FrameLayout implements IReactView {
     public boolean isRendered() {
         return getChildCount() >= 1;
     }
+
+    @Override
+    public List<Element> getElements() {
+        return Collections.EMPTY_LIST;
+    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/react/ElementViewManagerTest.java

@@ -0,0 +1,58 @@
+package com.reactnativenavigation.react;
+
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.views.element.Element;
+
+import org.junit.Test;
+import org.mockito.Mockito;
+import org.robolectric.Shadows;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.verify;
+
+public class ElementViewManagerTest extends BaseTest {
+    private ElementViewManager uut;
+    private Element view;
+    private ThemedReactContext reactContext = Mockito.mock(ThemedReactContext.class);
+    private SimpleViewController.SimpleView parentView;
+
+    @Override
+    public void beforeEach() {
+        view = new Element(newActivity());
+        uut = new ElementViewManager() {
+            @Override
+            public Element createView(ThemedReactContext reactContext) {
+                return view;
+            }
+        };
+        parentView = Mockito.mock(SimpleViewController.SimpleView.class);
+        Shadows.shadowOf(view).setMyParent(parentView);
+    }
+
+    @Test
+    public void createViewInstance() {
+        Element element = uut.createViewInstance(reactContext);
+        assertThat(element).isNotNull();
+    }
+
+    @Test
+    public void createViewInstance_registersInParentReactView() {
+        ElementViewManager spy = spy(uut);
+
+        parentView.addView(view);
+        spy.createViewInstance(reactContext);
+
+        dispatchPreDraw(view);
+        dispatchOnGlobalLayout(view);
+        verify(parentView).registerElement(view);
+    }
+
+    @Test
+    public void onDropViewInstance() {
+        uut.onDropViewInstance(view);
+        verify(parentView).unregisterElement(view);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/views/element/ElementTransitionManagerTest.java

@@ -0,0 +1,100 @@
+package com.reactnativenavigation.views.element;
+
+import android.animation.Animator;
+import android.app.Activity;
+import android.view.View;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.parse.Transition;
+import com.reactnativenavigation.parse.Transitions;
+import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.views.element.animators.PropertyAnimatorCreator;
+
+import org.junit.Test;
+
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.Collections;
+import java.util.List;
+import java.util.Map;
+
+import static com.reactnativenavigation.views.element.TransitionTestUtils.createElement;
+import static com.reactnativenavigation.views.element.TransitionTestUtils.createTransition;
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.verify;
+
+public class ElementTransitionManagerTest extends BaseTest {
+    private ElementTransitionManager uut;
+    private Transition validTransition;
+    private Transition invalidTransition;
+    private Element from1;
+    private Element to1;
+    private TransitionValidator validator;
+    private TransitionAnimatorCreator animatorCreator;
+
+    @Override
+    public void beforeEach() {
+        validator = spy(new TransitionValidator());
+        animatorCreator = spy(new TransitionAnimatorCreator() {
+            @Override
+            protected List<PropertyAnimatorCreator> getAnimators(Element from, Element to) {
+                return Collections.EMPTY_LIST;
+            }
+        });
+        uut = new ElementTransitionManager(validator, animatorCreator);
+        Activity activity = newActivity();
+        from1 = createElement(activity, "from1Id");
+        to1 = createElement(activity, "to1Id");
+        validTransition = createTransition(from1, to1);
+        invalidTransition = createTransition(from1, to1); invalidTransition.toId = new Text("nonexistentElement");
+    }
+
+    @Test
+    public void createElementTransitions_returnsOnEmptyTransitions() {
+        Collection<? extends Animator> result = uut.createTransitions(
+                new Transitions(),
+                Collections.singletonList(from1),
+                Collections.singletonList(to1)
+        );
+        assertThat(result).isEmpty();
+    }
+
+    @Test
+    public void createElementTransitions_returnsIfNoElements() {
+        Collection<? extends Animator> result = uut.createTransitions(
+                new Transitions(Collections.singletonList(validTransition)),
+                Collections.EMPTY_LIST,
+                Collections.EMPTY_LIST
+        );
+        assertThat(result).isEmpty();
+    }
+
+    @Test
+    public void createElementTransitions_returnsIfNoMatchingElements() {
+        Transition invalidTransition = new Transition();
+        invalidTransition.fromId = new Text("from1Id");
+        invalidTransition.toId = new Text("nonExistentElement");
+        Transitions transitions = new Transitions(Collections.singletonList(invalidTransition));
+
+        Collection<? extends Animator> result = uut.createTransitions(
+                transitions,
+                Collections.singletonList(from1),
+                Collections.singletonList(to1)
+        );
+        verify(validator).validate(eq(invalidTransition), any(), any());
+        assertThat(result).isEmpty();
+    }
+
+    @Test
+    public void createElementTransitions_delegatesAnimatorCreationToCreator() {
+        uut.createTransitions(
+                new Transitions(Arrays.asList(validTransition, invalidTransition)),
+                Collections.singletonList(from1),
+                Collections.singletonList(to1)
+        );
+        verify(animatorCreator).create(any(List.class), any(Map.class), any(Map.class));
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/views/element/TransitionAnimatorCreatorTest.java

@@ -0,0 +1,83 @@
+package com.reactnativenavigation.views.element;
+
+import android.app.Activity;
+import android.view.View;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.parse.Transition;
+import com.reactnativenavigation.views.element.animators.PropertyAnimatorCreator;
+
+import org.junit.Test;
+import org.mockito.Mockito;
+
+import java.util.Arrays;
+import java.util.List;
+
+import static com.reactnativenavigation.utils.CollectionUtils.map;
+import static com.reactnativenavigation.views.element.TransitionTestUtils.createElement;
+import static com.reactnativenavigation.views.element.TransitionTestUtils.createTransition;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.verifyNoMoreInteractions;
+import static org.mockito.Mockito.when;
+
+public class TransitionAnimatorCreatorTest extends BaseTest {
+    private TransitionAnimatorCreator uut;
+    private Transition t1;
+    private Transition t2;
+    private Element e1;
+    private Element e2;
+    private Element e3;
+    private Element e4;
+    private PropertyAnimatorCreator animator1 = Mockito.mock(PropertyAnimatorCreator.class);
+    private PropertyAnimatorCreator animator2 = Mockito.mock(PropertyAnimatorCreator.class);
+    private PropertyAnimatorCreator animator3 = Mockito.mock(PropertyAnimatorCreator.class);
+
+    @Override
+    public void beforeEach() {
+        when(animator1.shouldAnimateProperty()).thenReturn(true);
+        when(animator2.shouldAnimateProperty()).thenReturn(true);
+        when(animator3.shouldAnimateProperty()).thenReturn(false);
+        uut = new TransitionAnimatorCreator() {
+            @Override
+            protected List<PropertyAnimatorCreator> getAnimators(Element from, Element to) {
+                return Arrays.asList(animator1, animator2, animator3);
+            }
+        };
+        Activity activity = newActivity();
+        e1 = createElement(activity); e2 = createElement(activity); e3 = createElement(activity); e4 = createElement(activity);
+        t1 = createTransition(e1, e2);
+        t2 = createTransition(e3, e4);
+    }
+
+    @Test
+    public void createAnimatorsForEachTransition() {
+        TransitionAnimatorCreator spy = spy(uut);
+        spy.create(
+                Arrays.asList(t1, t2),
+                map(Arrays.asList(e1, e3), Element::getElementId),
+                map(Arrays.asList(e2, e4), Element::getElementId)
+        );
+        verify(spy).create(t1, e1, e2);
+        verify(spy).create(t2, e3, e4);
+    }
+
+    @Test
+    public void create_animatorsAreCreated() {
+        List<Transition> transitions = Arrays.asList(t1, t2);
+        uut.create(
+                transitions,
+                map(Arrays.asList(e1, e3), Element::getElementId),
+                map(Arrays.asList(e2, e4), Element::getElementId)
+        );
+        verify(animator1, times(2)).shouldAnimateProperty();
+        verify(animator2, times(2)).shouldAnimateProperty();
+        verify(animator3, times(2)).shouldAnimateProperty();
+        for (Transition transition : transitions) {
+            verify(animator1).create(transition);
+            verify(animator2).create(transition);
+        }
+        verifyNoMoreInteractions(animator3);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/views/element/TransitionTestUtils.java

@@ -0,0 +1,32 @@
+package com.reactnativenavigation.views.element;
+
+import android.app.Activity;
+
+import com.reactnativenavigation.parse.Transition;
+import com.reactnativenavigation.parse.params.Number;
+import com.reactnativenavigation.parse.params.Text;
+
+import java.util.UUID;
+
+public class TransitionTestUtils {
+    private static final int DURATION = 250;
+
+    static Transition createTransition(Element from, Element to) {
+        Transition transition = new Transition();
+        transition.duration = new Number(DURATION);
+        transition.fromId = new Text(from.getElementId());
+        transition.toId = new Text(to.getElementId());
+        return transition;
+    }
+
+    static Element createElement(Activity activity) {
+        return createElement(activity, UUID.randomUUID().toString());
+    }
+
+    static Element createElement(Activity activity, String id) {
+        Element e = new Element(activity);
+        e.setElementId(id);
+        return e;
+    }
+
+}

lib/android/app/src/test/java/com/reactnativenavigation/views/element/TransitionValidatorTest.java

@@ -0,0 +1,110 @@
+package com.reactnativenavigation.views.element;
+
+import android.app.Activity;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.parse.Transition;
+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 org.junit.Test;
+
+import java.util.Collections;
+
+import static com.reactnativenavigation.utils.CollectionUtils.map;
+import static org.assertj.core.api.Java6Assertions.assertThat;
+
+public class TransitionValidatorTest extends BaseTest {
+    public static final String NONEXISTENT_ELEMENT = "nonexistentElement";
+    private TransitionValidator uut;
+    private Element from1;
+    private Element to1;
+    private Transition transition;
+    private Transition invalidFromElementTransition;
+    private Transition invalidToElementTransition;
+
+    @Override
+    public void beforeEach() {
+        uut = new TransitionValidator();
+        Activity activity = newActivity();
+        from1 = new Element(activity); from1.setElementId("e1");
+        to1 = new Element(activity); to1.setElementId("e2");
+
+        transition = createTransition(from1.getElementId(), to1.getElementId());
+        invalidFromElementTransition = createTransition(NONEXISTENT_ELEMENT, to1.getElementId());
+        invalidToElementTransition = createTransition(from1.getElementId(), NONEXISTENT_ELEMENT);
+    }
+
+    private Transition createTransition(String fromId, String toId) {
+        Transition transition = new Transition();
+        transition.duration = new Number(100);
+        transition.fromId = new Text(fromId);
+        transition.toId = new Text(toId);
+        return transition;
+    }
+
+    @Test
+    public void validate_falseIfNullToId() {
+        transition.toId = new NullText();
+        boolean result = uut.validate(
+                transition,
+                map(Collections.singletonList(from1), Element::getElementId),
+                map(Collections.singletonList(from1), Element::getElementId)
+        );
+        assertThat(result).isFalse();
+    }
+
+    @Test
+    public void validate_falseIfNullFromId() {
+        transition.fromId = new NullText();
+        boolean result = uut.validate(
+                transition,
+                map(Collections.singletonList(from1), Element::getElementId),
+                map(Collections.singletonList(from1), Element::getElementId)
+        );
+        assertThat(result).isFalse();
+    }
+
+    @Test
+    public void validate_falseIfFromElementRequiredByTransitionDontExist() {
+        boolean result = uut.validate(
+                invalidFromElementTransition,
+                map(Collections.singletonList(from1), Element::getElementId),
+                map(Collections.singletonList(to1), Element::getElementId)
+        );
+        assertThat(result).isFalse();
+    }
+
+    @Test
+    public void validate_falseIfToElementRequiredByTransitionDontExist() {
+        boolean result = uut.validate(
+                invalidToElementTransition,
+                map(Collections.singletonList(from1), Element::getElementId),
+                map(Collections.singletonList(to1), Element::getElementId)
+        );
+        assertThat(result).isFalse();
+    }
+
+    @Test
+    public void validate_trueIfElementsRequiredByTransitionExist() {
+        boolean result = uut.validate(
+                transition,
+                map(Collections.singletonList(from1), Element::getElementId),
+                map(Collections.singletonList(to1), Element::getElementId)
+        );
+        assertThat(result).isTrue();
+    }
+
+    @Test
+    public void validate_hasDuration() {
+        transition.duration = new NullNumber();
+        boolean result = uut.validate(
+                transition,
+                map(Collections.singletonList(from1), Element::getElementId),
+                map(Collections.singletonList(to1), Element::getElementId)
+        );
+        assertThat(result).isFalse();
+    }
+}

lib/src/adapters/Element.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { requireNativeComponent } from 'react-native';
+import { View, requireNativeComponent } from 'react-native';
 
 let RNNElement: React.ComponentType<any>;
 
 export class Element extends React.Component<{ elementId: any; resizeMode?: any; }, any> {
   static propTypes = {
     elementId: PropTypes.string.isRequired,
-    resizeMode: PropTypes.string
+    resizeMode: PropTypes.string,
+    ...View.propTypes
   };
 
   static defaultProps = {
@@ -21,4 +22,12 @@ export class Element extends React.Component<{ elementId: any; resizeMode?: any;
   }
 }
 
-RNNElement = requireNativeComponent('RNNElement', Element);
+RNNElement = requireNativeComponent(
+  'RNNElement',
+  Element,
+  {
+    nativeOnly: {
+      nativeID: true
+    }
+  }
+);

package.json

@@ -53,32 +53,33 @@
     "react-native": "*"
   },
   "dependencies": {
+    "hoist-non-react-statics": "2.x.x",
     "lodash": "4.x.x",
     "prop-types": "15.x.x",
-    "react-lifecycles-compat": "2.0.0",
-    "hoist-non-react-statics": "2.x.x"
+    "react-lifecycles-compat": "2.0.0"
   },
   "devDependencies": {
+    "@types/jest": "22.x.x",
+    "@types/lodash": "4.x.x",
     "@types/react": "16.x.x",
     "@types/react-native": "0.51.x",
-    "@types/lodash": "4.x.x",
     "@types/react-test-renderer": "16.x.x",
-    "@types/jest": "22.x.x",
     "detox": "7.x.x",
+    "handlebars": "4.x.x",
     "jest": "22.x.x",
     "react": "16.2.0",
     "react-native": "0.51.x",
+    "react-native-view-overflow": "0.0.3",
     "react-redux": "5.x.x",
     "react-test-renderer": "16.0.0-alpha.12",
     "redux": "3.x.x",
     "remx": "2.x.x",
     "semver": "5.x.x",
     "shell-utils": "1.x.x",
+    "ts-node": "5.x.x",
     "tslint": "5.x.x",
-    "typescript": "2.9.x",
     "typedoc": "0.x.x",
-    "handlebars": "4.x.x",
-    "ts-node": "5.x.x"
+    "typescript": "2.9.x"
   },
   "babel": {
     "env": {

playground/android/app/build.gradle

@@ -63,6 +63,7 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'
     implementation project(':react-native-navigation')
+    implementation project(':react-native-view-overflow')
 
     androidTestImplementation(project(':detox'))
     androidTestImplementation 'junit:junit:4.12'

playground/android/app/src/main/java/com/reactnativenavigation/playground/MainApplication.java

@@ -2,6 +2,7 @@ package com.reactnativenavigation.playground;
 
 import android.support.annotation.Nullable;
 
+import com.entria.views.RNViewOverflowPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.uimanager.UIImplementationProvider;
@@ -9,6 +10,7 @@ import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.react.NavigationReactNativeHost;
 import com.reactnativenavigation.react.SyncUiImplementation;
 
+import java.util.ArrayList;
 import java.util.List;
 
 public class MainApplication extends NavigationApplication {
@@ -42,6 +44,8 @@ public class MainApplication extends NavigationApplication {
     @Nullable
     @Override
     public List<ReactPackage> createAdditionalReactPackages() {
-        return null;
+        List<ReactPackage> packages = new ArrayList<>();
+        packages.add(new RNViewOverflowPackage());
+        return packages;
     }
 }

playground/android/build.gradle

@@ -26,5 +26,6 @@ allprojects {
             url "$rootDir/../../node_modules/react-native/android"
         }
         maven { url 'https://jitpack.io' }
+        maven { url 'https://oss.sonatype.org/content/repositories/snapshots' }
     }
 }

playground/android/settings.gradle

@@ -6,3 +6,6 @@ project(':react-native-navigation').projectDir = new File(rootProject.projectDir
 
 include ':detox'
 project(':detox').projectDir = new File(rootProject.projectDir, '../../node_modules/detox/android/detox')
+
+include ':react-native-view-overflow'
+project(':react-native-view-overflow').projectDir = new File(rootProject.projectDir, '../../node_modules/react-native-view-overflow/android')

playground/src/app.js

@@ -155,6 +155,7 @@ function start() {
             {
               component: {
                 name: 'navigation.playground.WelcomeScreen'
+                // name: 'navigation.playground.CustomTransitionOrigin'
               }
             }
           ]

playground/src/screens/CustomTransitionDestination.js

@@ -2,6 +2,7 @@ const React = require('react');
 const { Component } = require('react');
 const { View, TouchableOpacity, Image, Text } = require('react-native');
 const { Navigation } = require('react-native-navigation');
+import ViewOverflow from 'react-native-view-overflow';
 
 class CustomTransitionDestination extends Component {
   constructor(props) {
@@ -14,7 +15,7 @@ class CustomTransitionDestination extends Component {
     return {
       topBar: {
         title: {
-          text: 'ye babyyyyyy',
+          text: 'Shared Element Transition',
           fontFamily: 'HelveticaNeue-Italic'
         },
         backButton: {
@@ -23,6 +24,17 @@ class CustomTransitionDestination extends Component {
         largeTitle: {
           visible: false
         }
+      },
+      animations: {
+        pop: {
+          content: {
+            alpha: {
+              from: 1,
+              to: 0,
+              duration: 250
+            }
+          }
+        }
       }
     };
   }
@@ -54,14 +66,22 @@ class CustomTransitionDestination extends Component {
           <Navigation.Element resizeMode={'contain'} elementId={'customDestinationImage'}>
             <Image resizeMode={'contain'} style={{ width: 300, height: 300 }} source={require('../../img/400.jpeg')} />
           </Navigation.Element>
-          <Navigation.Element elementId={'customDestinationImage2'}>
-            <Image style={{ width: 100, height: 100 }} source={require('../../img/2048.jpeg')} />
-          </Navigation.Element>
+
+          <View style={{ width: 120, height: 120, margin: 15, alignItems: 'center', justifyContent: 'center' }}>
+            <Navigation.Element elementId={'customDestinationImage2'} style={{ width: 100, height: 100, zIndex: 1 }}>
+              <Image resizeMode={'contain'} style={{ width: 100, height: 100 }} source={require('../../img/2048.jpeg')} />
+            </Navigation.Element>
+            <ViewOverflow>
+              <Navigation.Element elementId='image2bgDestination' style={{ width: 120, height: 120, marginTop: -110 }}>
+                <View style={{ width: 120, height: 120, backgroundColor: 'yellow' }} />
+              </Navigation.Element>
+            </ViewOverflow>
+          </View>
         </View>
 
         <TouchableOpacity testID={'shared_image2'} onPress={this.pop}>
           <Navigation.Element elementId={'title2'}>
-            <Text style={styles.h1}>{`Custom Transition Screen`}</Text>
+            <Text style={[{color: 'red', textAlign: 'center'}, styles.h1]}>{`Custom Transition Screen`}</Text>
           </Navigation.Element>
         </TouchableOpacity>
         <Navigation.Element elementId={'customDestinationParagraph'}>

playground/src/screens/CustomTransitionOrigin.js

@@ -2,7 +2,7 @@ const React = require('react');
 const { Component } = require('react');
 const { View, Text, Image, TouchableOpacity } = require('react-native');
 const { Navigation } = require('react-native-navigation');
-
+import ViewOverflow from 'react-native-view-overflow';
 class CustomTransitionOrigin extends Component {
   constructor(props) {
     super(props);
@@ -26,31 +26,41 @@ class CustomTransitionOrigin extends Component {
     return (
       <View style={styles.root}>
         <Navigation.Element elementId='title1'>
-          <Text style={styles.h1}>Custom Transition Screen</Text>
+          <Text style={[styles.h1, { color: 'black' }]}>Custom Transition Screen</Text>
         </Navigation.Element>
+
         <View style={{ flex: 1, justifyContent: 'flex-start' }}>
           <TouchableOpacity testID='shared_image1' activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
             <Navigation.Element resizeMode='cover' elementId='image1'>
               <Image resizeMode='cover' style={styles.gyroImage} source={require('../../img/400.jpeg')} />
             </Navigation.Element>
           </TouchableOpacity>
-          <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
-            <Navigation.Element elementId='image2'>
-              <Image style={styles.gyroImage} source={require('../../img/2048.jpeg')} />
-            </Navigation.Element>
+
+          <TouchableOpacity style={{ width: 110 }} activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
+            <View style={{ width: 100, height: 100, marginTop: 10, marginBottom: 30 }}>
+              <Navigation.Element elementId='image2' style={{ zIndex: 1 }}>
+                <Image style={styles.gyroImage} source={require('../../img/2048.jpeg')} />
+              </Navigation.Element>
+              <ViewOverflow>
+                <Navigation.Element elementId='image2bg' style={{ width: 100, height: 100, marginLeft: 10, marginTop: -90 }}>
+                  <View style={{ width: 100, height: 100, backgroundColor: 'purple' }} />
+                </Navigation.Element>
+              </ViewOverflow>
+            </View>
           </TouchableOpacity>
+
           <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
             <Navigation.Element elementId='image3'>
               <Image style={styles.gyroImage} source={require('../../img/Icon-87.png')} />
             </Navigation.Element>
           </TouchableOpacity>
+
           <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
             <Navigation.Element elementId='image4'>
               <Image style={styles.gyroImage} source={require('../../img/Icon-87.png')} />
             </Navigation.Element>
           </TouchableOpacity>
         </View>
-
       </View>
     );
   }
@@ -59,11 +69,26 @@ class CustomTransitionOrigin extends Component {
       component: {
         name: 'navigation.playground.CustomTransitionDestination',
         options: {
+          animations: {
+            push: {
+              waitForRender: true,
+              content: {
+                alpha: {
+                  from: 0,
+                  to: 1,
+                  duration: 250
+                }
+              }
+            }
+          },
           customTransition: {
             animations: [
               { type: 'sharedElement', fromId: 'title1', toId: 'title2', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
-              { type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9,
-              springDamping: 0.9, duration: 0.8, interactivePop: true },
+              {
+                type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9,
+                springDamping: 0.9, duration: 0.8, interactivePop: true
+              },
+              { type: 'sharedElement', fromId: 'image2bg', toId: 'image2bgDestination', startDelay: 0, duration: 0.8 },
               { type: 'sharedElement', fromId: 'image2', toId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
               { fromId: 'image4', x: { to: 50 }, y: { to: 50 }, endAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
               { fromId: 'customDestinationParagraph', startY: 50, startAlpha: 0, endAlpha: 1, startDelay: 0, duration: 0.8 }
@@ -84,7 +109,6 @@ const styles = {
     backgroundColor: '#f5fcff'
   },
   h1: {
-
     fontSize: 24,
     textAlign: 'center',
     marginTop: 100

playground/src/screens/OptionsScreen.js

@@ -130,7 +130,7 @@ class OptionsScreen extends Component {
         <Button title='Top Bar Transparent' onPress={this.onClickTopBarTransparent} />
         <Button title='Top Bar Opaque' onPress={this.onClickTopBarOpaque} />
         <Button title='scrollView Screen' testID={testIDs.SCROLLVIEW_SCREEN_BUTTON} onPress={this.onClickScrollViewScreen} />
-        <Button title='Custom Transition' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTranstition} />
+        <Button title='Custom Transition' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTransition} />
         {Platform.OS === 'android' && <Button title='Hide fab' testID={testIDs.HIDE_FAB} onPress={this.onClickFab} />}
         <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
         <Button title='Show touch through overlay' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
@@ -207,7 +207,7 @@ class OptionsScreen extends Component {
     });
   }
 
-  onClickCustomTranstition = () => {
+  onClickCustomTransition = () => {
     Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.CustomTransitionOrigin'