Shared element transition (#994)

* Add view manager

* Don’t update screen style on ViewPagerScreenChangedEvent

* change version to legacy

* Fix headers after rebase

* version bump

* Add image to each list item

* Basics structure is done (I think)

toElement also animates into place, even though values are completely wrong.

* Stop relying on refs to resolve fromElements

* Hide only corresponding fromElement

* Animate sharedElements back into place on screen pop

* Update example project with Dota heroes

* Initial curved animation implementation

* Stop resolving sharedElement refs

* Move getLocationOnScreen to ViewUtils

* Parse control points passed from Js

* Scale animation works

Not sure about pivot coordinates yet.

* minor update to SharedElementsTransition screen

* Minor changes to example screens

* Draw shared elements on Screen

Ignore Z order and draw shared elements directly on screen

* stuff

* Start animation after views are drawn

* f

* Animate text color

* Less allocations when animating text color

* Switch from RGB to LAB 😎

* Save and restore SpannedString

* Use correct status bar height in Android M

* Pass show and hide duration from Js

* Fix flicker when show animation starts

* Make shared elements not clickable

motivation: might be related to some native crash

* Use linear interpolation as default interpolation

* Code cleanup

* Clear SharedElements refs when screen is destroyed

* Code cleanup

* Add decelerate interpolator

* No more occasional flicker on animation start (Hopefully 🙏)

* Add FastOutSlowIn interpolator

* Animate only visible shared elements

* Clip bounds animator somewhat works

* Hope fully no more flickery images

* Add interpolator to each animator

* some work on shared element screens

* rebase fix

* fix lint

android/app/src/main/java/com/reactnativenavigation/bridge/NavigationReactPackage.java

@@ -5,6 +5,7 @@ import com.facebook.react.bridge.JavaScriptModule;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager;
+import com.reactnativenavigation.views.managers.SharedElementTransitionManager;
 
 import java.util.Arrays;
 import java.util.Collections;
@@ -26,6 +27,8 @@ public class NavigationReactPackage implements ReactPackage {
 
     @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Collections.emptyList();
+        return Arrays.<ViewManager>asList(
+                new SharedElementTransitionManager()
+        );
     }
 }

android/app/src/main/java/com/reactnativenavigation/params/InterpolationParams.java

@@ -0,0 +1,63 @@
+package com.reactnativenavigation.params;
+
+import android.animation.TimeInterpolator;
+import android.support.v4.view.animation.FastOutSlowInInterpolator;
+import android.view.animation.AccelerateDecelerateInterpolator;
+import android.view.animation.AccelerateInterpolator;
+import android.view.animation.DecelerateInterpolator;
+import android.view.animation.Interpolator;
+import android.view.animation.LinearInterpolator;
+
+public abstract class InterpolationParams {
+    public enum Type {
+        Path("path"), Linear("linear");
+        private String name;
+
+        Type(String name) {
+            this.name = name;
+        }
+
+        public static Type fromString(String name) {
+            for (Type type : values()) {
+                if (type.name.equals(name)) {
+                    return type;
+                }
+            }
+            return Linear;
+        }
+    }
+
+    public enum Easing {
+        AccelerateDecelerate("accelerateDecelerate", new AccelerateDecelerateInterpolator()),
+        Accelerate("accelerate", new AccelerateInterpolator()),
+        Decelerate("decelerate", new DecelerateInterpolator()),
+        FastOutSlowIn("FastOutSlowIn", new FastOutSlowInInterpolator()),
+        Linear("linear", new LinearInterpolator());
+
+        private String name;
+        private TimeInterpolator interpolator;
+
+        Easing(String name, TimeInterpolator interpolator) {
+            this.name = name;
+            this.interpolator = interpolator;
+        }
+
+        public static Easing fromString(String name) {
+            for (Easing easing : values()) {
+                if (easing.name.equals(name)) {
+                    return easing;
+                }
+            }
+            return Linear;
+        }
+
+        public TimeInterpolator getInterpolator() {
+            return interpolator;
+        }
+    }
+
+    public Type type;
+    public Easing easing;
+
+    public abstract Interpolator get();
+}

android/app/src/main/java/com/reactnativenavigation/params/LinearInterpolationParams.java

@@ -0,0 +1,11 @@
+package com.reactnativenavigation.params;
+
+import android.view.animation.Interpolator;
+import android.view.animation.LinearInterpolator;
+
+public class LinearInterpolationParams extends InterpolationParams {
+    @Override
+    public Interpolator get() {
+        return new LinearInterpolator();
+    }
+}

android/app/src/main/java/com/reactnativenavigation/params/PathInterpolationParams.java

@@ -0,0 +1,20 @@
+package com.reactnativenavigation.params;
+
+import android.annotation.TargetApi;
+import android.os.Build;
+import android.view.animation.Interpolator;
+
+import com.reactnativenavigation.views.sharedElementTransition.ControlPoint;
+
+@TargetApi(Build.VERSION_CODES.LOLLIPOP)
+public class PathInterpolationParams extends InterpolationParams {
+
+    public ControlPoint p1;
+    public ControlPoint p2;
+
+    @Override
+    public Interpolator get() {
+        // Not called
+        return null;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/params/ScreenParams.java

@@ -5,6 +5,7 @@ import java.util.List;
 public class ScreenParams extends BaseScreenParams {
     public String tabLabel;
     public List<PageParams> topTabParams;
+    public List<String> sharedElementsTransitions;
 
     public boolean hasTopTabs() {
         return topTabParams != null && !topTabParams.isEmpty();

android/app/src/main/java/com/reactnativenavigation/params/parsers/InterpolationParser.java

@@ -0,0 +1,54 @@
+package com.reactnativenavigation.params.parsers;
+
+import android.os.Bundle;
+
+import com.reactnativenavigation.params.InterpolationParams;
+import com.reactnativenavigation.params.LinearInterpolationParams;
+import com.reactnativenavigation.params.PathInterpolationParams;
+import com.reactnativenavigation.views.sharedElementTransition.ControlPoint;
+
+class InterpolationParser extends Parser {
+    private Bundle params;
+
+    private static final float[] defaultShowControlPoints = new float[]{0.5f, 1, 0, 0.5f};
+    private static final float[] defaultHideControlPoints = new float[]{0.5f, 0, 1, 0.5f};
+
+    InterpolationParser(Bundle params) {
+        this.params = params;
+    }
+
+    InterpolationParams parseShowInterpolation() {
+        if (params.isEmpty()) {
+            return new LinearInterpolationParams();
+        }
+        return parse(params, defaultShowControlPoints);
+    }
+
+    InterpolationParams parseHideInterpolation() {
+        if (params.isEmpty()) {
+            return new LinearInterpolationParams();
+        }
+        return parse(params, defaultHideControlPoints);
+    }
+
+    private InterpolationParams parse(Bundle params, float[] defaultControlPoints) {
+        InterpolationParams.Type type = InterpolationParams.Type.fromString(params.getString("type"));
+        InterpolationParams result = InterpolationParams.Type.Path.equals(type) ?
+                parsePathInterpolation(params, defaultControlPoints) :
+                new LinearInterpolationParams();
+        result.easing = InterpolationParams.Easing.fromString(params.getString("easing"));
+        return result;
+    }
+
+    private InterpolationParams parsePathInterpolation(Bundle params, float[] defaultValues) {
+        PathInterpolationParams result = new PathInterpolationParams();
+        result.p1 = new ControlPoint(
+                Float.valueOf(params.getString("controlX1")), defaultValues[0],
+                Float.valueOf(params.getString("controlY1")), defaultValues[1]);
+        result.p2 = new ControlPoint(
+                Float.valueOf(params.getString("controlX2")), defaultValues[2],
+                Float.valueOf(params.getString("controlY2")), defaultValues[3]
+        );
+        return result;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/params/parsers/ScreenParamsParser.java

@@ -1,11 +1,14 @@
 package com.reactnativenavigation.params.parsers;
 
+import android.graphics.drawable.Drawable;
 import android.os.Bundle;
 
 import com.reactnativenavigation.params.NavigationParams;
 import com.reactnativenavigation.params.PageParams;
 import com.reactnativenavigation.params.ScreenParams;
+import com.reactnativenavigation.react.ImageLoader;
 
+import java.util.ArrayList;
 import java.util.List;
 
 public class ScreenParamsParser extends Parser {
@@ -47,10 +50,31 @@ public class ScreenParamsParser extends Parser {
         result.tabIcon = new TabIconParser(params).parse();
 
         result.animateScreenTransitions = new AnimationParser(params).parse();
+        result.sharedElementsTransitions = getSharedElementsTransitions(params);
 
         return result;
     }
 
+    private static List<String> getSharedElementsTransitions(Bundle params) {
+        Bundle sharedElements = params.getBundle("sharedElements");
+        if (sharedElements == null) {
+            return new ArrayList<>();
+        }
+        List<String> result = new ArrayList<>();
+        for (String key : sharedElements.keySet()) {
+            result.add(sharedElements.getString(key));
+        }
+        return result;
+    }
+
+    private static Drawable getTabIcon(Bundle params) {
+        Drawable tabIcon = null;
+        if (hasKey(params, "icon")) {
+            tabIcon = ImageLoader.loadImage(params.getString("icon"));
+        }
+        return tabIcon;
+    }
+
     private static String getTabLabel(Bundle params) {
         String tabLabel = null;
         if (hasKey(params, "label")) {

android/app/src/main/java/com/reactnativenavigation/params/parsers/SharedElementParamsParser.java

@@ -0,0 +1,53 @@
+package com.reactnativenavigation.params.parsers;
+
+import android.os.Bundle;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.reactnativenavigation.bridge.BundleConverter;
+
+public class SharedElementParamsParser {
+    private static final int DEFAULT_DURATION = 300;
+
+    private int showDuration = DEFAULT_DURATION;
+    private int hideDuration = DEFAULT_DURATION;
+    private Bundle showInterpolation = Bundle.EMPTY;
+    private Bundle hideInterpolation = Bundle.EMPTY;
+    public boolean animateClipBounds;
+
+    public void setDuration(int duration) {
+        showDuration = duration;
+        hideDuration = duration;
+    }
+
+    public void setShowDuration(int duration) {
+        showDuration = duration;
+    }
+
+    public void setHideDuration(int duration) {
+        hideDuration = duration;
+    }
+
+    public void setShowInterpolation(ReadableMap showInterpolation) {
+        this.showInterpolation = BundleConverter.toBundle(showInterpolation);
+    }
+
+    public void setHideInterpolation(ReadableMap hideInterpolation) {
+        this.hideInterpolation = BundleConverter.toBundle(hideInterpolation);
+    }
+
+    public SharedElementTransitionParams parseShowTransitionParams() {
+        SharedElementTransitionParams result = new SharedElementTransitionParams();
+        result.duration = showDuration;
+        result.interpolation = new InterpolationParser(showInterpolation).parseShowInterpolation();
+        result.animateClipBounds = animateClipBounds;
+        return result;
+    }
+
+    public SharedElementTransitionParams parseHideTransitionParams() {
+        SharedElementTransitionParams result = new SharedElementTransitionParams();
+        result.duration = hideDuration;
+        result.interpolation = new InterpolationParser(hideInterpolation).parseHideInterpolation();
+        result.animateClipBounds = animateClipBounds;
+        return result;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/params/parsers/SharedElementTransitionParams.java

@@ -0,0 +1,9 @@
+package com.reactnativenavigation.params.parsers;
+
+import com.reactnativenavigation.params.InterpolationParams;
+
+public class SharedElementTransitionParams {
+    public InterpolationParams interpolation;
+    public int duration;
+    public boolean animateClipBounds;
+}

android/app/src/main/java/com/reactnativenavigation/react/ReactViewHacks.java

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.react;
+
+import com.facebook.react.views.image.ReactImageView;
+import com.reactnativenavigation.utils.ReflectionUtils;
+
+public class ReactViewHacks {
+    // Hack to prevent Image flicker until https://github.com/facebook/react-native/issues/10194 is fixed
+    public static void disableReactImageViewRemoteImageFadeInAnimation(ReactImageView reactImageView) {
+        reactImageView.setFadeDuration(0);
+        ReflectionUtils.setField(reactImageView, "mIsDirty", true);
+        reactImageView.maybeUpdateView();
+    }
+}

android/app/src/main/java/com/reactnativenavigation/screens/Screen.java

@@ -27,8 +27,11 @@ import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
 import com.reactnativenavigation.views.TopBar;
+import com.reactnativenavigation.views.sharedElementTransition.SharedElementTransition;
+import com.reactnativenavigation.views.sharedElementTransition.SharedElements;
 
 import java.util.List;
+import java.util.Map;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
@@ -46,6 +49,7 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
     private VisibilityAnimator topBarVisibilityAnimator;
     private ScreenAnimator screenAnimator;
     protected final StyleParams styleParams;
+    public final SharedElements sharedElements;
 
     public Screen(AppCompatActivity activity, ScreenParams screenParams, LeftButtonOnClickListener leftButtonOnClickListener) {
         super(activity);
@@ -56,6 +60,11 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
         screenAnimator = new ScreenAnimator(this);
         createViews();
         EventBus.instance.register(this);
+        sharedElements = new SharedElements();
+    }
+
+    public void registerSharedElement(SharedElementTransition toView, String key) {
+        sharedElements.addToElement(toView, key);
     }
 
     @Override
@@ -65,7 +74,6 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
             topBar.onContextualMenuHidden();
         }
         if (ViewPagerScreenChangedEvent.TYPE.equals(event.getType()) && isShown() ) {
-            setStyle();
             topBar.dismissContextualMenu();
         }
     }
@@ -239,7 +247,48 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
         screenAnimator.show(animated, onAnimationEnd);
     }
 
-    public void hide(boolean animated, Runnable onAnimatedEnd) {
+    public void showWithSharedElementsTransitions(Map<String, SharedElementTransition> fromElements, final Runnable onAnimationEnd) {
+        setStyle();
+        sharedElements.setFromElements(fromElements);
+        screenAnimator.showWithSharedElementsTransitions(onAnimationEnd);
+    }
+
+    public void hideWithSharedElementTransitions(Map<String, SharedElementTransition> toElements, final Runnable onAnimationEnd) {
+        sharedElements.setFromElements(sharedElements.getToElements());
+        sharedElements.setToElements(toElements);
+        screenAnimator.hideWithSharedElementsTransition(onAnimationEnd);
+    }
+
+    public void hide(Map<String, SharedElementTransition> sharedElements, Runnable onAnimationEnd) {
+        removeHiddenSharedElements();
+        if (hasVisibleSharedElements()) {
+            hideWithSharedElementTransitions(sharedElements, onAnimationEnd);
+        } else {
+            hide(false, onAnimationEnd);
+        }
+    }
+
+    public void animateHide(Map<String, SharedElementTransition> sharedElements, Runnable onAnimationEnd) {
+        removeHiddenSharedElements();
+        if (hasVisibleSharedElements()) {
+            hideWithSharedElementTransitions(sharedElements, onAnimationEnd);
+        } else {
+            hide(true, onAnimationEnd);
+        }
+    }
+
+    private boolean hasVisibleSharedElements() {
+        if (screenParams.sharedElementsTransitions.isEmpty()) {
+            return false;
+        }
+        return !sharedElements.getToElements().isEmpty();
+    }
+
+    public void removeHiddenSharedElements() {
+        sharedElements.removeHiddenElements();
+    }
+
+    private void hide(boolean animated, Runnable onAnimatedEnd) {
         NavigationApplication.instance.getEventEmitter().sendNavigatorEvent("willDisappear", screenParams.getNavigatorEventId());
         NavigationApplication.instance.getEventEmitter().sendNavigatorEvent("didDisappear", screenParams.getNavigatorEventId());
         screenAnimator.hide(animated, onAnimatedEnd);
@@ -257,5 +306,6 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
     public void destroy() {
         unmountReactView();
         EventBus.instance.unregister(this);
+        sharedElements.destroy();
     }
 }

android/app/src/main/java/com/reactnativenavigation/screens/ScreenAnimator.java

@@ -11,14 +11,15 @@ import android.view.animation.LinearInterpolator;
 
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.sharedElementTransition.SharedElementsAnimator;
 
 import javax.annotation.Nullable;
 
-public class ScreenAnimator {
+class ScreenAnimator {
     private final float translationY;
     private Screen screen;
 
-    public ScreenAnimator(Screen screen) {
+    ScreenAnimator(Screen screen) {
         this.screen = screen;
         translationY = 0.08f * ViewUtils.getScreenHeight();
     }
@@ -96,4 +97,13 @@ public class ScreenAnimator {
         });
         return set;
     }
+
+    void showWithSharedElementsTransitions(Runnable onAnimationEnd) {
+        screen.setVisibility(View.VISIBLE);
+        new SharedElementsAnimator(this.screen.sharedElements).show(onAnimationEnd);
+    }
+
+    void hideWithSharedElementsTransition(Runnable onAnimationEnd) {
+        new SharedElementsAnimator(screen.sharedElements).hide(onAnimationEnd);
+    }
 }

android/app/src/main/java/com/reactnativenavigation/screens/ScreenStack.java

@@ -100,7 +100,12 @@ public class ScreenStack {
         Screen nextScreen = ScreenFactory.create(activity, params, leftButtonOnClickListener);
         final Screen previousScreen = stack.peek();
         if (isStackVisible) {
-            pushScreenToVisibleStack(layoutParams, nextScreen, previousScreen);
+            if (nextScreen.screenParams.sharedElementsTransitions.isEmpty()) {
+                pushScreenToVisibleStack(layoutParams, nextScreen, previousScreen);
+            } else {
+//                pushScreenToVisibleStack(layoutParams, nextScreen, previousScreen);
+                pushScreenToVisibleStackWithSharedElementTransition(layoutParams, nextScreen, previousScreen);
+            }
         } else {
             pushScreenToInvisibleStack(layoutParams, nextScreen, previousScreen);
         }
@@ -133,6 +138,22 @@ public class ScreenStack {
         });
     }
 
+    private void pushScreenToVisibleStackWithSharedElementTransition(LayoutParams layoutParams, final Screen nextScreen, final Screen previousScreen) {
+        nextScreen.setVisibility(View.INVISIBLE);
+        nextScreen.setOnDisplayListener(new Screen.OnDisplayListener() {
+            @Override
+            public void onDisplay() {
+                nextScreen.showWithSharedElementsTransitions(previousScreen.sharedElements.getToElements(), new Runnable() {
+                    @Override
+                    public void run() {
+                        parent.removeView(previousScreen);
+                    }
+                });
+            }
+        });
+        addScreen(nextScreen, layoutParams);
+    }
+
     private void pushScreenToInvisibleStack(LayoutParams layoutParams, Screen nextScreen, Screen previousScreen) {
         nextScreen.setVisibility(View.INVISIBLE);
         addScreen(nextScreen, layoutParams);
@@ -179,16 +200,24 @@ public class ScreenStack {
     private void swapScreens(boolean animated, final Screen toRemove, Screen previous, OnScreenPop onScreenPop) {
         readdPrevious(previous);
         previous.setStyle();
-        toRemove.hide(animated, new Runnable() {
+        hideScreen(animated, toRemove, previous);
+        if (onScreenPop != null) {
+            onScreenPop.onScreenPopAnimationEnd();
+        }
+    }
+
+    private void hideScreen(boolean animated, final Screen toRemove, Screen previous) {
+        Runnable onAnimationEnd = new Runnable() {
             @Override
             public void run() {
                 toRemove.destroy();
                 parent.removeView(toRemove);
             }
-        });
-
-        if (onScreenPop != null) {
-            onScreenPop.onScreenPopAnimationEnd();
+        };
+        if (animated) {
+            toRemove.animateHide(previous.sharedElements.getToElements(), onAnimationEnd);
+        } else {
+            toRemove.hide(previous.sharedElements.getToElements(), onAnimationEnd);
         }
     }
 

android/app/src/main/java/com/reactnativenavigation/utils/ArrayUtils.java

@@ -0,0 +1,15 @@
+package com.reactnativenavigation.utils;
+
+import java.util.Arrays;
+
+public class ArrayUtils {
+    public static float[] reverse(float[] array) {
+        float[] result = Arrays.copyOf(array, array.length);
+        for(int i = 0; i < result.length / 2; i++) {
+            float temp = result[i];
+            result[i] = result[result.length - i - 1];
+            result[result.length - i - 1] = temp;
+        }
+        return result;
+    }
+}

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

@@ -1,26 +1,34 @@
 package com.reactnativenavigation.utils;
 
 import android.content.Context;
+import android.content.res.Resources;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffColorFilter;
 import android.graphics.drawable.Drawable;
 import android.os.Build;
 import android.support.annotation.Nullable;
+import android.text.SpannableString;
+import android.text.Spanned;
+import android.text.SpannedString;
+import android.text.style.ForegroundColorSpan;
 import android.util.DisplayMetrics;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewParent;
 import android.view.ViewTreeObserver;
 import android.view.WindowManager;
+import android.widget.TextView;
 
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.params.AppStyle;
 import com.reactnativenavigation.screens.Screen;
+import com.reactnativenavigation.views.utils.Point;
 
 import java.util.concurrent.atomic.AtomicInteger;
 
 public class ViewUtils {
     private static final AtomicInteger viewId = new AtomicInteger(1);
+    private static int statusBarHeight = -1;
 
     public static void runOnPreDraw(final View view, final Runnable task) {
         view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@@ -49,7 +57,7 @@ public class ViewUtils {
 
     public static float convertPixelToSp(float pixels) {
         float scaledDensity = NavigationApplication.instance.getResources().getDisplayMetrics().scaledDensity;
-        return pixels/scaledDensity;
+        return pixels / scaledDensity;
     }
 
     public static float convertSpToPixel(float pixels) {
@@ -91,11 +99,13 @@ public class ViewUtils {
     /**
      * Returns the first instance of clazz in root
      */
-    @Nullable public static <T> T findChildByClass(ViewGroup root, Class clazz) {
+    @Nullable
+    public static <T> T findChildByClass(ViewGroup root, Class clazz) {
         return findChildByClass(root, clazz, null);
     }
 
-    @Nullable public static <T> T findChildByClass(ViewGroup root, Class clazz, Matcher<T> matcher) {
+    @Nullable
+    public static <T> T findChildByClass(ViewGroup root, Class clazz, Matcher<T> matcher) {
         for (int i = 0; i < root.getChildCount(); i++) {
             View view = root.getChildAt(i);
             if (clazz.isAssignableFrom(view.getClass())) {
@@ -147,5 +157,32 @@ public class ViewUtils {
         }
         return findParentScreen(parent.getParent());
     }
-}
 
+    public static Point getLocationOnScreen(View view) {
+        int[] xy = new int[2];
+        view.getLocationOnScreen(xy);
+        xy[1] -= getStatusBarPixelHeight();
+        return new Point(xy[0], xy[1]);
+    }
+
+    private static int getStatusBarPixelHeight() {
+        if (statusBarHeight > 0) {
+            return statusBarHeight;
+        }
+        final Resources resources = NavigationApplication.instance.getResources();
+        final int resourceId = resources.getIdentifier("status_bar_height", "dimen", "android");
+        statusBarHeight = resourceId > 0 ?
+                resources.getDimensionPixelSize(resourceId) :
+                (int) convertDpToPixel(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M ? 24 : 25);
+        return statusBarHeight;
+    }
+
+    public static ForegroundColorSpan[] getForegroundColorSpans(TextView view) {
+        SpannedString text = (SpannedString) view.getText();
+        return text.getSpans(0, text.length(), ForegroundColorSpan.class);
+    }
+
+    public static void setSpanColor(SpannableString span, int color) {
+        span.setSpan(new ForegroundColorSpan(color), 0, span.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/utils/ViewVisibilityChecker.java

@@ -0,0 +1,22 @@
+package com.reactnativenavigation.utils;
+
+import android.view.View;
+
+import com.reactnativenavigation.views.ContentView;
+
+public class ViewVisibilityChecker {
+
+    public static boolean check(View view) {
+        final int top = getTopRelativeToContentView(view);
+        final int scrollYInScreen = getScrollYInScreen(view);
+        return top + view.getHeight() > scrollYInScreen;
+    }
+
+    private static int getTopRelativeToContentView(View view) {
+        return view instanceof ContentView ? 0 : view.getTop() + getTopRelativeToContentView((View) view.getParent());
+    }
+
+    private static int getScrollYInScreen(View view) {
+        return view instanceof ContentView ? 0 : view.getScrollY() + getScrollYInScreen((View) view.getParent());
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/managers/SharedElementTransitionManager.java

@@ -0,0 +1,66 @@
+package com.reactnativenavigation.views.managers;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.reactnativenavigation.views.sharedElementTransition.SharedElementTransition;
+
+public class SharedElementTransitionManager extends ViewGroupManager<SharedElementTransition> {
+
+    @Override
+    public String getName() {
+        return "SharedElementTransition";
+    }
+
+    @Override
+    protected SharedElementTransition createViewInstance(ThemedReactContext reactContext) {
+        return new SharedElementTransition(reactContext);
+    }
+
+    @ReactProp(name = "sharedElementId")
+    public void setSharedElementId(SharedElementTransition elementTransition, String key) {
+        elementTransition.registerSharedElementTransition(key);
+    }
+
+    @ReactProp(name = "duration")
+    public void setDuration(SharedElementTransition view, int duration) {
+        view.paramsParser.setDuration(duration);
+    }
+
+    @ReactProp(name = "hideDuration")
+    public void setHideDuration(SharedElementTransition view, int duration) {
+        view.paramsParser.setHideDuration(duration);
+    }
+
+    @ReactProp(name = "showDuration")
+    public void setShowDuration(SharedElementTransition view, int duration) {
+        view.paramsParser.setShowDuration(duration);
+    }
+
+    @ReactProp(name = "showInterpolation")
+    public void setShowInterpolation(SharedElementTransition view, ReadableMap interpolation) {
+        view.paramsParser.setShowInterpolation(interpolation);
+    }
+
+    @ReactProp(name = "hideInterpolation")
+    public void setHideInterpolation(SharedElementTransition view, ReadableMap interpolation) {
+        view.paramsParser.setHideInterpolation(interpolation);
+    }
+
+    @ReactProp(name = "animateClipBounds")
+    public void setAnimateClipBounds(SharedElementTransition view, boolean animateClipBounds) {
+        view.paramsParser.animateClipBounds = animateClipBounds;
+    }
+
+    @Override
+    protected void onAfterUpdateTransaction(SharedElementTransition view) {
+        view.showTransitionParams = view.paramsParser.parseShowTransitionParams();
+        view.hideTransitionParams = view.paramsParser.parseHideTransitionParams();
+    }
+
+    @Override
+    public boolean needsCustomLayoutForChildren() {
+        return true;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/AnimatorValuesResolver.java

@@ -0,0 +1,130 @@
+package com.reactnativenavigation.views.sharedElementTransition;
+
+import android.graphics.Rect;
+import android.widget.TextView;
+
+import com.reactnativenavigation.params.InterpolationParams;
+import com.reactnativenavigation.params.PathInterpolationParams;
+import com.reactnativenavigation.params.parsers.SharedElementTransitionParams;
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.utils.Point;
+
+class AnimatorValuesResolver {
+
+    final Point fromXy;
+    final Point toXy;
+    final float startScaleX;
+    final float endScaleX;
+    final float startScaleY;
+    final float endScaleY;
+    int dx;
+    int dy;
+    int startX;
+    int startY;
+    int endX;
+    int endY;
+    float controlX1;
+    float controlY1;
+    float controlX2;
+    float controlY2;
+    int startColor;
+    int endColor;
+    Rect startDrawingRect = new Rect();
+    Rect endDrawingRect = new Rect();
+
+    AnimatorValuesResolver(SharedElementTransition from, SharedElementTransition to, SharedElementTransitionParams params) {
+        fromXy = calculateFromXY(from, to, params);
+        toXy = calculateToXY(to, from, params);
+        startScaleX = calculateStartScaleX(from, to);
+        endScaleX = calculateEndScaleX(from, to);
+        startScaleY = calculateStartScaleY(from, to);
+        endScaleY = calculateEndScaleY(from, to);
+        calculateColor(from, to);
+        calculate(params.interpolation);
+        calculateDrawingReacts(from, to);
+    }
+
+    private Point calculateFromXY(SharedElementTransition from, SharedElementTransition to, SharedElementTransitionParams params) {
+        Point loc = ViewUtils.getLocationOnScreen(from.getSharedView());
+        if (params.animateClipBounds) {
+            if (from.getHeight() != to.getHeight()) {
+                if (from.getHeight() < to.getHeight()) {
+                    loc.y -= (to.getHeight() - from.getHeight()) / 2;
+                }
+            }
+        }
+        return loc;
+    }
+
+    private Point calculateToXY(SharedElementTransition to, SharedElementTransition from, SharedElementTransitionParams params) {
+        Point loc = ViewUtils.getLocationOnScreen(to.getSharedView());
+        if (params.animateClipBounds) {
+            if (from.getHeight() != to.getHeight()) {
+                if (from.getHeight() > to.getHeight()) {
+                    loc.y -= (from.getHeight() - to.getHeight()) / 2;
+                }
+            }
+        }
+        return loc;
+    }
+
+
+    protected float calculateEndScaleY(SharedElementTransition from, SharedElementTransition to) {
+        return 1;
+    }
+
+    protected float calculateStartScaleY(SharedElementTransition from, SharedElementTransition to) {
+        return ((float) from.getHeight()) / to.getHeight();
+    }
+
+    protected float calculateEndScaleX(SharedElementTransition from, SharedElementTransition to) {
+        return 1;
+    }
+
+    protected float calculateStartScaleX(SharedElementTransition from, SharedElementTransition to) {
+        return ((float) from.getWidth()) / to.getWidth();
+    }
+
+    private void calculate(InterpolationParams interpolation) {
+        calculateDeltas();
+        calculateStartPoint();
+        calculateEndPoint();
+        if (interpolation instanceof PathInterpolationParams) {
+            calculateControlPoints((PathInterpolationParams) interpolation);
+        }
+    }
+
+    protected void calculateDeltas() {
+        dx = fromXy.x - toXy.x;
+        dy = fromXy.y - toXy.y;
+    }
+
+    protected void calculateEndPoint() {
+        endX = 0;
+        endY = 0;
+    }
+
+    protected void calculateStartPoint() {
+        startX = dx;
+        startY = dy;
+    }
+
+    protected void calculateControlPoints(PathInterpolationParams interpolation) {
+        controlX1 = dx * interpolation.p1.x;
+        controlY1 = dy * interpolation.p1.y;
+        controlX2 = dx * interpolation.p2.x;
+        controlY2 = dy * interpolation.p2.y;
+    }
+
+    private void calculateColor(SharedElementTransition from, SharedElementTransition to) {
+        if (from.getSharedView() instanceof TextView && to.getSharedView() instanceof TextView) {
+            startColor = ViewUtils.getForegroundColorSpans((TextView) from.getSharedView())[0].getForegroundColor();
+            endColor = ViewUtils.getForegroundColorSpans((TextView) to.getSharedView())[0].getForegroundColor();
+        }
+    }
+
+    private void calculateDrawingReacts(SharedElementTransition from, SharedElementTransition to) {
+        from.getDrawingRect(startDrawingRect);
+        to.getDrawingRect(endDrawingRect);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/ControlPoint.java

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.views.sharedElementTransition;
+
+import android.support.annotation.Nullable;
+
+public class ControlPoint {
+    public final float x;
+    public final float y;
+
+    public ControlPoint(@Nullable Float x, float defaultX, Float y, float defaultY) {
+        this.x = x == null ? defaultX : x;
+        this.y = y == null ? defaultY : y;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/ReversedAnimatorValuesResolver.java

@@ -0,0 +1,57 @@
+package com.reactnativenavigation.views.sharedElementTransition;
+
+import com.reactnativenavigation.params.PathInterpolationParams;
+import com.reactnativenavigation.params.parsers.SharedElementTransitionParams;
+
+class ReversedAnimatorValuesResolver extends AnimatorValuesResolver {
+
+    ReversedAnimatorValuesResolver(SharedElementTransition from, SharedElementTransition to, SharedElementTransitionParams params) {
+        super(from, to, params);
+    }
+
+    @Override
+    protected void calculateControlPoints(PathInterpolationParams interpolation) {
+        controlX1 = dx * interpolation.p1.x;
+        controlY1 = dy * interpolation.p1.y;
+        controlX2 = dx * interpolation.p2.x;
+        controlY2 = dy * interpolation.p2.y;
+    }
+
+    @Override
+    protected float calculateEndScaleY(SharedElementTransition from, SharedElementTransition to) {
+        return ((float) to.getHeight()) / from.getHeight();
+    }
+
+    @Override
+    protected float calculateStartScaleY(SharedElementTransition from, SharedElementTransition to) {
+        return 1;
+    }
+
+    @Override
+    protected float calculateEndScaleX(SharedElementTransition from, SharedElementTransition to) {
+        return ((float) to.getWidth()) / from.getWidth();
+    }
+
+    @Override
+    protected float calculateStartScaleX(SharedElementTransition from, SharedElementTransition to) {
+        return 1;
+    }
+
+    @Override
+    protected void calculateEndPoint() {
+        endX = dx;
+        endY = dy;
+    }
+
+    @Override
+    protected void calculateStartPoint() {
+        startX = 0;
+        startY = 0;
+    }
+
+    @Override
+    protected void calculateDeltas() {
+        dx = toXy.x - fromXy.x;
+        dy = toXy.y - fromXy.y;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/SharedElementAnimatorCreator.java

@@ -0,0 +1,166 @@
+package com.reactnativenavigation.views.sharedElementTransition;
+
+import android.animation.Animator;
+import android.animation.ObjectAnimator;
+import android.support.annotation.NonNull;
+import android.view.View;
+
+import com.reactnativenavigation.params.InterpolationParams;
+import com.reactnativenavigation.params.PathInterpolationParams;
+import com.reactnativenavigation.params.parsers.SharedElementTransitionParams;
+import com.reactnativenavigation.views.utils.AnimatorPath;
+import com.reactnativenavigation.views.utils.ClipBoundsEvaluator;
+import com.reactnativenavigation.views.utils.ColorUtils;
+import com.reactnativenavigation.views.utils.LabColorEvaluator;
+import com.reactnativenavigation.views.utils.PathEvaluator;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import static android.animation.ObjectAnimator.ofFloat;
+
+class SharedElementAnimatorCreator {
+    private final SharedElementTransition from;
+    private final SharedElementTransition to;
+
+    SharedElementAnimatorCreator(SharedElementTransition from, SharedElementTransition to) {
+        this.from = from;
+        this.to = to;
+    }
+
+    List<Animator> createShow() {
+        return create(new AnimatorValuesResolver(from, to, to.showTransitionParams), to.showTransitionParams);
+    }
+
+    List<Animator> createHide() {
+        return create(new ReversedAnimatorValuesResolver(to, from, to.hideTransitionParams), to.hideTransitionParams);
+    }
+
+    @NonNull
+    private List<Animator> create(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        List<Animator> result = new ArrayList<>();
+        if (shouldAddCurvedMotionAnimator(resolver, params.interpolation)) {
+            result.add(createCurvedMotionAnimator(resolver, params));
+        } else {
+            if (shouldAddLinearMotionXAnimator(resolver, params)) {
+                result.add(createXAnimator(resolver, params));
+            }
+            if (shouldAddLinearMotionYAnimator(resolver, params)) {
+                result.add(createYAnimator(resolver, params));
+            }
+        }
+        if (shouldCreateScaleXAnimator(resolver, params)) {
+            result.add(createScaleXAnimator(resolver, params));
+        }
+        if (shouldCreateScaleYAnimator(resolver, params)) {
+            result.add(createScaleYAnimator(resolver, params));
+        }
+        if (shouldCreateColorAnimator(resolver)) {
+            result.add(createColorAnimator(resolver, params.duration));
+        }
+        if (shouldCreateImageClipBoundsAnimator(params)) {
+            result.add(createImageClipBoundsAnimator(resolver, params.duration));
+        }
+        return result;
+    }
+
+    private boolean shouldCreateScaleYAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        return resolver.startScaleY != resolver.endScaleY && !params.animateClipBounds;
+    }
+
+    private boolean shouldCreateScaleXAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        return resolver.startScaleX != resolver.endScaleX && !params.animateClipBounds;
+    }
+
+    private boolean shouldAddLinearMotionXAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        if (params.animateClipBounds) {
+            return to.getWidth() - from.getWidth() != resolver.dx * 2;
+        } else {
+            return resolver.dx != 0;
+        }
+    }
+
+    private boolean shouldAddLinearMotionYAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        if (params.animateClipBounds) {
+            return to.getHeight() - from.getHeight() != resolver.dy * 2;
+        } else {
+            return resolver.dy != 0;
+        }
+    }
+
+    private boolean shouldAddCurvedMotionAnimator(AnimatorValuesResolver resolver, InterpolationParams interpolation) {
+        return interpolation instanceof PathInterpolationParams && (resolver.dx != 0 || resolver.dy != 0);
+    }
+
+    private boolean shouldCreateColorAnimator(AnimatorValuesResolver resolver) {
+        return resolver.startColor != resolver.endColor;
+    }
+
+    private boolean shouldCreateImageClipBoundsAnimator(SharedElementTransitionParams params) {
+        return params.animateClipBounds;
+    }
+
+    private ObjectAnimator createCurvedMotionAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        AnimatorPath path = new AnimatorPath();
+        path.moveTo(resolver.startX, resolver.startY);
+        path.curveTo(resolver.controlX1, resolver.controlY1, resolver.controlX2, resolver.controlY2, resolver.endX, resolver.endY);
+        ObjectAnimator animator = ObjectAnimator.ofObject(
+                to,
+                "curvedMotion",
+                new PathEvaluator(),
+                path.getPoints().toArray());
+        animator.setInterpolator(params.interpolation.easing.getInterpolator());
+        animator.setDuration(params.duration);
+        return animator;
+    }
+
+    private ObjectAnimator createXAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        ObjectAnimator animator = ofFloat(to.getSharedView(), View.TRANSLATION_X, resolver.startX, resolver.endX)
+                .setDuration(params.duration);
+        animator.setInterpolator(params.interpolation.easing.getInterpolator());
+        return animator;
+    }
+
+    private ObjectAnimator createYAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        ObjectAnimator animator = ofFloat(to.getSharedView(), View.TRANSLATION_Y, resolver.startY, resolver.endY)
+                .setDuration(params.duration);
+        animator.setInterpolator(params.interpolation.easing.getInterpolator());
+        return animator;
+    }
+
+    private ObjectAnimator createScaleXAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        to.getSharedView().setPivotX(0);
+        ObjectAnimator animator = ofFloat(to.getSharedView(), View.SCALE_X, resolver.startScaleX, resolver.endScaleX)
+                .setDuration(params.duration);
+        animator.setInterpolator(params.interpolation.easing.getInterpolator());
+        return animator;
+    }
+
+    private ObjectAnimator createScaleYAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        to.getSharedView().setPivotY(0);
+        ObjectAnimator animator = ofFloat(to.getSharedView(), View.SCALE_Y, resolver.startScaleY, resolver.endScaleY)
+                .setDuration(params.duration);
+        animator.setInterpolator(params.interpolation.easing.getInterpolator());
+        return animator;
+    }
+
+    private ObjectAnimator createColorAnimator(AnimatorValuesResolver resolver, int duration) {
+        return ObjectAnimator.ofObject(
+                to,
+                "textColor",
+                new LabColorEvaluator(),
+                ColorUtils.colorToLAB(resolver.startColor),
+                ColorUtils.colorToLAB(resolver.endColor))
+                .setDuration(duration);
+    }
+
+    private ObjectAnimator createImageClipBoundsAnimator(AnimatorValuesResolver resolver, int duration) {
+        return ObjectAnimator.ofObject(
+                to,
+                "clipBounds",
+                new ClipBoundsEvaluator(),
+                resolver.startDrawingRect,
+                resolver.endDrawingRect)
+                .setDuration(duration);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/SharedElementTransition.java

@@ -0,0 +1,169 @@
+package com.reactnativenavigation.views.sharedElementTransition;
+
+import android.content.Context;
+import android.graphics.Rect;
+import android.os.Build;
+import android.support.annotation.Keep;
+import android.text.SpannableString;
+import android.text.SpannedString;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.ViewManager;
+import android.widget.FrameLayout;
+import android.widget.RelativeLayout;
+import android.widget.TextView;
+
+import com.facebook.react.views.image.ReactImageView;
+import com.reactnativenavigation.params.parsers.SharedElementParamsParser;
+import com.reactnativenavigation.params.parsers.SharedElementTransitionParams;
+import com.reactnativenavigation.react.ReactViewHacks;
+import com.reactnativenavigation.screens.Screen;
+import com.reactnativenavigation.utils.Task;
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.utils.ColorUtils;
+import com.reactnativenavigation.views.utils.PathPoint;
+import com.reactnativenavigation.views.utils.Point;
+
+public class SharedElementTransition extends FrameLayout {
+    public ViewGroup.LayoutParams childLayoutParams;
+
+    public SharedElementParamsParser paramsParser = new SharedElementParamsParser();
+    public SharedElementTransitionParams showTransitionParams;
+    public SharedElementTransitionParams hideTransitionParams;
+    private View child;
+    private int childLeft;
+    private int childTop;
+    private int childWidth = -1;
+    private int childHeight = -1;
+    private SpannableString spannableText;
+    private SpannedString spannedText;
+
+    public View getSharedView() {
+        return child;
+    }
+
+    public SharedElementTransition(Context context) {
+        super(context);
+    }
+
+    public void registerSharedElementTransition(final String key) {
+        ViewUtils.runOnPreDraw(this, new Runnable() {
+            @Override
+            public void run() {
+                ViewUtils.performOnParentScreen(SharedElementTransition.this, new Task<Screen>() {
+                    @Override
+                    public void run(Screen screen) {
+                        screen.registerSharedElement(SharedElementTransition.this, key);
+                    }
+                });
+            }
+        });
+    }
+
+    @Override
+    public void onViewAdded(final View child) {
+        if (child instanceof ReactImageView && this.child == null) {
+            ReactViewHacks.disableReactImageViewRemoteImageFadeInAnimation((ReactImageView) child);
+        }
+        this.child = child;
+        if (child instanceof TextView) {
+            saveTextViewSpannedText((TextView) child);
+        }
+        super.onViewAdded(child);
+    }
+
+    private void saveTextViewSpannedText(final TextView view) {
+        ViewUtils.runOnPreDraw(view, new Runnable() {
+            @Override
+            public void run() {
+                if (spannableText == null) {
+                    spannedText = (SpannedString) view.getText();
+                }
+                if (spannableText == null) {
+                    spannableText = new SpannableString(spannedText);
+                }
+            }
+        });
+    }
+
+    @Keep
+    public void setCurvedMotion(PathPoint xy) {
+        child.setTranslationX(xy.mX);
+        child.setTranslationY(xy.mY);
+    }
+
+    @Keep
+    public void setTextColor(double[] color) {
+        if (child instanceof TextView) {
+            ViewUtils.setSpanColor(spannableText, ColorUtils.labToColor(color));
+            ((TextView) child).setText(spannableText);
+        }
+    }
+
+    @Keep
+    public void setClipBounds(Rect clipBounds) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2) {
+            child.setClipBounds(clipBounds);
+        }
+    }
+
+    public void attachChildToScreen() {
+        ViewUtils.performOnParentScreen(this, new Task<Screen>() {
+            @Override
+            public void run(Screen screen) {
+                saveChildParams(child);
+                Point childLocationInScreen = ViewUtils.getLocationOnScreen(child);
+
+                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(childWidth, childHeight);
+                removeView(child);
+                lp.leftMargin = childLocationInScreen.x;
+                lp.topMargin = childLocationInScreen.y;
+
+                screen.addView(child, lp);
+            }
+
+            private void saveChildParams(final View child) {
+                childLayoutParams = child.getLayoutParams();
+                childLeft = child.getLeft();
+                childTop = child.getTop();
+                if (childWidth == -1) {
+                    childWidth = child.getWidth();
+                }
+                if (childHeight == -1) {
+                    childHeight = child.getHeight();
+                }
+            }
+        });
+    }
+
+    public void attachChildToSelf() {
+        ((ViewManager) child.getParent()).removeView(child);
+        child.setLeft(childLeft);
+        child.setTop(childTop);
+        restoreTextViewSpannedText();
+        addView(child, new LayoutParams(childLayoutParams));
+    }
+
+    private void restoreTextViewSpannedText() {
+        if (child instanceof TextView) {
+            ((TextView) child).setText(spannedText);
+            spannedText = null;
+            spannableText = null;
+        }
+    }
+
+    public void show() {
+        setVisibility(VISIBLE);
+        ViewUtils.runOnPreDraw(child, new Runnable() {
+            @Override
+            public void run() {
+                child.setAlpha(1);
+            }
+        });
+    }
+
+    public void hide() {
+        setVisibility(INVISIBLE);
+        child.setAlpha(0);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/SharedElements.java

@@ -0,0 +1,143 @@
+package com.reactnativenavigation.views.sharedElementTransition;
+
+import android.view.View;
+
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.utils.ViewVisibilityChecker;
+
+import java.util.HashMap;
+import java.util.Iterator;
+import java.util.Map;
+import java.util.concurrent.atomic.AtomicInteger;
+
+public class SharedElements {
+    // These need to be weak references or better yet - clear them in `onViewRemoved`
+    Map<String, SharedElementTransition> toElements;
+    private Map<String, SharedElementTransition> fromElements;
+
+    public void setFromElements(Map<String, SharedElementTransition> fromElements) {
+        this.fromElements.clear();
+        for (String fromElementKey : fromElements.keySet()) {
+            if (toElements.containsKey(fromElementKey)) {
+                this.fromElements.put(fromElementKey, fromElements.get(fromElementKey));
+            }
+        }
+    }
+
+    public void setToElements(Map<String, SharedElementTransition> toElements) {
+        this.toElements.clear();
+        for (String toElementKey : toElements.keySet()) {
+            if (fromElements.containsKey(toElementKey)) {
+                this.toElements.put(toElementKey, toElements.get(toElementKey));
+            }
+        }
+    }
+
+    public Map<String, SharedElementTransition> getToElements() {
+        return toElements;
+    }
+
+    SharedElementTransition getFromElement(String key) {
+        return fromElements.get(key);
+    }
+
+    SharedElementTransition getToElement(String key) {
+        return toElements.get(key);
+    }
+
+    public void addToElement(SharedElementTransition sharedElement, String key) {
+        toElements.put(key, sharedElement);
+    }
+
+    public SharedElements() {
+        toElements = new HashMap<>();
+        this.fromElements = new HashMap<>();
+    }
+
+    void performWhenChildViewsAreDrawn(final Runnable onReady) {
+        final AtomicInteger latch = new AtomicInteger(toElements.size());
+        for (SharedElementTransition toElement : toElements.values()) {
+            ViewUtils.runOnPreDraw(toElement.getSharedView(), new Runnable() {
+                @Override
+                public void run() {
+                    if (latch.decrementAndGet() == 0) {
+                        onReady.run();
+                    }
+                }
+            });
+        }
+    }
+
+    void attachChildViewsToScreen() {
+        for (SharedElementTransition toElement : toElements.values()) {
+            toElement.attachChildToScreen();
+        }
+    }
+
+    void hideToElements() {
+        for (SharedElementTransition toElement : toElements.values()) {
+            toElement.hide();
+        }
+    }
+
+    void showToElements(final Runnable onReady) {
+        final AtomicInteger latch = new AtomicInteger(toElements.size());
+        for (final SharedElementTransition toElement : toElements.values()) {
+            toElement.show();
+            ViewUtils.runOnPreDraw(toElement, new Runnable() {
+                @Override
+                public void run() {
+                    if (latch.decrementAndGet() == 0) {
+                        onReady.run();
+                    }
+                }
+            });
+        }
+    }
+
+    void onShowAnimationEnd() {
+        for (SharedElementTransition toElement : toElements.values()) {
+            toElement.attachChildToSelf();
+        }
+    }
+
+    void hideFromElements() {
+        for (final SharedElementTransition fromElement : fromElements.values()) {
+            fromElement.post(new Runnable() {
+                @Override
+                public void run() {
+                    fromElement.setVisibility(View.INVISIBLE);
+                }
+            });
+        }
+    }
+
+    void showToElements() {
+        for (SharedElementTransition toElement : toElements.values()) {
+            toElement.setVisibility(View.VISIBLE);
+        }
+    }
+
+    void onHideAnimationStart() {
+        for (SharedElementTransition fromElement : fromElements.values()) {
+            fromElement.attachChildToScreen();
+            fromElement.getSharedView().setAlpha(1);
+        }
+    }
+
+    public void destroy() {
+        toElements.clear();
+        fromElements.clear();
+    }
+
+    public void removeHiddenElements() {
+        Iterator<String> iterator = toElements.keySet().iterator();
+        while (iterator.hasNext()) {
+            String key = iterator.next();
+            if (!ViewVisibilityChecker.check(toElements.get(key))) {
+                iterator.remove();
+                fromElements.get(key).show();
+            }
+        }
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/SharedElementsAnimator.java

@@ -0,0 +1,84 @@
+package com.reactnativenavigation.views.sharedElementTransition;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class SharedElementsAnimator {
+    private final SharedElements sharedElements;
+
+    public SharedElementsAnimator(SharedElements sharedElements) {
+        this.sharedElements = sharedElements;
+    }
+
+    public void show(final Runnable onAnimationEnd) {
+        sharedElements.hideToElements();
+        sharedElements.performWhenChildViewsAreDrawn(new Runnable()  {
+            @Override
+            public void run() {
+                final AnimatorSet animatorSet = createAnimatorSet();
+                sharedElements.attachChildViewsToScreen();
+                sharedElements.showToElements(new Runnable() {
+                    @Override
+                    public void run() {
+                        sharedElements.hideFromElements();
+                        animatorSet.start();
+                    }
+                });
+            }
+
+            private AnimatorSet createAnimatorSet() {
+                final AnimatorSet animatorSet = new AnimatorSet();
+                animatorSet.playTogether(createTransitionAnimators());
+                animatorSet.addListener(new AnimatorListenerAdapter() {
+                    @Override
+                    public void onAnimationEnd(Animator animation) {
+                        sharedElements.onShowAnimationEnd();
+                        onAnimationEnd.run();
+                    }
+
+                    @Override
+                    public void onAnimationCancel(Animator animation) {
+                        sharedElements.onShowAnimationEnd();
+                    }
+                });
+                return animatorSet;
+            }
+
+            private List<Animator> createTransitionAnimators() {
+                List<Animator> result = new ArrayList<>();
+                for (String key : sharedElements.toElements.keySet()) {
+                    SharedElementTransition toElement = sharedElements.getToElement(key);
+                    SharedElementTransition fromElement = sharedElements.getFromElement(key);
+                    result.addAll(new SharedElementAnimatorCreator(fromElement, toElement).createShow());
+                }
+                return result;
+            }
+        });
+    }
+
+    public void hide(final Runnable onAnimationEnd) {
+        AnimatorSet animatorSet = new AnimatorSet();
+        animatorSet.playTogether(createHideTransitionAnimators());
+        animatorSet.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                sharedElements.showToElements();
+                onAnimationEnd.run();
+            }
+        });
+        sharedElements.onHideAnimationStart();
+        animatorSet.start();
+    }
+
+    private List<Animator> createHideTransitionAnimators() {
+        List<Animator> result = new ArrayList<>();
+        for (String key : sharedElements.toElements.keySet()) {
+            result.addAll(new SharedElementAnimatorCreator(sharedElements.getToElement(key), sharedElements.getFromElement(key)).createHide());
+        }
+        return result;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/utils/AnimatorPath.java

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2013 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.reactnativenavigation.views.utils;
+
+import java.util.ArrayList;
+import java.util.Collection;
+
+/**
+ * A simple Path object that holds information about the points along
+ * a path. The API allows you to specify a move location (which essentially
+ * jumps from the previous point in the path to the new one), a line location
+ * (which creates a line segment from the previous location) and a curve
+ * location (which creates a B�zier curve from the previous location).
+ */
+public class AnimatorPath {
+
+    // The points in the path
+    ArrayList<PathPoint> mPoints = new ArrayList<PathPoint>();
+    /**
+     * Move from the current path point to the new one
+     * specified by x and y. This will create a discontinuity if this point is
+     * neither the first point in the path nor the same as the previous point
+     * in the path.
+     */
+    public void moveTo(float x, float y) {
+        mPoints.add(PathPoint.moveTo(x, y));
+    }
+    /**
+     * Create a straight line from the current path point to the new one
+     * specified by x and y.
+     */
+    public void lineTo(float x, float y) {
+        mPoints.add(PathPoint.lineTo(x, y));
+    }
+    /**
+     * Create a quadratic B�zier curve from the current path point to the new one
+     * specified by x and y. The curve uses the current path location as the first anchor
+     * point, the control points (c0X, c0Y) and (c1X, c1Y), and (x, y) as the end anchor.
+     */
+    public void curveTo(float c0X, float c0Y, float c1X, float c1Y, float x, float y) {
+        mPoints.add(PathPoint.curveTo(c0X, c0Y, c1X, c1Y, x, y));
+    }
+    /**
+     * Returns a Collection of PathPoint objects that describe all points in the path.
+     */
+    public Collection<PathPoint> getPoints() {
+        return mPoints;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/utils/ClipBoundsEvaluator.java

@@ -0,0 +1,49 @@
+package com.reactnativenavigation.views.utils;
+
+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.top = (int) (Math.abs(toHeight - fromHeight) / 2 * (1 - ratio));
+                result.bottom = toHeight- result.top;
+            } else {
+                result.top = (int) (Math.abs(toHeight - fromHeight) / 2 * ratio);
+                result.bottom = fromHeight - result.top;
+            }
+        }
+
+        if (toWidth == fromWidth) {
+            result.right = toWidth;
+        } else {
+            if (toWidth > fromWidth) {
+                result.left = (int) (Math.abs(toWidth - fromWidth) / 2 * (1 - ratio));
+                result.right = toWidth - result.left;
+            } else {
+                result.left = (int) (Math.abs(toWidth - fromWidth) / 2 * ratio);
+                result.right = fromWidth - result.left;
+            }
+        }
+        return result;
+    }
+
+    private void sync(Rect from, Rect to) {
+        fromWidth = from.right;
+        fromHeight = from.bottom;
+        toWidth = to.right;
+        toHeight = to.bottom;
+    }
+}

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

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.views.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]);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/utils/LabColorEvaluator.java

@@ -0,0 +1,14 @@
+package com.reactnativenavigation.views.utils;
+
+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;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/utils/PathEvaluator.java

@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2013 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.reactnativenavigation.views.utils;
+
+import android.animation.TypeEvaluator;
+
+/**
+ * This evaluator interpolates between two PathPoint values given the value t, the
+ * proportion traveled between those points. The value of the interpolation depends
+ * on the operation specified by the endValue (the operation for the interval between
+ * PathPoints is always specified by the end point of that interval).
+ */
+public class PathEvaluator implements TypeEvaluator<PathPoint> {
+    @Override
+    public PathPoint evaluate(float t, PathPoint startValue, PathPoint endValue) {
+        float x, y;
+        if (endValue.mOperation == PathPoint.CURVE) {
+            float oneMinusT = 1 - t;
+            x = oneMinusT * oneMinusT * oneMinusT * startValue.mX +
+                3 * oneMinusT * oneMinusT * t * endValue.mControl0X +
+                3 * oneMinusT * t * t * endValue.mControl1X +
+                t * t * t * endValue.mX;
+            y = oneMinusT * oneMinusT * oneMinusT * startValue.mY +
+                3 * oneMinusT * oneMinusT * t * endValue.mControl0Y +
+                3 * oneMinusT * t * t * endValue.mControl1Y +
+                t * t * t * endValue.mY;
+        } else if (endValue.mOperation == PathPoint.LINE) {
+            x = startValue.mX + t * (endValue.mX - startValue.mX);
+            y = startValue.mY + t * (endValue.mY - startValue.mY);
+        } else {
+            x = endValue.mX;
+            y = endValue.mY;
+        }
+        return PathPoint.moveTo(x, y);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/utils/PathPoint.java

@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2013 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.reactnativenavigation.views.utils;
+
+/**
+ * A class that holds information about a location and how the path should get to that
+ * location from the previous path location (if any). Any PathPoint holds the information for
+ * its location as well as the instructions on how to traverse the preceding interval from the
+ * previous location.
+ */
+public class PathPoint {
+    /**
+     * The possible path operations that describe how to move from a preceding PathPoint to the
+     * location described by this PathPoint.
+     */
+    public static final int MOVE = 0;
+    public static final int LINE = 1;
+    public static final int CURVE = 2;
+    /**
+     * The location of this PathPoint
+     */
+    public float mX;
+    public float mY;
+
+    /**
+     * The first control point, if any, for a PathPoint of type CURVE
+     */
+    float mControl0X, mControl0Y;
+    /**
+     * The second control point, if any, for a PathPoint of type CURVE
+     */
+    float mControl1X, mControl1Y;
+    /**
+     * The motion described by the path to get from the previous PathPoint in an AnimatorPath
+     * to the location of this PathPoint. This can be one of MOVE, LINE, or CURVE.
+     */
+    int mOperation;
+    /**
+     * Line/Move constructor
+     */
+    private PathPoint(int operation, float x, float y) {
+        mOperation = operation;
+        mX = x;
+        mY = y;
+    }
+    /**
+     * Curve constructor
+     */
+    private PathPoint(float c0X, float c0Y, float c1X, float c1Y, float x, float y) {
+        mControl0X = c0X;
+        mControl0Y = c0Y;
+        mControl1X = c1X;
+        mControl1Y = c1Y;
+        mX = x;
+        mY = y;
+        mOperation = CURVE;
+    }
+    /**
+     * Constructs and returns a PathPoint object that describes a line to the given xy location.
+     */
+    public static PathPoint lineTo(float x, float y) {
+        return new PathPoint(LINE, x, y);
+    }
+    /**
+     * Constructs and returns a PathPoint object that describes a curve to the given xy location
+     * with the control points at c0 and c1.
+     */
+    public static PathPoint curveTo(float c0X, float c0Y, float c1X, float c1Y, float x, float y) {
+        return new PathPoint(c0X,  c0Y, c1X, c1Y, x, y);
+    }
+
+    /**
+     * Constructs and returns a PathPoint object that describes a discontinuous move to the given
+     * xy location.
+     */
+    public static PathPoint moveTo(float x, float y) {
+        return new PathPoint(MOVE, x, y);
+    }
+}
+

android/app/src/main/java/com/reactnativenavigation/views/utils/Point.java

@@ -0,0 +1,11 @@
+package com.reactnativenavigation.views.utils;
+
+public class Point {
+    public int x;
+    public int y;
+
+    public Point(int x, int y) {
+        this.x = x;
+        this.y = y;
+    }
+}

example/android/app/proguard-rules.pro

@@ -35,7 +35,7 @@
 
 -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
   void set*(***);
-  *** get*();
+  *** withOrder*();
 }
 
 -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }

example/index.android.js

@@ -1 +1,2 @@
+__STRESS_TEST__ = false;
 import App from './src/app';

example/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react-native": "0.41.2",
     "react": "15.4.2",
+    "react-native-animatable": "^1.1.0",
     "react-native-navigation": "file:../"
   },
   "devDependencies": {

example/src/app.js

@@ -9,6 +9,18 @@ registerScreens();
 
 const createTabs = () => {
   let tabs = [
+    {
+      label: 'Card',
+      screen: 'example.CardScreen',
+      icon: require('../img/list.png'),
+      title: 'Shared Element Transition'
+    },
+    {
+      label: 'SET',
+      screen: 'example.ListScreen',
+      icon: require('../img/list.png'),
+      title: 'Shared Element Transition'
+    },
     {
       label: 'One',
       screen: 'example.FirstTabScreen',

example/src/screens/index.android.js

@@ -9,6 +9,10 @@ import ModalScreen from './ModalScreen';
 import CollapsingTopBarScreen from './CollapsingTopBarScreen';
 import InAppNotification from './InAppNotification';
 import LightBoxScreen from './LightBoxScreen';
+import ListScreen from './set/ListScreen';
+import HeroScreen from './set/HeroScreen';
+import CardScreen from './set/CardScreen';
+import InfoScreen from './set/InformationScreen';
 
 // register all screens of the app (including internal ones)
 export function registerScreens() {
@@ -21,4 +25,8 @@ export function registerScreens() {
   Navigation.registerComponent('example.CollapsingTopBarScreen', () => CollapsingTopBarScreen);
   Navigation.registerComponent('example.InAppNotification', () => InAppNotification);
   Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
+  Navigation.registerComponent('example.ListScreen', () => ListScreen);
+  Navigation.registerComponent('example.HeroScreen', () => HeroScreen);
+  Navigation.registerComponent('example.CardScreen', () => CardScreen);
+  Navigation.registerComponent('example.infoScreen', () => InfoScreen);
 }

example/src/screens/set/CardScreen.js

@@ -0,0 +1,118 @@
+import React, {Component} from 'react';
+import {
+  ScrollView,
+  TouchableWithoutFeedback,
+  TouchableNativeFeedback,
+  StyleSheet,
+  Image,
+  Text,
+  View,
+  Platform,
+  ScrolView
+} from 'react-native';
+import {SharedElementTransition} from 'react-native-navigation';
+import * as Animatable from 'react-native-animatable';
+import * as setStyles from './styles';
+
+const IMAGE_HEIGHT = 190;
+
+export default class CardScreen extends Component {
+  static navigatorStyle = {
+    ...setStyles.navigatorStyle
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <View style={[styles.container]}>
+          {this._renderCard(0)}
+          {this._renderCard(1)}
+          {this._renderCard(2)}
+        </View>
+      </ScrollView>
+    );
+  }
+
+  _renderCard(index) {
+    return (
+      <View style={styles.cardContainer}>
+        <TouchableWithoutFeedback onPress={() => this._onCardPress(index)}>
+          {this._renderImage(index)}
+        </TouchableWithoutFeedback>
+        <TouchableNativeFeedback onPress={() => this._onCardPress(index)}>
+          {this._renderCardContent()}
+        </TouchableNativeFeedback>
+      </View>
+    );
+  }
+
+  _onCardPress(index) {
+    this.props.navigator.push({
+      screen: 'example.infoScreen',
+      _title: 'Shared Element Transition',
+      sharedElements: [`image${index}`],
+      animated: false,
+      overrideBackPress: true,
+      passProps: {
+        sharedImageId: `image${index}`
+      }
+    })
+  }
+
+  _renderImage(index) {
+    return (
+      <SharedElementTransition
+        style={styles.imageContainer}
+        sharedElementId={`image${index}`}
+      >
+        <Image
+          style={styles.image}
+          source={require('../../../img/beach.jpg')}
+        />
+      </SharedElementTransition>
+    );
+  }
+
+  _renderCardContent() {
+    return (
+      <View style={styles.cardContentContainer}>
+        <Text style={styles.title}>This is a title</Text>
+        <Text>This is a very long long long long long long long long long long content</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 16,
+    marginHorizontal: 8,
+  },
+  cardContainer: {
+    marginVertical: 8,
+    elevation: 2,
+    borderRadius: 2,
+    backgroundColor: '#F5F5F5'
+  },
+  imageContainer: {
+    justifyContent: 'flex-start'
+  },
+  image: {
+    height: IMAGE_HEIGHT,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2
+  },
+  cardContentContainer: {
+    padding: 8
+  },
+  title: {
+    fontWeight: '500',
+    paddingBottom: 8,
+    fontSize: 17
+  }
+});

example/src/screens/set/HeroScreen.js

@@ -0,0 +1,216 @@
+import React, {Component} from 'react';
+import {
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  Text,
+  View,
+  ScrolView
+} from 'react-native';
+import {SharedElementTransition} from 'react-native-navigation';
+import * as Animatable from 'react-native-animatable';
+import * as heroStyles from './styles';
+
+const FADE_DURATION = 500;
+const SHOW_DURATION = 500;
+const HIDE_DURATION = 500;
+
+const HEADER_HEIGHT = 120;
+const ICON_MARGIN = 24;
+
+export default class HeroScreen extends Component {
+  static navigatorStyle = {
+    ...heroStyles.navigatorStyle
+  };
+
+  constructor(props) {
+    super(props);
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+    this.state = {
+      animationType: 'fadeIn'
+    }
+  }
+
+  componentDidMount() {
+    if (__STRESS_TEST__) {
+      setTimeout(() => {
+        this.setState({
+          animationType: 'fadeOut'
+        });
+        this.props.navigator.pop();
+      }, 650);
+    }
+  }
+
+  render() {
+    return (
+      <ScrollView style={[styles.container]}>
+        {this._renderHeader()}
+        {this._renderContent()}
+      </ScrollView>
+    );
+  }
+
+  _renderHeader() {
+    return (
+        <Animatable.View
+          animation={this.state.animationType}
+          duration={FADE_DURATION}
+          style={[styles.header, {backgroundColor: this.props.primaryColor}]}
+          useNativeDriver={true}
+        >
+          <View style={{height: ICON_MARGIN, flexDirection: 'row', backgroundColor: 'white'}}/>
+          <View style={{flex: 1, flexDirection: 'row'}}>
+            {this._renderIcon()}
+            {this._renderTitle()}
+          </View>
+      </Animatable.View>
+    );
+  }
+
+  _renderTitle() {
+    return (
+      <View style={{alignSelf: 'flex-end'}}>
+        <SharedElementTransition
+          style={styles.titleContainer}
+          sharedElementId={this.props.sharedTitleId}
+          showDuration={SHOW_DURATION}
+          hideDuration={HIDE_DURATION}
+          showInterpolation={
+                {
+                  type: 'path',
+                  controlX1: '0.5',
+                  controlY1: '1',
+                  controlX2: '0',
+                  controlY2: '0.5',
+                  easing: 'FastOutSlowIn'
+                }
+              }
+          hideInterpolation={
+                {
+                  type: 'path',
+                  controlX1: '0.5',
+                  controlY1: '0',
+                  controlX2: '1',
+                  controlY2: '0.5',
+                  easing:'FastOutSlowIn'
+                }
+              }
+        >
+          <Text style={[styles.title, {color: this.props.titleColor}]}>{this.props.title}</Text>
+        </SharedElementTransition>
+      </View>
+    );
+  }
+
+  _renderContent() {
+    return (
+      <Animatable.View
+        animation={this.state.animationType}
+        duration={FADE_DURATION}
+        style={styles.body}
+        useNativeDriver={true}>
+        <View
+          style={styles.list}
+          initialListSize={20}>
+          {this._genRows()}
+        </View>
+      </Animatable.View>
+    );
+  }
+
+  _genRows() {
+    const children = [];
+    for (let ii = 0; ii < 30; ii++) {
+      children.push(
+        <Text>{'row ' + ii}</Text>
+      );
+    }
+    return children;
+  }
+
+  _renderIcon() {
+    return (
+      <SharedElementTransition
+        sharedElementId={this.props.sharedIconId}
+        style={styles.iconContainer}
+        showDuration={SHOW_DURATION}
+        hideDuration={HIDE_DURATION}
+        showInterpolation={
+          {
+            type: 'path',
+            controlX1: '0.5',
+            controlY1: '1',
+            controlX2: '0',
+            controlY2: '0.5',
+            easing: 'FastOutSlowIn'
+          }
+        }
+        hideInterpolation={
+          {
+            type: 'path',
+            controlX1: '0.5',
+            controlY1: '0',
+            controlX2: '1',
+            controlY2: '0.5',
+            easing:'FastOutSlowIn'
+          }
+        }
+      >
+        <Image
+          source={this.props.icon}
+          style={styles.heroIcon}
+          fadeDuration={0}
+        />
+      </SharedElementTransition>
+    );
+  }
+
+  onNavigatorEvent(event) {
+    if (event.id === 'backPress') {
+      this.setState({
+        animationType: 'fadeOut'
+      });
+      this.props.navigator.pop();
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: 'transparent'
+  },
+  header: {
+    height: 110,
+    flexDirection: 'column-reverse'
+  },
+  titleContainer: {
+    marginLeft: ICON_MARGIN + 90 +  + 16,
+    marginBottom: 8
+  },
+  title: {
+    fontSize: 23,
+    ...heroStyles.textLight
+  },
+  iconContainer: {
+    position: 'absolute',
+    bottom: -ICON_MARGIN,
+    left: ICON_MARGIN
+  },
+  heroIcon: {
+    width: 90,
+    height: 90,
+    resizeMode: 'contain'
+  },
+  body: {
+    flex: 4,
+    backgroundColor: 'white',
+  },
+  list: {
+    marginTop: 16,
+    marginHorizontal: 8
+  }
+});

example/src/screens/set/InformationScreen.js

@@ -0,0 +1,124 @@
+import React, {Component} from 'react';
+import {
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  Text,
+  View,
+  Platform,
+  ScrolView
+} from 'react-native';
+import {SharedElementTransition} from 'react-native-navigation';
+import * as Animatable from 'react-native-animatable';
+import * as setStyles from './styles';
+
+const SHOW_DURATION = 400;
+const HIDE_DURATION = 300;
+
+export default class InfoScreen extends Component {
+  static navigatorStyle = {
+    ...setStyles.navigatorStyle,
+    navBarHideOnScroll: false
+  };
+
+  constructor(props) {
+    super(props);
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+    this.state = {
+      animationType: 'fadeInRight',
+      animationDuration: SHOW_DURATION
+    }
+  }
+
+  onNavigatorEvent(event) {
+    if (event.id === 'backPress') {
+      this.setState({
+        animationType: 'fadeOutRight',
+        animationDuration: HIDE_DURATION
+      });
+      this.props.navigator.pop();
+    }
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        {this._renderImage()}
+        {this._renderContent()}
+      </View>
+    );
+  }
+
+  _renderImage() {
+    return (
+      <SharedElementTransition
+        style={styles.imageContainer}
+        sharedElementId={this.props.sharedImageId}
+        showDuration={SHOW_DURATION}
+        hideDuration={HIDE_DURATION}
+        animateClipBounds={true}
+        showInterpolation={
+          {
+            type: 'linear',
+            easing: 'FastOutSlowIn'
+          }
+        }
+        hideInterpolation={
+        {
+          type: 'linear',
+          easing:'FastOutSlowIn'
+        }
+      }
+      >
+        <Image
+          style={styles.image}
+          source={require('../../../img/beach.jpg')}
+        />
+      </SharedElementTransition>
+    );
+  }
+
+  _renderContent() {
+    return (
+      <Animatable.View
+        style={styles.content}
+        duration={this.state.animationDuration}
+        animation={this.state.animationType}
+        useNativeDriver={true}
+      >
+        <Text style={styles.text}>Line 1</Text>
+        <Text style={styles.text}>Line 2</Text>
+        <Text style={styles.text}>Line 3</Text>
+        <Text style={styles.text}>Line 4</Text>
+        <Text style={styles.text}>Line 5</Text>
+        <Text style={styles.text}>Line 6</Text>
+        <Text style={styles.text}>Line 7</Text>
+        <Text style={styles.text}>Line 8</Text>
+      </Animatable.View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    flex: 1,
+    marginTop: 190,
+    backgroundColor: 'white'
+  },
+  imageContainer: {
+    position: 'absolute',
+    top: 0
+  },
+  image: {
+    height: 190
+  },
+  text: {
+    fontSize: 17,
+    paddingVertical: 4,
+    paddingLeft: 8
+  }
+});

example/src/screens/set/ListScreen.js

@@ -0,0 +1,235 @@
+import React, {Component} from 'react';
+import {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  ListView,
+  Image
+} from 'react-native';
+import heroes from './heroes';
+import {SharedElementTransition} from 'react-native-navigation';
+import * as heroStyles from './styles';
+
+const LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
+const hashCode = function(str) {
+  var hash = 15;
+  for (var ii = str.length - 1; ii >= 0; ii--) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(ii);
+  }
+  return hash;
+};
+
+export default class ListScreen extends Component {
+  static navigatorStyle = {
+    ...heroStyles.navigatorStyle
+  };
+
+  static navigatorButtons = {
+    rightButtons: [
+      {
+        title: 'Add',
+        icon: require('../../../img/navicon_add.png'),
+        id: 'add',
+        showAsAction: 'always'
+      },
+      {
+        title: 'All',
+        id: 'all',
+        showAsAction: 'never'
+      },
+      {
+        title: 'Upcoming',
+        id: 'upcoming',
+        showAsAction: 'never'
+      },
+      {
+        title: 'My',
+        id: 'my',
+        showAsAction: 'never'
+      },
+      {
+        title: 'Participant',
+        id: 'participant',
+        showAsAction: 'never'
+      },
+    ],
+    fab: {
+      collapsedId: 'share',
+      collapsedIcon: require('../../../img/navicon_add.png'),
+      backgroundColor: '#31363c'
+    }
+  };
+
+  constructor(props) {
+    super(props);
+    this._onRowPress = this._onRowPress.bind(this);
+    this._renderRow = this._renderRow.bind(this);
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+    this.onPress = [];
+    this.counter = 0;
+
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    this.state = {
+      dataSource: ds.cloneWithRows(this._genRows({}))
+    }
+  }
+
+  onNavigatorEvent(event) {
+    console.log('ListScreen', 'onNavigatorEvent ', event.id);
+    if (event.id === 'didAppear' && __STRESS_TEST__) {
+      setTimeout(() => {
+        this.onPress[Math.floor((Math.random() * 4))]();
+        console.log('count', this.counter++);
+      }, 750);
+    }
+  }
+
+  render() {
+    return (
+      <ListView
+        dataSource={this.state.dataSource}
+        renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}/>
+    );
+  }
+
+  _renderRow(rowData, sectionID, rowID) {
+    console.log('ListScreen', '_renderRow ', rowID);
+    const rowHash = Math.abs(hashCode(rowData.rowTitle));
+    const sharedIconId = "image" + rowID;
+    const sharedTitleId = "title" + rowID;
+
+    const onPress = () => this._onRowPress({
+      rowData,
+      sharedIconId,
+      sharedTitleId
+    });
+    if (['0', '1', '2', '3'].includes(rowID)) {
+      this.onPress.push(onPress);
+    }
+    return (
+      <TouchableWithoutFeedback
+        style={styles.row}
+        onPress={onPress}
+      >
+        <View style={[styles.sharedRowContent, heroStyles.primaryLight]}>
+          {this._renderRowIcon({rowData, sharedIconId})}
+          {this._renderRowContent({rowData, sharedTitleId, rowHash})}
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  _renderRowIcon({rowData, sharedIconId}) {
+    return (
+      <View>
+        <SharedElementTransition
+          key={sharedIconId}
+          sharedElementId={sharedIconId}
+          style={styles.imageContainer}
+        >
+          <Image
+            source={rowData.icon}
+            style={styles.heroIcon}
+            fadeDuration={0}
+          />
+        </SharedElementTransition>
+      </View>
+    );
+  }
+
+  _renderRowContent({rowData, sharedTitleId, rowHash}) {
+    return (
+      <View style={styles.itemContentContainer}>
+        <SharedElementTransition sharedElementId={sharedTitleId}>
+          <Text style={styles.itemTitle}>{rowData.title}</Text>
+        </SharedElementTransition>
+        <Text style={styles.text}>
+          {rowData.rowTitle + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
+        </Text>
+      </View>
+    );
+  }
+
+  _onRowPress(data) {
+    const {rowData, sharedIconId, sharedTitleId} = data;
+    this.props.navigator.push({
+      screen: 'example.HeroScreen',
+      sharedElements: [
+        data.sharedElementId,
+        data.sharedElementId + 'container'
+      ],
+      animated: false,
+      overrideBackPress: true,
+      passProps: {
+        sharedIconId: sharedIconId,
+        sharedTitleId: sharedTitleId,
+        ...rowData
+      }
+    });
+  }
+
+  _genRows() {
+    const dataBlob = [];
+    for (let ii = 0; ii < 100; ii++) {
+      dataBlob.push({
+        rowTitle: 'Row ' + ii + ' ',
+        icon: heroes[ii % 5].icon,
+        title: heroes[ii % 5].title,
+        primaryColor: heroes[ii % 5].primaryColor,
+        titleColor: heroes[ii % 5].titleColor
+      });
+    }
+    return dataBlob;
+  }
+
+  _renderSeparator(sectionID, rowID) {
+    return (
+      <View
+        key={`${sectionID}-${rowID}`}
+        style={{
+          height: 1,
+          backgroundColor: rowID % 2 == 0 ? '#3B5998' : '#CCCCCC'
+        }}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    padding: 5,
+    height: 110,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  sharedRowContent: {
+    flexDirection: 'row',
+  },
+  imageContainer: {
+    justifyContent: 'center'
+  },
+  heroIcon: {
+    width: 100,
+    height: 100,
+    resizeMode: 'contain'
+  },
+  itemContentContainer: {
+    flex: 1,
+    paddingLeft: 5,
+    flexDirection: 'column',
+    alignItems: 'flex-start'
+  },
+  itemTitle: {
+    fontSize: 19,
+    ...heroStyles.textDark
+  },
+  text: {
+    ...heroStyles.textDark
+  }
+});
+
+

example/src/screens/set/heroes.js

@@ -0,0 +1,34 @@
+import * as heroStyles from './styles';
+
+export default heroes = [
+  {
+    title: 'Bounty Hunter',
+    icon: require('../../../img/heroes/bouny_hunter.png'),
+    primaryColor: '#f0cb3c',
+    titleColor: '#993825'
+  },
+  {
+    title: 'Templar Assasin',
+    icon: require('../../../img/heroes/templar_assasin.png'),
+    primaryColor: '#f6f6f6',
+    titleColor: heroStyles.textDark.color
+  },
+  {
+    title: 'Oracle',
+    icon: require('../../../img/heroes/oracle.png'),
+    primaryColor: '#19b0b9',
+    titleColor: '#a2195b'
+  },
+  {
+    title: 'Earthspirit',
+    icon: require('../../../img/heroes/earthspirit.png'),
+    primaryColor: '#819c97',
+    titleColor: heroStyles.textDark.color
+  },
+  {
+    title: 'Skywrath Mage',
+    icon: require('../../../img/heroes/skywrath_mage.png'),
+    primaryColor: '#dfb42e',
+    titleColor: '#1e5ea6'
+  }
+];

example/src/screens/set/styles.js

@@ -0,0 +1,26 @@
+export const navigatorStyle = {
+  navBarHideOnScroll: true,
+  drawUnderTabBar: true,
+  navBarButtonColor: '#cacaca',
+  navBarBackgroundColor: '#31363c',
+  navBarTextColor: '#cacaca',
+  tabBarBackgroundColor: '#31363c',
+  tabBarButtonColor: '#cacaca',
+  tabBarSelectedButtonColor: '#cacaca'
+};
+
+export const primaryDark = {
+  backgroundColor: '#1f2222'
+};
+
+export const primaryLight = {
+  backgroundColor: '#cacaca'
+};
+
+export const textLight = {
+  color: '#cacaca'
+};
+
+export const textDark = {
+  color: '#1f2222'
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "2.0.0-experimental.0",
+  "version": "2.0.0-legacy.2",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,

src/deprecated/indexDeprecated.android.js

@@ -1,6 +1,8 @@
 import Navigation from './../Navigation';
+import SharedElementTransition from './../views/sharedElementTransition';
 
 module.exports = {
-  Navigation
+  Navigation,
+  SharedElementTransition
 };
 

src/deprecated/platformSpecificDeprecated.android.js

@@ -1,6 +1,6 @@
 /*eslint-disable*/
 import React, {Component} from 'react';
-import {AppRegistry, NativeModules, processColor} from 'react-native';
+import ReactNative, {AppRegistry, NativeModules, processColor} from 'react-native';
 import _ from 'lodash';
 
 import Navigation from './../Navigation';
@@ -73,6 +73,7 @@ function navigatorPush(navigator, params) {
   addNavigationStyleParams(params);
 
   adaptTopTabs(params, params.navigatorID);
+  // findSharedElementsNodeHandles(params);
 
   params.screenId = params.screen;
   let adapted = adaptNavigationStyleToScreenStyle(params);

src/views/sharedElementTransition.js

@@ -0,0 +1,12 @@
+import React, {Component} from 'react';
+import {
+  requireNativeComponent
+} from 'react-native';
+
+const SharedElementTransitionModule = requireNativeComponent('SharedElementTransition', null);
+
+export default class SharedElementTransition extends React.Component {
+  render() {
+    return <SharedElementTransitionModule {...this.props} />;
+  }
+}