v5 (#5931)

Merge v5 into master

Highlights of this release
* Easier installation
* autolink and reac-native link support
* Shared Element Transition - reimplemented from scratch and new API
* [iOS] showModal animation api parity
* [Android] Animation values are now declared in dp
* [iOS] deprecate topBar.drawBehind
* [Android] RNN is migrating to Kotlin

closes #5904

.github/_workflows/gradle-wrapper-validation.yml

@@ -1,10 +0,0 @@
-name: "Validate Gradle Wrapper"
-on: [push, pull_request]
-
-jobs:
-  validation:
-    name: "Validation"
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: gradle/wrapper-validation-action@v1

CHANGELOG.md

@@ -1,24 +1,4 @@
 # Changelog
-# 4.8.1
-## Fixed
-### Android
-* Fix NPE when showing Overlay [#bfde34a](https://github.com/wix/react-native-navigation/commit/bfde34a5862c971587583aa52cb450cf526d5c66) by [guyca](https://github.com/guyca)
-### iOS
-* Fix overlays touch interception on new iPads [#433f48b](https://github.com/wix/react-native-navigation/commit/433f48b59d9be5aa328361654341afa8414c2e21) by [yogevbd](https://github.com/yogevbd)
-
-# 4.8.0
-## Fixed
-### Android
-* Support react-native-youtube [#ffbd288](https://github.com/wix/react-native-navigation/commit/ffbd2882b24109ff8f2b51ca3c8c88822cc9afb7) by [guyca](https://github.com/guyca)
-### iOS
-* Fix wrong SafeAreaView margins when using bottomTabs.drawBehind: true [#527fd49](https://github.com/wix/react-native-navigation/commit/527fd49f2f1517143032a8b14f6ab17d2f74c032) by [yogevbd](https://github.com/yogevbd)
-
-# 4.7.1
-## Fixed
-* Move selectTabOnPress prop to correct interface [#d6ead65](https://github.com/wix/react-native-navigation/commit/d6ead65c9331f12d3f79fc3b5bb7e0a0de80816e) by [phanghos](https://github.com/phanghos)
-### iOS
-* Fix external components layout measurement [#1961181](https://github.com/wix/react-native-navigation/commit/196118186fb788200dafcc1e11cd9f7d6e3f6dda) by [yogevbd](https://github.com/yogevbd)
-
 # 4.7.0
 ## Added
 * On tab press event - handle tab selection in Js [#b153142](https://github.com/wix/react-native-navigation/commit/b1531428a0a9608b5d1c84547f228d5de0c1aca2) by [pontusab](https://github.com/pontusab)

Color+Interpolation.h

@@ -0,0 +1,39 @@
+//
+//  Color+Interpolation.h
+//
+//  Created by Leo Natan on 01/10/2016.
+//  Copyright © 2016 Leo Natan. All rights reserved.
+//
+
+#if __has_include(<UIKit/UIKit.h>) || __has_include(<AppKit/AppKit.h>)
+
+#import "LNInterpolable.h"
+
+#if __has_include(<UIKit/UIKit.h>)
+#import <UIKit/UIKit.h>
+#else
+#import <AppKit/AppKit.h>
+#endif
+
+/**
+ Interpolate using the LAB color space for optimal quality. This constant is equal to @c LNUseDefaultInterpolationBehavior.
+ */
+extern LNInterpolationBehavior const LNInterpolationBehaviorUseLABColorSpace;
+
+/**
+ Interpolate using the RGB color space.
+ */
+extern LNInterpolationBehavior const LNInterpolationBehaviorUseRGBColorSpace;
+
+/**
+ Interpolates between colors.
+ 
+ By default, colors are interpolated in the Lab color space for optimal quality at the expense of some performance. Use @c LNUseRGBInterpolationBehavior for better performance but suboptimal quality.
+ */
+#if __has_include(<UIKit/UIKit.h>)
+@interface UIColor (LNInterpolation) <LNInterpolable> @end
+#else
+@interface NSColor (LNInterpolation) <LNInterpolable> @end
+#endif
+
+#endif

Color+Interpolation.m

@@ -0,0 +1,157 @@
+//
+//  Color+Interpolation.m
+//
+//  Created by Leo Natan on 01/10/2016.
+//  Copyright © 2016 Leo Natan. All rights reserved.
+//
+
+#if __has_include(<UIKit/UIKit.h>) || __has_include(<AppKit/AppKit.h>)
+
+#import "Color+Interpolation.h"
+
+#if __has_include(<UIKit/UIKit.h>)
+#define Color UIColor
+#else
+#define Color NSColor
+#endif
+
+#define SWAP(x, y) do { __typeof(x) __ZZZZ__SWAP = x; x = y; y = __ZZZZ__SWAP; } while(0)
+
+//Same value as LNInterpolationBehaviorUseDefault
+LNInterpolationBehavior const LNInterpolationBehaviorUseLABColorSpace = @"LNInterpolationBehaviorUseDefault";
+LNInterpolationBehavior const LNInterpolationBehaviorUseRGBColorSpace = @"LNInterpolationBehaviorUseRGB";
+
+extern double LNLinearInterpolate(double from, double to, double p);
+
+static NSArray<NSNumber*>* LNRGBComponentsFromColor(Color* color)
+{
+	size_t numberOfComponents = CGColorGetNumberOfComponents(color.CGColor);
+	const CGFloat* components = CGColorGetComponents(color.CGColor);
+	
+	return numberOfComponents == 2 ? @[@(components[0]), @(components[0]), @(components[0]), @(components[1])] : @[@(components[0]), @(components[1]), @(components[2]), @(components[3])];
+}
+
+static Color* LNColorFromRGBComponents(NSArray<NSNumber*>* components)
+{
+	return [Color colorWithRed:components[0].doubleValue green:components[1].doubleValue blue:components[2].doubleValue alpha:components[3].doubleValue];
+}
+
+static NSArray<NSNumber*>* LNLabComponentsFromColor(Color* color)
+{
+	NSArray<NSNumber*>* rgbComponents = LNRGBComponentsFromColor(color);
+	CGFloat r = rgbComponents[0].doubleValue;
+	CGFloat g = rgbComponents[1].doubleValue;
+	CGFloat b = rgbComponents[2].doubleValue;
+	
+	//RGB -> XYZ
+	//http://www.brucelindbloom.com/index.html?Eqn_RGB_to_XYZ.html
+
+	r = (r > 0.04045) ? pow((r + 0.055) / 1.055, 2.4) : (r / 12.92);
+	g = (g > 0.04045) ? pow((g + 0.055) / 1.055, 2.4) : (g / 12.92);
+	b = (b > 0.04045) ? pow((b + 0.055) / 1.055, 2.4) : (b / 12.92);
+	
+	//http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html (sRGB -> XYZ)
+	CGFloat x = r * 41.24564 + g * 35.75761 + b * 18.04375;
+	CGFloat y = r * 21.26729 + g * 71.51522 + b * 07.21750;
+	CGFloat z = r * 01.93339 + g * 11.91920 + b * 95.03041;
+	
+	//XYZ -> Lab
+	//http://www.brucelindbloom.com/index.html?Eqn_XYZ_to_Lab.html
+	
+	static const CGFloat eps = 216.0 / 24389.0;
+	static const CGFloat k = 24389.0 / 27.0;
+	
+	x = x / 100.0;//95.047;
+	y = y / 100.0;//100.000;
+	z = z / 100.0;//108.883;
+	
+	x = x > eps ? pow(x, 1.0 / 3.0) : (k * x + 16.0) / 116.0;
+	y = y > eps ? pow(y, 1.0 / 3.0) : (k * y + 16.0) / 116.0;
+	z = z > eps ? pow(z, 1.0 / 3.0) : (k * z + 16.0) / 116.0;
+	
+	CGFloat l = 116 * y - 16;
+	CGFloat a = 500 * (x - y);
+	        b = 200 * (y - z);
+	
+	return @[@(l), @(a), @(b), rgbComponents[3]];
+}
+
+static Color* LNColorFromLabComponents(NSArray<NSNumber*>* components)
+{
+	CGFloat l = components[0].doubleValue;
+	CGFloat a = components[1].doubleValue;
+	CGFloat b = components[2].doubleValue;
+	
+	//Lab -> XYZ
+	//http://www.brucelindbloom.com/index.html?Eqn_Lab_to_XYZ.html
+	
+	static const CGFloat eps = 216.0 / 24389.0;
+	static const CGFloat k = 24389.0 / 27.0;
+	
+	CGFloat y = (l + 16.0) / 116.0;
+	CGFloat x = a / 500 + y;
+	CGFloat z = y - b / 200;
+
+	x = pow(x, 3.0) > eps ? pow(x, 3.0) : (116 * x - 16) / k;
+	y = l > k * eps ? pow((l + 16) / 116, 3.0) : l / k;
+	z = pow(z, 3.0) > eps ? pow(z, 3.0) : (116 * z - 16) / k;
+	
+	x = x * 1.0;//.95047;
+	y = y * 1.0;//1.00000;
+	z = z * 1.0;//1.08883;
+	
+	//XYZ -> RGB
+	
+	//http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html (XYZ -> sRGB)
+	CGFloat r = x *  3.2404542 + y * -1.5371385 + z * -0.4985314;
+	CGFloat g = x * -0.9692660 + y *  1.8760108 + z *  0.0415560;
+	        b = x *  0.0556434 + y * -0.2040259 + z *  1.0572252;
+	
+	r = r <= 0.0031308 ? 12.92 * r : 1.055 * pow(r, 1.0 / 2.4) - 0.055;
+	g = g <= 0.0031308 ? 12.92 * g : 1.055 * pow(g, 1.0 / 2.4) - 0.055;
+	b = b <= 0.0031308 ? 12.92 * b : 1.055 * pow(b, 1.0 / 2.4) - 0.055;
+	
+	// return Color
+	return LNColorFromRGBComponents(@[@(r), @(g), @(b), components[3]]);
+}
+
+static inline __attribute__((__always_inline__)) Color* LNInterpolateColor(Color* fromValue, Color* toValue, CGFloat p, NSArray* (*compConverter)(Color*), Color* (*colorConverter)(NSArray*))
+{
+	NSArray<NSNumber*>* arrayC1 = compConverter(fromValue);
+	NSArray<NSNumber*>* arrayC2 = compConverter(toValue);
+	
+	NSMutableArray<NSNumber*>* arrayOutput = [NSMutableArray new];
+	[arrayC1 enumerateObjectsUsingBlock:^(NSNumber * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
+		arrayOutput[idx] = @(LNLinearInterpolate(obj.doubleValue, arrayC2[idx].doubleValue, p));
+	}];
+	
+	return colorConverter(arrayOutput);
+}
+
+@implementation Color (Interpolation)
+
+- (instancetype)interpolateToValue:(Color*)toValue progress:(double)p
+{
+	return [self interpolateToValue:toValue progress:p behavior:LNInterpolationBehaviorUseDefault];
+}
+
+- (instancetype)interpolateToValue:(id)toValue progress:(double)p behavior:(LNInterpolationBehavior)behavior
+{
+	NSParameterAssert([toValue isKindOfClass:[Color class]]);
+	
+	if(p <= 0)
+	{
+		return self;
+	}
+	
+	if(p >= 1)
+	{
+		return toValue;
+	}
+	
+	return LNInterpolateColor(self, toValue, p, behavior == LNInterpolationBehaviorUseRGBColorSpace ? LNRGBComponentsFromColor : LNLabComponentsFromColor, behavior == LNInterpolationBehaviorUseRGBColorSpace ? LNColorFromRGBComponents : LNColorFromLabComponents);
+}
+
+@end
+
+#endif

LNInterpolable.h

@@ -0,0 +1,48 @@
+//
+//  LNInterpolable.h
+//
+//  Created by Leo Natan on 01/10/2016.
+//  Copyright © 2016 Leo Natan. All rights reserved.
+//
+
+#import <Foundation/Foundation.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+NS_SWIFT_NAME(InterpolationBehavior)
+typedef const NSString* LNInterpolationBehavior NS_TYPED_EXTENSIBLE_ENUM;
+
+/**
+ Interpolate using the default behavor of each implementation.
+ */
+extern LNInterpolationBehavior const LNInterpolationBehaviorUseDefault;
+
+
+/**
+ Classes implementing this protocol support interpolation.
+ */
+NS_SWIFT_NAME(Interpolable)
+@protocol LNInterpolable <NSObject>
+
+/**
+ Interpolates between @c self and @c toValue accodring to @c progress using the default behavior.
+
+ @param toValue The value to interpolate to
+ @param progress The progress of the interpolation
+ @return An object representing the interpolated value at the requested progress
+ */
+- (instancetype)interpolateToValue:(id)toValue progress:(double)progress NS_SWIFT_NAME(interpolate(to:progress:));
+
+/**
+ Interpolates between @c self and @c toValue according to @c progress using @c behavior.
+
+ @param toValue The value to interpolate to
+ @param behavior The bahvior to use for interpolation
+ @param progress The progress of the interpolation
+ @return An object representing the interpolated value at the requested progress
+ */
+- (instancetype)interpolateToValue:(id)toValue progress:(double)progress behavior:(LNInterpolationBehavior)behavior NS_SWIFT_NAME(interpolate(to:progress:behavior:));
+
+NS_ASSUME_NONNULL_END
+
+@end

ReactNativeNavigation.podspec

@@ -19,5 +19,7 @@ Pod::Spec.new do |s|
   s.exclude_files  = "lib/ios/ReactNativeNavigationTests/**/*.*", "lib/ios/OCMock/**/*.*"
 
   s.dependency 'React'
+  s.dependency 'React-RCTImage'
+  s.dependency 'React-RCTText'
   s.frameworks = 'UIKit'
 end

autolink/postlink.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+set -e
+
+echo "RNN postlink !!!!!!!!!!!!!!!!!"

autolink/postlink/activityLinker.js

@@ -0,0 +1,50 @@
+// @ts-check
+var path = require('./path');
+var fs = require("fs");
+var { warnn, logn, infon, debugn } = require("./log");
+
+class ActivityLinker {
+  constructor() {
+    this.activityPath = path.mainActivityJava;
+  }
+
+  link() {
+    logn("Linking MainActivity...");
+    if (this.activityPath) {
+      var activityContent = fs.readFileSync(this.activityPath, "utf8");
+      activityContent = this._extendNavigationActivity(activityContent);
+      activityContent = this._removeGetMainComponentName(activityContent);
+      fs.writeFileSync(this.activityPath, activityContent);
+      infon("MainActivity linked successfully!\n");
+    } else {
+      warnn("   MainActivity not found!");
+    }
+  }
+
+  _removeGetMainComponentName(contents) {
+    var match = /\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\/\s*@Override\s*protected\s*String\s*getMainComponentName\s*\(\)\s*{\s*return.+\s*\}/.exec(contents);
+    if (match) {
+      debugn("   Removing getMainComponentName function");
+      return contents.replace(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\/\s*@Override\s*protected\s*String\s*getMainComponentName\s*\(\)\s*{\s*return.+\s*\}/, "");
+    }
+    return contents;
+  }
+
+  _extendNavigationActivity(activityContent) {
+    if (this._doesActivityExtendReactActivity(activityContent)) {
+      debugn("   Extending NavigationActivity")
+      return activityContent
+        .replace(/extends\s+ReactActivity\s*/, "extends NavigationActivity ")
+        .replace("import com.facebook.react.ReactActivity;", "import com.reactnativenavigation.NavigationActivity;")
+    } else {
+      warnn("   MainActivity already extends NavigationActivity")
+    }
+    return activityContent;
+  }
+
+  _doesActivityExtendReactActivity(activityContent) {
+    return /public\s+class\s+MainActivity\s+extends\s+ReactActivity\s*/.test(activityContent);
+  }
+}
+
+module.exports = ActivityLinker;

autolink/postlink/appDelegateLinker.js

@@ -0,0 +1,78 @@
+// @ts-check
+var path = require('./path');
+var fs = require("fs");
+var {warnn, logn, infon, debugn} = require("./log");
+
+class ApplicationLinker {
+  constructor() {
+    this.appDelegatePath = path.appDelegate;
+  }
+
+  link() {
+    if (this.appDelegatePath) {
+      logn("Linking AppDelegate...");
+      var appDelegateContents = fs.readFileSync(this.appDelegatePath, "utf8");
+      if (this._doesBootstrapNavigation(appDelegateContents)) {
+        infon("AppDelegate already linked\n");
+        return;
+      }
+      appDelegateContents = this._removeUnneededImports(appDelegateContents);
+      appDelegateContents = this._importNavigation(appDelegateContents);
+      appDelegateContents = this._bootstrapNavigation(appDelegateContents);
+      appDelegateContents = this._removeApplicationLaunchContent(appDelegateContents);
+      fs.writeFileSync(this.appDelegatePath, appDelegateContents);
+      infon("AppDelegate linked successfully!\n");
+    }
+  }
+
+  _doesBootstrapNavigation(applicationContent) {
+    return /ReactNativeNavigation\s+bootstrap/.test(applicationContent);
+  }
+
+  _removeUnneededImports(applicationContent) {
+    const unneededImports = [/\#import\s+\<React\/RCTBridge.h>\s/, /#import\s+\<React\/RCTRootView.h>\s/];
+    debugn("   Removing Unneeded imports");
+    unneededImports.forEach(unneededImport => {
+      if (unneededImport.test(applicationContent)) {
+        applicationContent = applicationContent.replace(unneededImport, "");
+      }
+    });
+
+    return applicationContent;
+  }
+
+  _importNavigation(applicationContent) {
+    if (!this._doesImportNavigation(applicationContent)) {
+      debugn("   ");
+      return applicationContent
+        .replace(/#import\s+"AppDelegate.h"/, "#import \"AppDelegate.h\"\n#import <ReactNativeNavigation/ReactNativeNavigation.h>")
+    }
+    warnn("   AppDelegate already imports Navigation");
+    return applicationContent;
+  }
+
+  _removeApplicationLaunchContent(applicationContent) {
+    const toRemove = [/RCTRootView\s+\*rootView((.|\r|\s)*?)];\s+/, /rootView.backgroundColor((.|\r)*)];\s+/,
+      /self.window((.|\r)*)];\s+/, /UIViewController\s\*rootViewController((.|\r)*)];\s+/, /rootViewController\.view\s+=\s+rootView;\s+/,
+      /self.window.rootViewController\s+=\s+rootViewController;\s+/, /\[self.window\s+makeKeyAndVisible];\s+/
+    ]
+
+    toRemove.forEach(element => {
+      if (element.test(applicationContent)) {
+        applicationContent = applicationContent.replace(element, "");
+      }
+    });
+
+    return applicationContent;
+  }
+
+  _bootstrapNavigation(applicationContent) {
+    return applicationContent.replace(/RCTBridge.*];/, "[ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];");
+  }
+
+  _doesImportNavigation(applicationContent) {
+    return /#import\s+\<ReactNativeNavigation\/ReactNativeNavigation.h>/.test(applicationContent);
+  }
+}
+
+module.exports = ApplicationLinker;

autolink/postlink/applicationLinker.js

@@ -0,0 +1,68 @@
+// @ts-check
+var path = require('./path');
+var fs = require("fs");
+var { warnn, logn, infon, debugn } = require("./log");
+
+class ApplicationLinker {
+  constructor() {
+    this.applicationPath = path.mainApplicationJava;
+  }
+
+  link() {
+    if (this.applicationPath) {
+      logn("Linking MainApplication...");
+      var applicationContents = fs.readFileSync(this.applicationPath, "utf8");
+      var linkers = [this._extendNavigationApplication, this._extendNavigationHost, this._removeSOLoaderInit];
+      applicationContents = this._extendNavigationApplication(applicationContents);
+      applicationContents = this._extendNavigationHost(applicationContents);
+      applicationContents = this._removeSOLoaderInit(applicationContents);
+      fs.writeFileSync(this.applicationPath, applicationContents);
+      infon("MainApplication linked successfully!\n");
+    }
+  }
+
+  _extendNavigationApplication(applicationContent) {
+    if (this._doesExtendApplication(applicationContent)) {
+      debugn("   Extending NavigationApplication");
+      return applicationContent
+        .replace(/extends\s+Application\s+implements\s+ReactApplication/gi, "extends NavigationApplication")
+        .replace("import com.facebook.react.ReactApplication;", "import com.reactnativenavigation.NavigationApplication;");
+    }
+    warnn("   MainApplication already extends NavigationApplication");
+    return applicationContent;
+  }
+
+  _doesExtendApplication(applicationContent) {
+    return /\s+MainApplication\s+extends\s+Application\s+implements\s+ReactApplication\s+/.test(applicationContent);
+  }
+
+  _extendNavigationHost(applicationContent) {
+    if (this._doesExtendReactNativeHost(applicationContent)) {
+      debugn("   Changing host implementation to NavigationReactNativeHost");
+      return applicationContent
+        .replace("new ReactNativeHost(this)", "new NavigationReactNativeHost(this)")
+        .replace("import com.facebook.react.ReactNativeHost;", "import com.facebook.react.ReactNativeHost;\nimport com.reactnativenavigation.react.NavigationReactNativeHost;")
+    }
+    warnn("   NavigationReactNativeHost is already used");
+    return applicationContent;
+  }
+
+  _removeSOLoaderInit(applicationContent) {
+    if (this._isSOLoaderInitCalled(applicationContent)) {
+      debugn("   Removing call to SOLoader.init()");
+      return applicationContent.replace(/SoLoader.init\(\s*this\s*,\s*[/* native exopackage */]*\s*false\s*\);/, "")
+    }
+    warnn("   SOLoader.init() is not called");
+    return applicationContent;
+  }
+
+  _isSOLoaderInitCalled(applicationContent) {
+    return /SoLoader.init\(this,\s*[/* native exopackage */]*\s*false\);/.test(applicationContent);
+  }
+
+  _doesExtendReactNativeHost(applicationContent) {
+    return /\s*new ReactNativeHost\(this\)\s*/.test(applicationContent);
+  }
+}
+
+module.exports = ApplicationLinker;

autolink/postlink/gradleLinker.js

@@ -0,0 +1,94 @@
+// @ts-check
+var path = require('./path');
+var fs = require('fs');
+var { warnn, errorn, logn, infon, debugn } = require('./log');
+var { insertString } = require('./stringUtils');
+var DEFAULT_KOTLIN_VERSION = '1.3.61';
+
+class GradleLinker {
+  constructor() {
+    this.gradlePath = path.rootGradle;
+  }
+
+  link() {
+    logn('Linking root build.gradle...');
+    if (this.gradlePath) {
+      var contents = fs.readFileSync(this.gradlePath, 'utf8');
+      contents = this._setKotlinVersion(contents);
+      contents = this._setKotlinPluginDependency(contents);
+      fs.writeFileSync(this.gradlePath, contents);
+      infon('Root build.gradle linked successfully!\n');
+    } else {
+      warnn('   Root build.gradle not found!');
+    }
+  }
+
+  _setKotlinPluginDependency(contents) {
+    if (this._isKotlinPluginDeclared(contents)) {
+      warnn('   Kotlin plugin already declared')
+      return contents;
+    }
+    var match = /classpath\s*\(*["']com\.android\.tools\.build:gradle:/.exec(contents);
+    if (match) {
+      debugn("   Adding Kotlin plugin");
+      return insertString(contents, match.index, `classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${DEFAULT_KOTLIN_VERSION}"\n        `);
+    } else {
+      errorn("   Could not add kotlin plugin dependency")
+    }
+    return contents;
+  }
+
+  _setKotlinVersion(contents) {
+    if (this._isKotlinVersionSpecified(contents)) {
+      warnn("   Kotlin version already specified");
+    } else {
+      var kotlinVersion = this._getKotlinVersion(contents);
+      if (this._hasExtensionVariablesBlock(contents)) {
+        debugn("   Adding RNNKotlinVersion to extension block");
+        return contents.replace(/ext\s*{/, `ext {\n        RNNKotlinVersion = ${kotlinVersion}`);
+      } else {
+        debugn("   Adding RNNKotlinVersion extension variable");
+        return contents.replace(/buildscript\s*{/, `buildscript {\n    ext.RNNKotlinVersion = ${kotlinVersion}`);
+      }
+    }
+    return contents;
+  }
+
+  /**
+   * @param { string } contents
+   */
+  _getKotlinVersion(contents) {
+    var hardCodedVersion = contents.match(/(?<=kotlin-gradle-plugin:)\$*[\d\.]{3,}/);
+    if (hardCodedVersion && hardCodedVersion.length > 0) {
+      return `"${hardCodedVersion[0]}"`;
+    }
+    var extensionVariableVersion = contents.match(/(?<=kotlin-gradle-plugin:)\$*[a-zA-Z\d\.]*/);
+    if (extensionVariableVersion && extensionVariableVersion.length > 0) {
+      return extensionVariableVersion[0].replace("$", "");
+    }
+    return `"${DEFAULT_KOTLIN_VERSION}"`;
+  }
+
+  /**
+   * @param {string} contents
+   */
+  _hasExtensionVariablesBlock(contents) {
+    return /ext\s*{/.test(contents);
+  }
+
+  /**
+   * @param {string} contents
+   */
+  _isKotlinVersionSpecified(contents) {
+    return /RNNKotlinVersion/.test(contents);
+  }
+
+  /**
+   * @param {string} contents
+   */
+  _isKotlinPluginDeclared(contents) {
+    return /org.jetbrains.kotlin:kotlin-gradle-plugin:/.test(contents);
+  }
+}
+
+module.exports = GradleLinker;

autolink/postlink/log.js

@@ -0,0 +1,33 @@
+const bColors = {
+  HEADER    : '\033[95m',
+  OKBLUE    : '\033[94m',
+  OKGREEN   : '\033[92m',
+  WARNING   : '\033[93m',
+  FAIL      : '\033[91m',
+  ENDC      : '\033[0m', 
+  BOLD      : '\033[1m',   
+  UNDERLINE : '\033[4m'
+}
+
+const log = (text) => process.stdout.write(text);
+const logn = (text) => process.stdout.write(text + "\n");
+const warn = (text) => process.stdout.write(`${bColors.WARNING}${text}${bColors.ENDC}`)
+const warnn = (text) => warn(text + "\n");
+const error = (text) => process.stdout.write(`${bColors.FAIL}${text}${bColors.ENDC}`)
+const errorn = (text) => error(text + "\n");
+const info = (text) => process.stdout.write(`${bColors.OKGREEN}${text}${bColors.ENDC}`)
+const infon = (text) => info(text + "\n");
+const debug = (text) => process.stdout.write(`${bColors.OKBLUE}${text}${bColors.ENDC}`)
+const debugn = (text) => debug(text + "\n");
+
+module.exports = {
+  log,
+  logn,
+  warn,
+  warnn,
+  info,
+  infon,
+  debug,
+  debugn,
+  errorn
+}

autolink/postlink/path.js

@@ -0,0 +1,12 @@
+var glob = require("glob");
+var ignoreFolders = { ignore: ["node_modules/**", "**/build/**"] };
+
+var manifestPath = glob.sync("**/AndroidManifest.xml", ignoreFolders)[0];
+
+exports.mainActivityJava = glob.sync("**/MainActivity.java", ignoreFolders)[0];
+exports.mainActivityKotlin = glob.sync("**/MainActivity.kt", ignoreFolders)[0];
+var mainApplicationJava = glob.sync("**/MainApplication.java", ignoreFolders)[0];
+exports.mainApplicationJava = mainApplicationJava;
+exports.rootGradle = mainApplicationJava.replace(/android\/app\/.*\.java/, "android/build.gradle");;
+
+exports.appDelegate = glob.sync("**/AppDelegate.m", ignoreFolders)[0];

autolink/postlink/postLinkAndroid.js

@@ -0,0 +1,12 @@
+// @ts-check
+var { infon } = require("./log");
+var AppLinker = require("./applicationLinker");
+var ActivityLinker = require("./activityLinker");
+var GradleLinker = require("./gradleLinker");
+
+module.exports = () => {
+  console.log("Running android postlink script\n");
+  new AppLinker().link();
+  new ActivityLinker().link();
+  new GradleLinker().link();
+}

autolink/postlink/postLinkIOS.js

@@ -0,0 +1,7 @@
+// @ts-check
+var AppDelegateLinker = require("./appDelegateLinker");
+
+module.exports = () => {
+  console.log("Running iOS postlink script\n");
+  new AppDelegateLinker().link();
+}

autolink/postlink/run.js

@@ -0,0 +1,8 @@
+// @ts-check
+var { infon } = require("./log");
+var postLinkAndroid = require('./postLinkAndroid');
+var postLinkIOS = require('./postLinkIOS');
+
+postLinkAndroid();
+postLinkIOS();
+infon("react-native-navigation linked successfully");

autolink/postlink/stringUtils.js

@@ -0,0 +1,14 @@
+ // @ts-check
+
+ /**
+   * @param {string} to
+   * @param {number} fromIndex
+   * @param {string} what
+   */
+  function insertString(to, fromIndex, what) {
+    return to.substring(0, fromIndex) + what + to.substring(fromIndex, to.length);
+  }
+
+  module.exports = {
+    insertString
+  }

docs/docs/Installing.md

@@ -77,8 +77,8 @@
 
 Projects generated using newer versions of react-native use CocoaPods by default. In that case it's easier to install react-native-navigation using CocoaPods.
 
-1. Add the following to `Podfile`:
-
+1. Update your `Podfile`:
+If you're upgrading to v5 from a previous RNN version, make sure to remove manual linking of RNN
 ```diff
 platform :ios, '9.0'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
@@ -110,7 +110,7 @@ target 'YourApp' do
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
-+ pod 'ReactNativeNavigation', :podspec => '../node_modules/react-native-navigation/ReactNativeNavigation.podspec'
+- pod 'ReactNativeNavigation', :podspec => '../node_modules/react-native-navigation/ReactNativeNavigation.podspec'
 
   use_native_modules!
 end
@@ -223,36 +223,7 @@ dependencies {
 }
 ```
 
-### 5 RNN and React Native version
-react-native-navigation supports multiple React Native versions. Target the React Native version required by your project by specifying the RNN build flavor in `android/app/build.gradle`.
-
-```diff
-android {
-    ...
-    defaultConfig {
-        applicationId "com.yourproject"
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-+        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57" // See note below!
-        versionCode 1
-        versionName "1.0"
-        ...
-    }
-    ...
-}
-```
-
-!>Important note about `missingDimensionStrategy`<Br>
->`reactNative51` - RN 0.54.x and below<Br>
->`reactNative55` - RN 0.55.x<Br>
->`reactNative56` - RN 0.56.x<Br>
->`reactNative57` - RN 0.57.0 - 0.57.4<Br>
->`reactNative57_5` - RN 0.57.5 - 0.59.9<Br>
->`reactNative60` - RN 0.60.0 and above
-
-Now we need to instruct gradle how to build that flavor. To do so here two solutions:
-
-#### 5.1 Build app with gradle command
+#### 5.0 Build app with gradle command
 
 **prefered solution** The RNN flavor you would like to build is specified in `app/build.gradle`. Therefore in order to compile only that flavor, instead of building your entire project using `./gradlew assembleDebug`, you should instruct gradle to build the app module: `./gradlew app:assembleDebug`. The easiest way is to add a package.json command to build and install your debug Android APK .
 
@@ -265,7 +236,7 @@ Now we need to instruct gradle how to build that flavor. To do so here two solut
 
 Now run `npm run android` to build your application
 
-#### 5.2 Ignore other RNN flavors
+#### 5.1 Ignore other RNN flavors
 
 If you don't want to run `npm run android` and want to keep the default `react-native run-android` command, you need to specify to graddle to ignore the other flavors RNN provides.
 

lib/android/app/build.gradle

@@ -1,4 +1,8 @@
+import groovy.json.JsonSlurper
+
 apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
 
 def safeExtGet(prop, fallback) {
     rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
@@ -7,6 +11,8 @@ def safeExtGet(prop, fallback) {
 def DEFAULT_COMPILE_SDK_VERSION = 28
 def DEFAULT_MIN_SDK_VERSION = 19
 def DEFAULT_TARGET_SDK_VERSION = 28
+def kotlinVersion = rootProject.ext.get("RNNKotlinVersion")
+def kotlinStdlib = safeExtGet('RNNKotlinStdlib', 'kotlin-stdlib-jdk8')
 
 android {
     compileSdkVersion safeExtGet('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)
@@ -53,6 +59,7 @@ android {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_1_8
     }
+
     flavorDimensions "RNN.reactNativeVersion"
     productFlavors {
         reactNative51 {
@@ -84,6 +91,56 @@ android {
             buildConfigField("int", "REACT_NATVE_VERSION_MINOR", "62")
         }
     }
+
+    def flavor = resolveFlavor()
+    variantFilter { variant ->
+        def names = variant.flavors*.name
+        if (!names.contains(flavor)) {
+            setIgnore(true)
+        }
+    }
+}
+
+String resolveFlavor() {
+    List reactNativeVersionComponents = reactNativeVersionComponents(findReactNativePackageJson())
+    Integer reactNativeMinorComponent = reactNativeVersionComponents[1].toInteger()
+    Integer reactNativePatchComponent = reactNativeVersionComponents[2].toInteger()
+
+    if (reactNativeMinorComponent >= 62) {
+        return "reactNative62"
+    } else if (reactNativeMinorComponent >= 60) {
+        return "reactNative60"
+    } else if (reactNativeMinorComponent >= 57 && reactNativePatchComponent >= 5) {
+        return "reactNative57_5"
+    } else if (reactNativeMinorComponent >= 57) {
+        return "reactNative57"
+    } else if (reactNativeMinorComponent >= 56) {
+        return "reactNative56"
+    } else if (reactNativeMinorComponent >= 55) {
+        return "reactNative55"
+    } else if (reactNativeMinorComponent >= 51) {
+        return "reactNative51"
+    }
+}
+
+
+Object findReactNativePackageJson() {
+    def searchPath = 'node_modules/react-native/package.json'
+    def projectDir = project.projectDir.toString() + '/'
+    def rnPackageJsonFile = new File(projectDir + searchPath)
+    while (!rnPackageJsonFile.exists()) {
+        searchPath = '../' + searchPath
+        rnPackageJsonFile = new File(projectDir + searchPath)
+    }
+    return rnPackageJsonFile
+}
+
+List reactNativeVersionComponents(rnPackageJsonFile) {
+    def packageSlurper = new JsonSlurper()
+    def reactNativePackageJson = packageSlurper.parseText(rnPackageJsonFile.text)
+    def reactNativeVersion = reactNativePackageJson.version
+
+    return reactNativeVersion.tokenize('-')[0].tokenize('.')
 }
 
 allprojects { p ->
@@ -97,12 +154,15 @@ allprojects { p ->
 }
 
 dependencies {
-    implementation 'androidx.appcompat:appcompat:1.0.2'
+    implementation "androidx.core:core-ktx:1.1.0"
+    implementation "org.jetbrains.kotlin:$kotlinStdlib:$kotlinVersion"
+
+    implementation 'androidx.appcompat:appcompat:1.1.0'
     implementation 'androidx.annotation:annotation:1.1.0'
-    implementation 'com.google.android.material:material:1.1.0-alpha08'
+    implementation 'com.google.android.material:material:1.2.0-alpha03'
 
     implementation 'com.github.wix-playground:ahbottomnavigation:3.1.2'
-    implementation 'com.github.wix-playground:reflow-animator:1.0.4'
+    implementation 'com.github.wix-playground:reflow-animator:1.0.6'
     implementation 'com.github.clans:fab:1.6.4'
 
     //noinspection GradleDynamicVersion
@@ -114,4 +174,5 @@ dependencies {
     testImplementation 'org.assertj:assertj-core:3.8.0'
     testImplementation 'com.squareup.assertj:assertj-android:1.1.1'
     testImplementation 'org.mockito:mockito-core:2.28.2'
+    testImplementation "com.nhaarman.mockitokotlin2:mockito-kotlin:2.2.0"
 }

lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java

@@ -5,9 +5,6 @@ import android.content.Intent;
 import android.graphics.Color;
 import android.os.Build;
 import android.os.Bundle;
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.appcompat.app.AppCompatActivity;
 import android.view.KeyEvent;
 import android.view.View;
 
@@ -15,13 +12,17 @@ import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
 import com.facebook.react.modules.core.PermissionAwareActivity;
 import com.facebook.react.modules.core.PermissionListener;
 import com.reactnativenavigation.presentation.OverlayManager;
+import com.reactnativenavigation.presentation.RootPresenter;
 import com.reactnativenavigation.react.JsDevReloadHandler;
 import com.reactnativenavigation.react.ReactGateway;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.modal.ModalStack;
 import com.reactnativenavigation.viewcontrollers.navigator.Navigator;
-import com.reactnativenavigation.presentation.RootPresenter;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.appcompat.app.AppCompatActivity;
 
 public class NavigationActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler, PermissionAwareActivity, JsDevReloadHandler.ReloadListener {
     @Nullable

lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java

@@ -4,17 +4,14 @@ import android.app.Application;
 
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.reactnativenavigation.react.NavigationReactNativeHost;
+import com.facebook.soloader.SoLoader;
 import com.reactnativenavigation.react.ReactGateway;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 
 import java.util.HashMap;
-import java.util.List;
 import java.util.Map;
 
 import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
 
 public abstract class NavigationApplication extends Application implements ReactApplication {
 
@@ -26,6 +23,7 @@ public abstract class NavigationApplication extends Application implements React
 	public void onCreate() {
 		super.onCreate();
         instance = this;
+        SoLoader.init(this, false);
         reactGateway = createReactGateway();
 	}
 
@@ -39,22 +37,13 @@ public abstract class NavigationApplication extends Application implements React
      * @return a singleton {@link ReactGateway}
      */
 	protected ReactGateway createReactGateway() {
-	    return new ReactGateway(this, isDebug(), this::createReactNativeHost);
+	    return new ReactGateway(getReactNativeHost());
     }
-
-    protected ReactNativeHost createReactNativeHost() {
-        return new NavigationReactNativeHost(this);
-    }
-
+    
 	public ReactGateway getReactGateway() {
 		return reactGateway;
 	}
 
-	@Override
-	public ReactNativeHost getReactNativeHost() {
-		return getReactGateway().getReactNativeHost();
-	}
-
     /**
      * Generally no need to override this; override for custom permission handling.
      */
@@ -62,15 +51,6 @@ public abstract class NavigationApplication extends Application implements React
 
     }
 
-	public abstract boolean isDebug();
-
-    /**
-     * Create a list of additional {@link ReactPackage}s to include. This method will only be called by
-     * the default implementation of {@link #createReactGateway()}
-     */
-	@Nullable
-	public abstract List<ReactPackage> createAdditionalReactPackages();
-
     /**
      * Register a native View which can be displayed using the given {@code name}
      * @param name Unique name used to register the native view

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

@@ -4,22 +4,21 @@ import android.animation.Animator;
 import android.animation.AnimatorListenerAdapter;
 import android.animation.AnimatorSet;
 import android.content.Context;
-import androidx.annotation.RestrictTo;
 import android.view.View;
-import android.view.ViewGroup;
 
 import com.reactnativenavigation.parse.AnimationOptions;
+import com.reactnativenavigation.parse.FadeAnimation;
 import com.reactnativenavigation.parse.NestedAnimationsOptions;
-import com.reactnativenavigation.parse.Transitions;
-import com.reactnativenavigation.views.element.Element;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.element.ElementTransitionManager;
 
-import java.util.Collection;
-import java.util.Collections;
+import java.util.ArrayList;
 import java.util.HashMap;
-import java.util.List;
 import java.util.Map;
 
+import androidx.annotation.RestrictTo;
+
 import static com.reactnativenavigation.utils.CollectionUtils.*;
 
 @SuppressWarnings("ResourceType")
@@ -33,41 +32,48 @@ public class NavigationAnimator extends BaseAnimator {
         this.transitionManager = transitionManager;
     }
 
-    public void push(ViewGroup view, NestedAnimationsOptions animation, Runnable onAnimationEnd) {
-        push(view, animation, new Transitions(), Collections.EMPTY_LIST, Collections.EMPTY_LIST, onAnimationEnd);
-    }
-
-    public void push(ViewGroup view, NestedAnimationsOptions animation, Transitions transitions, List<Element> fromElements, List<Element> toElements, Runnable onAnimationEnd) {
-        view.setAlpha(0);
-        AnimatorSet push = animation.content.getAnimation(view, getDefaultPushAnimation(view));
-        AnimatorSet set = new AnimatorSet();
-        Collection<Animator> elementTransitions = transitionManager.createTransitions(transitions, fromElements, toElements);
-        set.playTogether(merge(push.getChildAnimations(), elementTransitions));
-        set.addListener(new AnimatorListenerAdapter() {
-            private boolean isCancelled;
-
-            @Override
-            public void onAnimationStart(Animator animation) {
-                view.setAlpha(1);
-            }
-
-            @Override
-            public void onAnimationCancel(Animator animation) {
-                isCancelled = true;
-                runningPushAnimations.remove(view);
-                onAnimationEnd.run();
-            }
-
-            @Override
-            public void onAnimationEnd(Animator animation) {
-                if (!isCancelled) {
-                    runningPushAnimations.remove(view);
-                    onAnimationEnd.run();
+    public void push(ViewController appearing, ViewController disappearing, Options options, Runnable onAnimationEnd) {
+        appearing.getView().setAlpha(0);
+        transitionManager.createTransitions(
+                options.animations.push,
+                disappearing,
+                appearing,
+                transitionSet -> {
+                    AnimatorSet set = new AnimatorSet();
+                    runningPushAnimations.put(appearing.getView(), set);
+                    set.addListener(new AnimatorListenerAdapter() {
+                        private boolean isCancelled;
+
+                        @Override
+                        public void onAnimationCancel(Animator animation) {
+                            isCancelled = true;
+                            runningPushAnimations.remove(appearing.getView());
+                            onAnimationEnd.run();
+                        }
+
+                        @Override
+                        public void onAnimationEnd(Animator animation) {
+                            if (!isCancelled) {
+                                runningPushAnimations.remove(appearing.getView());
+                                onAnimationEnd.run();
+                            }
+                        }
+                    });
+
+
+                    if (transitionSet.isEmpty()) {
+                        set.playTogether(options.animations.push.content.getAnimation(appearing.getView(), getDefaultPushAnimation(appearing.getView())));
+                    } else {
+                        AnimationOptions fade = options.animations.push.content.isFadeAnimation() ? options.animations.push.content : new FadeAnimation().content;
+                        AnimatorSet transitions = transitionManager.createAnimators(fade, transitionSet);
+                        ArrayList<Animator.AnimatorListener> listeners = transitions.getListeners();
+                        set.playTogether(fade.getAnimation(appearing.getView()), transitions);
+                        forEach(listeners, set::addListener);
+                        transitions.removeAllListeners();
+                    }
+                    set.start();
                 }
-            }
-        });
-        runningPushAnimations.put(view, set);
-        set.start();
+        );
     }
 
     public void pop(View view, NestedAnimationsOptions pop, Runnable onAnimationEnd) {

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

@@ -1,119 +0,0 @@
-package com.reactnativenavigation.parse;
-
-
-import android.animation.Animator;
-import android.animation.AnimatorSet;
-import android.util.Property;
-import android.view.View;
-
-import com.reactnativenavigation.parse.params.Bool;
-import com.reactnativenavigation.parse.params.NullBool;
-import com.reactnativenavigation.parse.params.NullText;
-import com.reactnativenavigation.parse.params.Text;
-import com.reactnativenavigation.parse.parsers.BoolParser;
-import com.reactnativenavigation.parse.parsers.TextParser;
-
-import org.json.JSONObject;
-
-import java.util.ArrayList;
-import java.util.HashSet;
-import java.util.Iterator;
-import java.util.List;
-
-import static com.reactnativenavigation.utils.CollectionUtils.*;
-
-public class AnimationOptions {
-    public static AnimationOptions parse(JSONObject json) {
-        AnimationOptions options = new AnimationOptions();
-        if (json == null) return options;
-
-        for (Iterator<String> it = json.keys(); it.hasNext(); ) {
-            String key = it.next();
-            switch (key) {
-                case "id":
-                    options.id = TextParser.parse(json, key);
-                    break;
-                case "enable":
-                case "enabled":
-                    options.enabled = BoolParser.parse(json, key);
-                    break;
-                case "waitForRender":
-                    options.waitForRender = BoolParser.parse(json, key);
-                    break;
-                default:
-                    options.valueOptions.add(ValueAnimationOptions.parse(json.optJSONObject(key), getAnimProp(key)));
-            }
-        }
-
-        return options;
-    }
-
-    public Text id = new NullText();
-    public Bool enabled = new NullBool();
-    public Bool waitForRender = new NullBool();
-    private HashSet<ValueAnimationOptions> valueOptions = new HashSet<>();
-
-    void mergeWith(AnimationOptions other) {
-        if (other.id.hasValue()) id = other.id;
-        if (other.enabled.hasValue()) enabled = other.enabled;
-        if (other.waitForRender.hasValue()) waitForRender = other.waitForRender;
-        if (!other.valueOptions.isEmpty()) valueOptions = other.valueOptions;
-    }
-
-    void mergeWithDefault(AnimationOptions defaultOptions) {
-        if (!id.hasValue()) id = defaultOptions.id;
-        if (!enabled.hasValue()) enabled = defaultOptions.enabled;
-        if (!waitForRender.hasValue()) waitForRender = defaultOptions.waitForRender;
-        if (valueOptions.isEmpty()) valueOptions = defaultOptions.valueOptions;
-    }
-
-    public boolean hasValue() {
-        return id.hasValue() || enabled.hasValue() || waitForRender.hasValue();
-    }
-
-    public AnimatorSet getAnimation(View view) {
-        return getAnimation(view, null);
-    }
-
-    public AnimatorSet getAnimation(View view, AnimatorSet defaultAnimation) {
-        if (!hasAnimation()) return defaultAnimation;
-        AnimatorSet animationSet = new AnimatorSet();
-        List<Animator> animators = new ArrayList<>();
-        forEach(valueOptions, options -> animators.add(options.getAnimation(view)));
-        animationSet.playTogether(animators);
-        return animationSet;
-    }
-
-    private static Property<View, Float> getAnimProp(String key) {
-        switch (key) {
-            case "y":
-                return View.TRANSLATION_Y;
-            case "x":
-                return View.TRANSLATION_X;
-            case "alpha":
-                return View.ALPHA;
-            case "scaleY":
-                return View.SCALE_Y;
-            case "scaleX":
-                return View.SCALE_X;
-            case "rotationX":
-                return View.ROTATION_X;
-            case "rotationY":
-                return View.ROTATION_Y;
-            case "rotation":
-                return View.ROTATION;
-        }
-        throw new IllegalArgumentException("This animation is not supported: " + key);
-    }
-
-    public boolean hasAnimation() {
-        return !valueOptions.isEmpty();
-    }
-
-    public void setValueDy(Property<View, Float> animation, float fromDelta, float toDelta) {
-        first(valueOptions, o -> o.equals(animation), param -> {
-            param.setFromDelta(fromDelta);
-            param.setToDelta(toDelta);
-        });
-    }
-}

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

@@ -0,0 +1,111 @@
+package com.reactnativenavigation.parse
+
+import android.animation.Animator
+import android.animation.AnimatorSet
+import android.util.Property
+import android.util.TypedValue.COMPLEX_UNIT_DIP
+import android.util.TypedValue.COMPLEX_UNIT_FRACTION
+import android.view.View
+import android.view.View.*
+import com.reactnativenavigation.parse.params.Bool
+import com.reactnativenavigation.parse.params.NullBool
+import com.reactnativenavigation.parse.params.NullText
+import com.reactnativenavigation.parse.params.Text
+import com.reactnativenavigation.parse.parsers.BoolParser
+import com.reactnativenavigation.parse.parsers.TextParser
+import com.reactnativenavigation.utils.CollectionUtils
+import org.json.JSONObject
+import java.util.*
+import kotlin.math.max
+
+open class AnimationOptions(json: JSONObject?) {
+    constructor() : this(null)
+
+    private fun parse(json: JSONObject?) {
+        json?.let {
+            val iter = json.keys()
+            while (iter.hasNext()) {
+                when (val key = iter.next()) {
+                    "id" -> id = TextParser.parse(json, key)
+                    "enable", "enabled" -> enabled = BoolParser.parse(json, key)
+                    "waitForRender" -> waitForRender = BoolParser.parse(json, key)
+                    else -> valueOptions.add(ValueAnimationOptions.parse(json.optJSONObject(key), getAnimProp(key)))
+                }
+            }
+        }
+    }
+
+    @JvmField
+    var id: Text = NullText()
+    @JvmField
+    var enabled: Bool = NullBool()
+    @JvmField
+    var waitForRender: Bool = NullBool()
+    private var valueOptions = HashSet<ValueAnimationOptions>()
+    fun mergeWith(other: AnimationOptions) {
+        if (other.id.hasValue()) id = other.id
+        if (other.enabled.hasValue()) enabled = other.enabled
+        if (other.waitForRender.hasValue()) waitForRender = other.waitForRender
+        if (other.valueOptions.isNotEmpty()) valueOptions = other.valueOptions
+    }
+
+    fun mergeWithDefault(defaultOptions: AnimationOptions) {
+        if (!id.hasValue()) id = defaultOptions.id
+        if (!enabled.hasValue()) enabled = defaultOptions.enabled
+        if (!waitForRender.hasValue()) waitForRender = defaultOptions.waitForRender
+        if (valueOptions.isEmpty()) valueOptions = defaultOptions.valueOptions
+    }
+
+    fun hasValue(): Boolean {
+        return id.hasValue() || enabled.hasValue() || waitForRender.hasValue()
+    }
+
+    fun getAnimation(view: View): AnimatorSet {
+        return getAnimation(view, AnimatorSet())
+    }
+
+    fun getAnimation(view: View, defaultAnimation: AnimatorSet): AnimatorSet {
+        if (!hasAnimation()) return defaultAnimation
+        val animationSet = AnimatorSet()
+        val animators: MutableList<Animator> = ArrayList()
+        CollectionUtils.forEach(valueOptions) { options: ValueAnimationOptions -> animators.add(options.getAnimation(view)) }
+        animationSet.playTogether(animators)
+        return animationSet
+    }
+
+    val duration: Int
+        get() = CollectionUtils.reduce(valueOptions, 0, { item: ValueAnimationOptions, currentValue: Int -> max(item.duration[currentValue], currentValue) })
+
+    open fun hasAnimation(): Boolean = valueOptions.isNotEmpty()
+
+    fun isFadeAnimation(): Boolean = valueOptions.size == 1 && valueOptions.find(ValueAnimationOptions::isAlpha) != null
+
+    fun setValueDy(animation: Property<View?, Float?>?, fromDelta: Float, toDelta: Float) {
+        CollectionUtils.first(valueOptions, { o: ValueAnimationOptions -> o.equals(animation) }) { param: ValueAnimationOptions ->
+            param.setFromDelta(fromDelta)
+            param.setToDelta(toDelta)
+        }
+    }
+
+    companion object {
+        private fun getAnimProp(key: String): Triple<Property<View, Float>, Int, (View) -> Float> {
+            when (key) {
+                "x" -> return Triple(X, COMPLEX_UNIT_DIP, View::getX)
+                "y" -> return Triple(Y, COMPLEX_UNIT_DIP, View::getY)
+                "translationX" -> return Triple(TRANSLATION_X, COMPLEX_UNIT_DIP, View::getTranslationX)
+                "translationY" -> return Triple(TRANSLATION_Y, COMPLEX_UNIT_DIP, View::getTranslationY)
+                "alpha" -> return Triple(ALPHA, COMPLEX_UNIT_FRACTION, View::getAlpha)
+                "scaleX" -> return Triple(SCALE_X, COMPLEX_UNIT_FRACTION, View::getScaleX)
+                "scaleY" -> return Triple(SCALE_Y, COMPLEX_UNIT_FRACTION, View::getScaleY)
+                "rotationX" -> return Triple(ROTATION_X, COMPLEX_UNIT_FRACTION, View::getRotationX)
+                "rotationY" -> return Triple(ROTATION_Y, COMPLEX_UNIT_FRACTION, View::getRotationY)
+                "rotation" -> return Triple(ROTATION, COMPLEX_UNIT_FRACTION, View::getRotation)
+            }
+            throw IllegalArgumentException("This animation is not supported: $key")
+        }
+    }
+
+    init {
+        json?.let { parse(it) }
+    }
+}

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

@@ -12,9 +12,9 @@ public class AnimationsOptions {
         options.push = NestedAnimationsOptions.parse(json.optJSONObject("push"));
         options.pop = NestedAnimationsOptions.parse(json.optJSONObject("pop"));
         options.setStackRoot = NestedAnimationsOptions.parse(json.optJSONObject("setStackRoot"));
-        options.setRoot = AnimationOptions.parse(json.optJSONObject("setRoot"));
-        options.showModal = AnimationOptions.parse(json.optJSONObject("showModal"));
-        options.dismissModal = AnimationOptions.parse(json.optJSONObject("dismissModal"));
+        options.setRoot = new AnimationOptions(json.optJSONObject("setRoot"));
+        options.showModal = new AnimationOptions(json.optJSONObject("showModal"));
+        options.dismissModal = new AnimationOptions(json.optJSONObject("dismissModal"));
 
         return options;
     }

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

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.parse
+
+import android.animation.AnimatorSet
+import android.view.View
+import org.json.JSONObject
+
+class ElementTransitionOptions(json: JSONObject) {
+    private val animation: AnimationOptions = AnimationOptions(json)
+    val id: String
+        get() = animation.id.get()
+
+    fun getAnimation(view: View): AnimatorSet = animation.getAnimation(view)
+}

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

@@ -0,0 +1,34 @@
+package com.reactnativenavigation.parse
+
+import org.json.JSONException
+import org.json.JSONObject
+
+class ElementTransitions {
+    var transitions = arrayListOf<ElementTransitionOptions>()
+    val hasValue: Boolean
+        get() = transitions.isNotEmpty()
+
+    companion object {
+        fun parse(json: JSONObject): ElementTransitions {
+            val result = ElementTransitions()
+            try {
+                val elementTransitions = json.getJSONArray("elementTransitions")
+                if (elementTransitions.length() == 0) return result
+                for (i in 0..elementTransitions.length()) {
+                    result.transitions.add(ElementTransitionOptions(elementTransitions.getJSONObject(i)))
+                }
+            } catch (e: JSONException) {
+
+            }
+            return result
+        }
+    }
+
+    fun mergeWith(other: ElementTransitions) {
+        if (other.hasValue) transitions = other.transitions
+    }
+
+    fun mergeWithDefault(defaultOptions: ElementTransitions) {
+        if (!hasValue) transitions = defaultOptions.transitions
+    }
+}

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

@@ -0,0 +1,24 @@
+package com.reactnativenavigation.parse;
+
+import org.json.JSONException;
+import org.json.JSONObject;
+
+public class FadeAnimation extends NestedAnimationsOptions {
+    public FadeAnimation() {
+        try {
+            JSONObject alpha = new JSONObject();
+            alpha.put("from", 0);
+            alpha.put("to", 1);
+            alpha.put("duration", 300);
+
+            JSONObject content = new JSONObject();
+            content.put("alpha", alpha);
+
+            JSONObject animation = new JSONObject();
+            animation.put("content", content);
+            mergeWith(parse(animation));
+        } catch (JSONException e) {
+            e.printStackTrace();
+        }
+    }
+}

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

@@ -12,11 +12,13 @@ public class NestedAnimationsOptions {
         NestedAnimationsOptions options = new NestedAnimationsOptions();
         if (json == null) return options;
 
-        options.content = AnimationOptions.parse(json.optJSONObject("content"));
-        options.bottomTabs = AnimationOptions.parse(json.optJSONObject("bottomTabs"));
-        options.topBar = AnimationOptions.parse(json.optJSONObject("topBar"));
+        options.content = new AnimationOptions(json.optJSONObject("content"));
+        options.bottomTabs = new AnimationOptions(json.optJSONObject("bottomTabs"));
+        options.topBar = new AnimationOptions(json.optJSONObject("topBar"));
         options.enabled = BoolParser.parseFirst(json, "enabled", "enable");
         options.waitForRender = BoolParser.parse(json, "waitForRender");
+        options.sharedElements = SharedElements.parse(json);
+        options.elementTransitions = ElementTransitions.Companion.parse(json);
 
         return options;
     }
@@ -26,11 +28,15 @@ public class NestedAnimationsOptions {
     public AnimationOptions content = new AnimationOptions();
     public AnimationOptions bottomTabs = new AnimationOptions();
     public AnimationOptions topBar = new AnimationOptions();
+    public SharedElements sharedElements = new SharedElements();
+    public ElementTransitions elementTransitions = new ElementTransitions();
 
     void mergeWith(NestedAnimationsOptions other) {
         topBar.mergeWith(other.topBar);
         content.mergeWith(other.content);
         bottomTabs.mergeWith(other.bottomTabs);
+        sharedElements.mergeWith(other.sharedElements);
+        elementTransitions.mergeWith(other.elementTransitions);
         if (other.enabled.hasValue()) enabled = other.enabled;
         if (other.waitForRender.hasValue()) waitForRender = other.waitForRender;
     }
@@ -39,6 +45,8 @@ public class NestedAnimationsOptions {
         content.mergeWithDefault(defaultOptions.content);
         bottomTabs.mergeWithDefault(defaultOptions.bottomTabs);
         topBar.mergeWithDefault(defaultOptions.topBar);
+        sharedElements.mergeWithDefault(defaultOptions.sharedElements);
+        elementTransitions.mergeWithDefault(defaultOptions.elementTransitions);
         if (!enabled.hasValue()) enabled = defaultOptions.enabled;
         if (!waitForRender.hasValue()) waitForRender = defaultOptions.waitForRender;
     }

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

@@ -30,7 +30,6 @@ public class Options {
         result.navigationBar = NavigationBarOptions.parse(json.optJSONObject("navigationBar"));
         result.statusBar = StatusBarOptions.parse(json.optJSONObject("statusBar"));
         result.layout = LayoutOptions.parse(json.optJSONObject("layout"));
-        result.transitions = Transitions.parse(json.optJSONObject("customTransition"));
 
         return result;
     }
@@ -48,7 +47,6 @@ public class Options {
     @NonNull public NavigationBarOptions navigationBar = new NavigationBarOptions();
     @NonNull public StatusBarOptions statusBar = new StatusBarOptions();
     @NonNull public LayoutOptions layout = new LayoutOptions();
-    @NonNull public Transitions transitions = new Transitions();
 
     void setTopTabIndex(int i) {
         topTabOptions.tabIndex = i;
@@ -70,7 +68,6 @@ public class Options {
         result.navigationBar.mergeWith(navigationBar);
         result.statusBar.mergeWith(statusBar);
         result.layout.mergeWith(layout);
-        result.transitions.mergeWith(transitions);
         return result;
     }
 
@@ -89,7 +86,6 @@ public class Options {
         result.navigationBar.mergeWith(other.navigationBar);
         result.statusBar.mergeWith(other.statusBar);
         result.layout.mergeWith(other.layout);
-        result.transitions.mergeWith(transitions);
         return result;
     }
 
@@ -106,7 +102,6 @@ public class Options {
         navigationBar.mergeWithDefault(defaultOptions.navigationBar);
         statusBar.mergeWithDefault(defaultOptions.statusBar);
         layout.mergeWithDefault(defaultOptions.layout);
-        transitions.mergeWithDefault(defaultOptions.transitions);
         return this;
     }
 

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

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

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

@@ -0,0 +1,57 @@
+package com.reactnativenavigation.parse;
+
+import org.json.JSONArray;
+import org.json.JSONException;
+import org.json.JSONObject;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import androidx.annotation.RestrictTo;
+
+public class SharedElements {
+    private List<SharedElementTransitionOptions> transitions = new ArrayList<>();
+
+    public List<SharedElementTransitionOptions> get() {
+        return transitions;
+    }
+
+    public SharedElements() {
+
+    }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public SharedElements(List<SharedElementTransitionOptions> transitions) {
+        this.transitions = transitions;
+    }
+
+    public static SharedElements parse(JSONObject json) {
+        SharedElements result = new SharedElements();
+        try {
+            JSONArray sharedElements = json.getJSONArray("sharedElementTransitions");
+            if (sharedElements == null || sharedElements.length() == 0) return result;
+            for (int i = 0; i < sharedElements.length(); i++) {
+                result.add(SharedElementTransitionOptions.parse(sharedElements.getJSONObject(i)));
+            }
+            return result;
+        } catch (JSONException e) {
+            return result;
+        }
+    }
+
+    public boolean hasValue() {
+        return !transitions.isEmpty();
+    }
+
+    void mergeWith(final SharedElements other) {
+        if (other.hasValue()) transitions = other.transitions;
+    }
+
+    void mergeWithDefault(SharedElements defaultOptions) {
+        if (!hasValue()) transitions = defaultOptions.transitions;
+    }
+
+    private void add(SharedElementTransitionOptions transition) {
+        transitions.add(transition);
+    }
+}

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

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

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

@@ -1,81 +0,0 @@
-package com.reactnativenavigation.parse;
-
-
-import android.animation.Animator;
-import android.animation.ObjectAnimator;
-import android.util.Property;
-import android.view.View;
-
-import com.reactnativenavigation.parse.params.FloatParam;
-import com.reactnativenavigation.parse.params.Interpolation;
-import com.reactnativenavigation.parse.params.NullFloatParam;
-import com.reactnativenavigation.parse.params.NullNumber;
-import com.reactnativenavigation.parse.params.Number;
-import com.reactnativenavigation.parse.parsers.FloatParser;
-import com.reactnativenavigation.parse.parsers.InterpolationParser;
-import com.reactnativenavigation.parse.parsers.NumberParser;
-
-import org.json.JSONObject;
-
-public class ValueAnimationOptions {
-
-    public static ValueAnimationOptions parse(JSONObject json, Property<View, Float> property) {
-        ValueAnimationOptions options = new ValueAnimationOptions();
-
-        options.animProp = property;
-        options.from = FloatParser.parse(json, "from");
-        options.to = FloatParser.parse(json, "to");
-        options.duration = NumberParser.parse(json, "duration");
-        options.startDelay = NumberParser.parse(json, "startDelay");
-        options.interpolation = InterpolationParser.parse(json, "interpolation");
-
-        return options;
-    }
-
-    private Property<View, Float> animProp;
-
-    private FloatParam from = new NullFloatParam();
-    private FloatParam fromDelta = new FloatParam(0f);
-    private FloatParam to = new NullFloatParam();
-    private FloatParam toDelta = new FloatParam(0f);
-    private Number duration = new NullNumber();
-    private Number startDelay = new NullNumber();
-    private Interpolation interpolation = Interpolation.NO_VALUE;
-
-    void setFromDelta(float fromDelta) {
-        this.fromDelta = new FloatParam(fromDelta);
-    }
-
-    void setToDelta(float toDelta) {
-        this.toDelta = new FloatParam(toDelta);
-    }
-
-    Animator getAnimation(View view) {
-        if (!from.hasValue() || !to.hasValue()) throw new IllegalArgumentException("Params 'from' and 'to' are mandatory");
-        ObjectAnimator animator = ObjectAnimator.ofFloat(view,
-                animProp,
-                from.get() + fromDelta.get(),
-                to.get() + toDelta.get()
-        );
-        animator.setInterpolator(interpolation.getInterpolator());
-        if (duration.hasValue()) animator.setDuration(duration.get());
-        if (startDelay.hasValue()) animator.setStartDelay(startDelay.get());
-        return animator;
-    }
-
-    @Override
-    public boolean equals(Object o) {
-        if (this == o) return true;
-        if (o == null || getClass() != o.getClass()) return false;
-        return animProp.equals(((ValueAnimationOptions) o).animProp);
-    }
-
-    public boolean equals(Property<View, Float> animationProperty) {
-        return animProp.getName().equals(animationProperty.getName());
-    }
-
-    @Override
-    public int hashCode() {
-        return animProp.hashCode();
-    }
-}

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

@@ -0,0 +1,88 @@
+package com.reactnativenavigation.parse
+
+import android.animation.Animator
+import android.animation.ObjectAnimator
+import android.util.Property
+import android.util.TypedValue
+import android.view.View
+import com.reactnativenavigation.parse.params.*
+import com.reactnativenavigation.parse.params.Number
+import com.reactnativenavigation.parse.parsers.FloatParser
+import com.reactnativenavigation.parse.parsers.InterpolationParser
+import com.reactnativenavigation.parse.parsers.NumberParser
+import com.reactnativenavigation.utils.UiUtils.dpToPx
+import org.json.JSONObject
+
+class ValueAnimationOptions {
+    private var animProp: Property<View, Float>? = null
+    private var animPropType: Int? = null
+    private var animationValueAccessor: ((View) -> Float)? = null
+    private var from: FloatParam = NullFloatParam()
+    private var fromDelta = FloatParam(0f)
+    private var to: FloatParam = NullFloatParam()
+    private var toDelta = FloatParam(0f)
+    var duration: Number = NullNumber()
+    private var startDelay: Number = NullNumber()
+    private var interpolation = Interpolation.NO_VALUE
+
+    fun setFromDelta(fromDelta: Float) {
+        this.fromDelta = FloatParam(fromDelta)
+    }
+
+    fun setToDelta(toDelta: Float) {
+        this.toDelta = FloatParam(toDelta)
+    }
+
+    fun getAnimation(view: View): Animator {
+        require(!(!from.hasValue() && !to.hasValue())) { "Params 'from' and 'to' are mandatory" }
+
+        var from = fromDelta.get()
+        var to = toDelta.get()
+        if (animPropType == TypedValue.COMPLEX_UNIT_DIP) {
+            from += dpToPx(view.context, this.from[animationValueAccessor!!(view)])
+            to += dpToPx(view.context, this.to[animationValueAccessor!!(view)])
+        } else {
+            from += this.from[animationValueAccessor!!(view)]
+            to += this.to[animationValueAccessor!!(view)]
+        }
+        val animator = ObjectAnimator.ofFloat(view,
+                animProp,
+                from,
+                to
+        )
+        animator.interpolator = interpolation.interpolator
+        if (duration.hasValue()) animator.duration = duration.get().toLong()
+        if (startDelay.hasValue()) animator.startDelay = startDelay.get().toLong()
+        return animator
+    }
+
+    override fun equals(o: Any?): Boolean {
+        if (this === o) return true
+        return if (o == null || javaClass != o.javaClass) false else animProp == (o as ValueAnimationOptions).animProp
+    }
+
+    fun equals(animationProperty: Property<View?, Float?>): Boolean {
+        return animProp!!.name == animationProperty.name
+    }
+
+    override fun hashCode(): Int {
+        return animProp.hashCode()
+    }
+
+    fun isAlpha(): Boolean = animProp == View.ALPHA
+
+    companion object {
+        fun parse(json: JSONObject?, property: Triple<Property<View, Float>?, Int?, (View) -> Float>): ValueAnimationOptions {
+            val options = ValueAnimationOptions()
+            options.animProp = property.first
+            options.animPropType = property.second
+            options.animationValueAccessor = property.third
+            options.from = FloatParser.parse(json, "from")
+            options.to = FloatParser.parse(json, "to")
+            options.duration = NumberParser.parse(json, "duration")
+            options.startDelay = NumberParser.parse(json, "startDelay")
+            options.interpolation = InterpolationParser.parse(json, "interpolation")
+            return options
+        }
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/presentation/Presenter.java

@@ -87,10 +87,11 @@ public class Presenter {
     }
 
     private void applyStatusBarOptions(Options options) {
-        setStatusBarBackgroundColor(options.statusBar);
-        setTextColorScheme(options.statusBar.textColorScheme);
-        setTranslucent(options.statusBar);
-        setStatusBarVisible(options.statusBar.visible);
+        StatusBarOptions statusBar = options.copy().withDefaultOptions(defaultOptions).statusBar;
+        setStatusBarBackgroundColor(statusBar);
+        setTextColorScheme(statusBar.textColorScheme);
+        setTranslucent(statusBar);
+        setStatusBarVisible(statusBar.visible);
     }
 
     private void setTranslucent(StatusBarOptions options) {
@@ -181,6 +182,7 @@ public class Presenter {
             } else {
                 flags |= View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_FULLSCREEN;
             }
+            if (flags != view.getSystemUiVisibility()) view.requestLayout();
             view.setSystemUiVisibility(flags);
         } else if (drawBehind.hasValue()) {
             if (drawBehind.isTrue()) {

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

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

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

@@ -1,7 +1,5 @@
 package com.reactnativenavigation.react;
 
-import com.reactnativenavigation.react.events.EventEmitter;
-import com.reactnativenavigation.utils.LaunchArgsParser;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
@@ -18,6 +16,8 @@ import com.reactnativenavigation.parse.LayoutNode;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.parsers.JSONParser;
 import com.reactnativenavigation.parse.parsers.LayoutNodeParser;
+import com.reactnativenavigation.react.events.EventEmitter;
+import com.reactnativenavigation.utils.LaunchArgsParser;
 import com.reactnativenavigation.utils.NativeCommandListener;
 import com.reactnativenavigation.utils.Now;
 import com.reactnativenavigation.utils.StatusBarUtils;
@@ -125,7 +125,7 @@ public class NavigationModule extends ReactContextBaseJavaModule {
     @ReactMethod
     public void setStackRoot(String commandId, String onComponentId, ReadableArray children, Promise promise) {
         handle(() -> {
-            ArrayList<ViewController> _children = new ArrayList();
+            ArrayList<ViewController> _children = new ArrayList<>();
             for (int i = 0; i < children.size(); i++) {
                 final LayoutNode layoutTree = LayoutNodeParser.parse(jsonParser.parse(children.getMap(i)));
                 _children.add(layoutFactory.create(layoutTree));
@@ -194,12 +194,15 @@ public class NavigationModule extends ReactContextBaseJavaModule {
                null ? Options.EMPTY : Options.parse(new TypefaceLoader(activity()), jsonParser.parse(mergeOptions));
     }
 
-    private void handle(Runnable task) {
-        if (activity() == null || activity().isFinishing()) return;
-        UiThread.post(task);
+    protected void handle(Runnable task) {
+        UiThread.post(() -> {
+            if (getCurrentActivity() != null && !activity().isFinishing()) {
+                task.run();
+            }
+        });
     }
 
-    private NavigationActivity activity() {
+    protected NavigationActivity activity() {
         return (NavigationActivity) getCurrentActivity();
     }
 

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

@@ -7,6 +7,7 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager;
 import com.reactnativenavigation.parse.LayoutFactory;
 
+import java.util.Collections;
 import java.util.List;
 
 import androidx.annotation.NonNull;
@@ -35,6 +36,6 @@ public class NavigationPackage implements ReactPackage {
     @NonNull
     @Override
     public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
-        return singletonList(new ElementViewManager());
+        return Collections.emptyList();
     }
 }

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

@@ -1,16 +1,10 @@
 package com.reactnativenavigation.react;
 
 import android.app.Activity;
-import android.app.Application;
 import android.content.Intent;
 
 import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.soloader.SoLoader;
 import com.reactnativenavigation.NavigationActivity;
-import com.reactnativenavigation.utils.Functions.FuncR;
-
-import java.util.List;
 
 public class ReactGateway {
 
@@ -18,30 +12,15 @@ public class ReactGateway {
 	private final NavigationReactInitializer initializer;
 	private final JsDevReloadHandler jsDevReloadHandler;
 
-    @SuppressWarnings("unused")
-    public ReactGateway(final Application application, final boolean isDebug, final List<ReactPackage> additionalReactPackages) {
-		this(application, isDebug, new NavigationReactNativeHost(application, isDebug, additionalReactPackages));
-	}
-
-    @SuppressWarnings("WeakerAccess")
-    public ReactGateway(final Application application, final boolean isDebug, final ReactNativeHost host) {
-        this(application, isDebug, () -> host);
-    }
-
-    public ReactGateway(final Application application, final boolean isDebug, FuncR<ReactNativeHost> hostCreator) {
-        SoLoader.init(application, false);
-        this.host = hostCreator.run();
-        initializer = new NavigationReactInitializer(host.getReactInstanceManager(), isDebug);
+    public ReactGateway(ReactNativeHost host) {
+        this.host = host;
+        initializer = new NavigationReactInitializer(host.getReactInstanceManager(), host.getUseDeveloperSupport());
         jsDevReloadHandler = new JsDevReloadHandler(host.getReactInstanceManager().getDevSupportManager());
         if (host instanceof BundleDownloadListenerProvider) {
             ((BundleDownloadListenerProvider) host).setBundleLoaderListener(jsDevReloadHandler);
         }
     }
 
-	public ReactNativeHost getReactNativeHost() {
-		return host;
-	}
-
 	public void onActivityCreated(NavigationActivity activity) {
 		initializer.onActivityCreated();
         jsDevReloadHandler.setReloadListener(activity);
@@ -53,8 +32,8 @@ public class ReactGateway {
 	}
 
     public boolean onNewIntent(Intent intent) {
-        if (getReactNativeHost().hasInstance()) {
-            getReactNativeHost().getReactInstanceManager().onNewIntent(intent);
+        if (host.hasInstance()) {
+            host.getReactInstanceManager().onNewIntent(intent);
             return true;
         }
         return false;

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

@@ -16,10 +16,6 @@ import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.viewcontrollers.IReactView;
 import com.reactnativenavigation.views.Renderable;
-import com.reactnativenavigation.views.element.Element;
-
-import java.util.ArrayList;
-import java.util.List;
 
 import androidx.annotation.RestrictTo;
 
@@ -31,7 +27,6 @@ public class ReactView extends ReactRootView implements IReactView, Renderable {
 	private final String componentName;
 	private boolean isAttachedToReactInstance = false;
     private final JSTouchDispatcher jsTouchDispatcher;
-    private ArrayList<Element> elements = new ArrayList<>();
 
     public ReactView(final Context context, ReactInstanceManager reactInstanceManager, String componentId, String componentName) {
 		super(context);
@@ -39,14 +34,17 @@ public class ReactView extends ReactRootView implements IReactView, Renderable {
 		this.componentId = componentId;
 		this.componentName = componentName;
 		jsTouchDispatcher = new JSTouchDispatcher(this);
-		start();
 	}
 
-	private void start() {
-		setEventListener(reactRootView -> {
-            reactRootView.setEventListener(null);
-            isAttachedToReactInstance = true;
-        });
+    @Override
+    protected void onAttachedToWindow() {
+        super.onAttachedToWindow();
+        start();
+    }
+
+    private void start() {
+        if (isAttachedToReactInstance) return;
+        isAttachedToReactInstance = true;
 		final Bundle opts = new Bundle();
 		opts.putString("componentId", componentId);
 		startReactApplication(reactInstanceManager, componentName, opts);
@@ -113,17 +111,4 @@ public class ReactView extends ReactRootView implements IReactView, Renderable {
     public String getComponentName() {
         return componentName;
     }
-
-    public void registerElement(Element element) {
-        elements.add(element);
-    }
-
-    public void unregisterElement(Element element) {
-        elements.remove(element);
-    }
-
-    @Override
-    public List<Element> getElements() {
-        return elements;
-    }
 }

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

@@ -67,13 +67,13 @@ public class CollectionUtils {
 
     public static <T> List<T> merge(@Nullable Collection<T> a, @Nullable Collection<T> b) {
         if (a == null && b == null) return null;
-        List<T> result = new ArrayList(get(a));
+        List<T> result = new ArrayList<>(get(a));
         result.addAll(get(b));
         return result;
     }
 
     public static <T> void forEach(@Nullable Collection<T> items, Apply<T> apply) {
-        if (items != null) forEach(new ArrayList(items), 0, apply);
+        if (items != null) forEach(new ArrayList<>(items), 0, apply);
     }
 
     public static <T> void forEach(@Nullable T[] items, Apply<T> apply) {
@@ -144,11 +144,11 @@ public class CollectionUtils {
     }
 
     public static @NonNull <T> Collection<T> get(@Nullable Collection<T> t) {
-        return t == null ? Collections.EMPTY_LIST : t;
+        return t == null ? Collections.emptyList() : t;
     }
 
     public static @NonNull <T> Collection<T> get(@Nullable Map<?, T> t) {
-        return t == null ? Collections.EMPTY_LIST : t.values();
+        return t == null ? Collections.emptyList() : t.values();
     }
 
     public static <T> boolean equals(@Nullable Collection<T> a, @Nullable Collection<T> b) {

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

@@ -0,0 +1,8 @@
+package com.reactnativenavigation.utils
+
+import android.content.Context
+import com.facebook.react.ReactApplication
+
+fun Context.isDebug(): Boolean {
+    return (applicationContext as ReactApplication).reactNativeHost.useDeveloperSupport
+}

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

@@ -1,140 +0,0 @@
-package com.reactnativenavigation.utils;
-
-import android.app.Activity;
-import android.content.Context;
-import android.graphics.Bitmap;
-import android.graphics.BitmapFactory;
-import android.graphics.drawable.BitmapDrawable;
-import android.graphics.drawable.Drawable;
-import android.net.Uri;
-import android.os.StrictMode;
-import android.view.View;
-
-import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;
-import com.reactnativenavigation.NavigationApplication;
-import com.reactnativenavigation.R;
-
-import java.io.FileNotFoundException;
-import java.io.IOException;
-import java.io.InputStream;
-import java.net.URL;
-import java.util.ArrayList;
-import java.util.List;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.core.content.ContextCompat;
-
-public class ImageLoader {
-
-    public interface ImagesLoadingListener {
-        void onComplete(@NonNull List<Drawable> drawable);
-
-        void onComplete(@NonNull Drawable drawable);
-
-        void onError(Throwable error);
-    }
-
-    private static final String FILE_SCHEME = "file";
-
-    public Drawable getBackButtonIcon(Activity context) {
-        boolean isRTL = context.getWindow().getDecorView().getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
-        return ContextCompat.getDrawable(context, isRTL ? R.drawable.ic_arrow_back_black_rtl_24dp : R.drawable.ic_arrow_back_black_24dp);
-    }
-
-    @Nullable
-    public Drawable loadIcon(Context context, @Nullable String uri) {
-        if (uri == null) return null;
-        try {
-            return getDrawable(context, uri);
-        } catch (IOException e) {
-            e.printStackTrace();
-        }
-        return null;
-    }
-
-    public void loadIcon(Context context, String uri, ImagesLoadingListener listener) {
-        try {
-            listener.onComplete(getDrawable(context, uri));
-        } catch (IOException e) {
-            listener.onError(e);
-        }
-    }
-
-    public void loadIcons(final Context context, List<String> uris, ImagesLoadingListener listener) {
-        try {
-            List<Drawable> drawables = new ArrayList<>();
-            for (String uri : uris) {
-                Drawable drawable = getDrawable(context, uri);
-                drawables.add(drawable);
-            }
-            listener.onComplete(drawables);
-        } catch (IOException e) {
-            listener.onError(e);
-        }
-    }
-
-    @NonNull
-    private Drawable getDrawable(Context context, @NonNull String source) throws IOException {
-        Drawable drawable;
-        if (isLocalFile(Uri.parse(source))) {
-            drawable = loadFile(source);
-        } else {
-            drawable = loadResource(source);
-            if (drawable == null && NavigationApplication.instance.isDebug()) {
-                drawable = readJsDevImage(context, source);
-            }
-        }
-        if (drawable == null) throw new RuntimeException("Could not load image " + source);
-        return drawable;
-    }
-
-    @NonNull
-    private Drawable readJsDevImage(Context context, String source) throws IOException {
-        StrictMode.ThreadPolicy threadPolicy = adjustThreadPolicyDebug();
-        InputStream is = openStream(context, source);
-        Bitmap bitmap = BitmapFactory.decodeStream(is);
-        restoreThreadPolicyDebug(threadPolicy);
-        return new BitmapDrawable(context.getResources(), bitmap);
-    }
-
-    private boolean isLocalFile(Uri uri) {
-        return FILE_SCHEME.equals(uri.getScheme());
-    }
-
-    private Drawable loadFile(String uri) {
-        Bitmap bitmap = BitmapFactory.decodeFile(Uri.parse(uri).getPath());
-        return new BitmapDrawable(NavigationApplication.instance.getResources(), bitmap);
-    }
-
-    private static Drawable loadResource(String iconSource) {
-        return ResourceDrawableIdHelper.getInstance().getResourceDrawable(NavigationApplication.instance, iconSource);
-    }
-
-    private StrictMode.ThreadPolicy adjustThreadPolicyDebug() {
-        StrictMode.ThreadPolicy threadPolicy = null;
-        if (NavigationApplication.instance.isDebug()) {
-            threadPolicy = StrictMode.getThreadPolicy();
-            StrictMode.setThreadPolicy(new StrictMode.ThreadPolicy.Builder().permitNetwork().build());
-        }
-        return threadPolicy;
-    }
-
-    private void restoreThreadPolicyDebug(@Nullable StrictMode.ThreadPolicy threadPolicy) {
-        if (NavigationApplication.instance.isDebug() && threadPolicy != null) {
-            StrictMode.setThreadPolicy(threadPolicy);
-        }
-    }
-
-    private static InputStream openStream(Context context, String uri) throws IOException {
-        return uri.contains("http") ? remoteUrl(uri) : localFile(context, uri);
-    }
-
-    private static InputStream remoteUrl(String uri) throws IOException {
-        return new URL(uri).openStream();
-    }
-
-    private static InputStream localFile(Context context, String uri) throws FileNotFoundException {
-        return context.getContentResolver().openInputStream(Uri.parse(uri));
-    }
-}

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

@@ -0,0 +1,132 @@
+package com.reactnativenavigation.utils
+
+import android.app.Activity
+import android.content.Context
+import android.graphics.BitmapFactory
+import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.Drawable
+import android.net.Uri
+import android.os.StrictMode
+import android.view.View
+import androidx.core.content.ContextCompat
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
+import com.reactnativenavigation.R
+import java.io.FileNotFoundException
+import java.io.IOException
+import java.io.InputStream
+import java.net.URL
+import java.util.*
+
+open class ImageLoader {
+    interface ImagesLoadingListener {
+        fun onComplete(drawable: List<Drawable>)
+        fun onComplete(drawable: Drawable)
+        fun onError(error: Throwable?)
+    }
+
+    open fun getBackButtonIcon(context: Activity): Drawable? {
+        val isRTL = context.window.decorView.layoutDirection == View.LAYOUT_DIRECTION_RTL
+        return ContextCompat.getDrawable(context, if (isRTL) R.drawable.ic_arrow_back_black_rtl_24dp else R.drawable.ic_arrow_back_black_24dp)
+    }
+
+    open fun loadIcon(context: Context, uri: String?): Drawable? {
+        if (uri == null) return null
+        try {
+            return getDrawable(context, uri)
+        } catch (e: IOException) {
+            e.printStackTrace()
+        }
+        return null
+    }
+
+    open fun loadIcon(context: Context, uri: String, listener: ImagesLoadingListener) {
+        try {
+            listener.onComplete(getDrawable(context, uri))
+        } catch (e: IOException) {
+            listener.onError(e)
+        }
+    }
+
+    open fun loadIcons(context: Context, uris: List<String>, listener: ImagesLoadingListener) {
+        try {
+            val drawables: MutableList<Drawable> = ArrayList()
+            for (uri in uris) {
+                val drawable = getDrawable(context, uri)
+                drawables.add(drawable)
+            }
+            listener.onComplete(drawables)
+        } catch (e: IOException) {
+            listener.onError(e)
+        }
+    }
+
+    @Throws(IOException::class)
+    private fun getDrawable(context: Context, source: String): Drawable {
+        var drawable: Drawable?
+        if (isLocalFile(Uri.parse(source))) {
+            drawable = loadFile(context, source)
+        } else {
+            drawable = loadResource(context, source)
+            if (drawable == null && context.isDebug()) {
+                drawable = readJsDevImage(context, source)
+            }
+        }
+        if (drawable == null) throw RuntimeException("Could not load image $source")
+        return drawable
+    }
+
+    @Throws(IOException::class)
+    private fun readJsDevImage(context: Context, source: String): Drawable {
+        val threadPolicy = adjustThreadPolicyDebug(context)
+        val `is` = openStream(context, source)
+        val bitmap = BitmapFactory.decodeStream(`is`)
+        restoreThreadPolicyDebug(context, threadPolicy)
+        return BitmapDrawable(context.resources, bitmap)
+    }
+
+    private fun isLocalFile(uri: Uri): Boolean {
+        return FILE_SCHEME == uri.scheme
+    }
+
+    private fun loadFile(context: Context, uri: String): Drawable {
+        val bitmap = BitmapFactory.decodeFile(Uri.parse(uri).path)
+        return BitmapDrawable(context.resources, bitmap)
+    }
+
+    private fun adjustThreadPolicyDebug(context: Context): StrictMode.ThreadPolicy? {
+        var threadPolicy: StrictMode.ThreadPolicy? = null
+        if (context.isDebug()) {
+            threadPolicy = StrictMode.getThreadPolicy()
+            StrictMode.setThreadPolicy(StrictMode.ThreadPolicy.Builder().permitNetwork().build())
+        }
+        return threadPolicy
+    }
+
+    private fun restoreThreadPolicyDebug(context: Context, threadPolicy: StrictMode.ThreadPolicy?) {
+        if (context.isDebug() && threadPolicy != null) {
+            StrictMode.setThreadPolicy(threadPolicy)
+        }
+    }
+
+    companion object {
+        private const val FILE_SCHEME = "file"
+        private fun loadResource(context: Context, iconSource: String): Drawable? {
+            return ResourceDrawableIdHelper.getInstance().getResourceDrawable(context, iconSource)
+        }
+
+        @Throws(IOException::class)
+        private fun openStream(context: Context, uri: String): InputStream? {
+            return if (uri.contains("http")) remoteUrl(uri) else localFile(context, uri)
+        }
+
+        @Throws(IOException::class)
+        private fun remoteUrl(uri: String): InputStream {
+            return URL(uri).openStream()
+        }
+
+        @Throws(FileNotFoundException::class)
+        private fun localFile(context: Context, uri: String): InputStream? {
+            return context.contentResolver.openInputStream(Uri.parse(uri))
+        }
+    }
+}

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

@@ -1,13 +1,14 @@
 package com.reactnativenavigation.utils;
 
 import android.graphics.drawable.Drawable;
-import androidx.annotation.NonNull;
 
 import java.util.List;
 
+import androidx.annotation.NonNull;
+
 public class ImageLoadingListenerAdapter implements ImageLoader.ImagesLoadingListener {
     @Override
-    public void onComplete(@NonNull List<Drawable> drawables) {
+    public void onComplete(@NonNull List<? extends Drawable> drawables) {
 
     }
 

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

@@ -1,7 +1,5 @@
 package com.reactnativenavigation.utils;
 
-import android.graphics.Color;
-import androidx.annotation.ColorInt;
 import android.text.SpannableString;
 import android.text.Spanned;
 import android.text.SpannedString;
@@ -9,12 +7,14 @@ import android.text.style.AbsoluteSizeSpan;
 import android.text.style.ForegroundColorSpan;
 import android.widget.TextView;
 
+import androidx.annotation.ColorInt;
+
 public class TextViewUtils {
     @ColorInt
     public static int getTextColor(TextView view) {
         SpannedString text = new SpannedString(view.getText());
         ForegroundColorSpan[] spans = text.getSpans(0, text.length(), ForegroundColorSpan.class);
-        return spans.length == 0 ? Color.WHITE : spans[0].getForegroundColor();
+        return spans.length == 0 ? view.getCurrentTextColor() : spans[0].getForegroundColor();
     }
 
     public static float getTextSize(TextView view) {

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

@@ -4,13 +4,14 @@ import android.content.Context;
 import android.content.res.Resources;
 import android.os.Handler;
 import android.os.Looper;
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
 import android.util.DisplayMetrics;
 import android.view.View;
 import android.view.ViewTreeObserver;
 import android.view.WindowManager;
 
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
 public class UiUtils {
     private static final int DEFAULT_TOOLBAR_HEIGHT = 56;
 
@@ -33,6 +34,17 @@ public class UiUtils {
         });
     }
 
+    public static void doOnLayout(@Nullable final View view, final Runnable task) {
+        if (view == null) return;
+        view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
+            @Override
+            public void onGlobalLayout() {
+                view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
+                task.run();
+            }
+        });
+    }
+
     public static void runOnMeasured(View view, Runnable task) {
         if (view.getHeight() > 0 && view.getWidth() > 0) {
             task.run();

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

@@ -5,7 +5,11 @@ import android.view.View;
 import androidx.annotation.NonNull;
 
 public class ViewTags {
-    public static @NonNull <T> T get(View view, int key, @NonNull T defaultValue) {
+    public static @NonNull <T> T get(View view, int key) {
+        return get(view, key, null);
+    }
+
+    public static @NonNull <T> T get(View view, int key, T defaultValue) {
         return view.getTag(key) == null ? defaultValue : (T) view.getTag(key);
     }
 }

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

@@ -1,19 +1,18 @@
 package com.reactnativenavigation.utils;
 
 import android.graphics.Point;
-import androidx.annotation.Nullable;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewManager;
 import android.view.ViewParent;
 
 import com.facebook.react.views.view.ReactViewBackgroundDrawable;
-import com.reactnativenavigation.react.ReactView;
-import com.reactnativenavigation.utils.Functions.Func1;
 
 import java.util.ArrayList;
 import java.util.List;
 
+import androidx.annotation.Nullable;
+
 import static com.reactnativenavigation.utils.ObjectUtils.perform;
 
 public class ViewUtils {
@@ -93,21 +92,14 @@ public class ViewUtils {
         return view.getLayoutParams().height < 0 ? view.getHeight() : view.getLayoutParams().height;
     }
 
-    public static void performOnParentReactView(View child, Func1<ReactView> task) {
-        ReactView parent = findParentReactView(child.getParent());
+    public static <T extends ViewGroup> T findParent(View view, Class<T> clazz) {
+        if (view == null) return null;
+        @Nullable ViewParent parent = view.getParent();
         if (parent != null) {
-            task.run(parent);
-        }
-    }
-
-    private static ReactView findParentReactView(ViewParent parent) {
-        if (parent == null) {
-            return null;
+            if (parent.getClass().isAssignableFrom(clazz)) return (T) parent;
+            return findParent((View) parent, clazz);
         }
-        if (parent instanceof ReactView) {
-            return (ReactView) parent;
-        }
-        return findParentReactView(parent.getParent());
+        return null;
     }
 
     public static Point getLocationOnScreen(View view) {
@@ -127,6 +119,12 @@ public class ViewUtils {
         return true;
     }
 
+    public static int getIndexInParent(View view) {
+        ViewParent parent = view.getParent();
+        if (parent == null) return -1;
+        return ((ViewGroup) parent).indexOfChild(view);
+    }
+
     public static int getBackgroundColor(View view) {
         if (view.getBackground() instanceof ReactViewBackgroundDrawable) {
             return ((ReactViewBackgroundDrawable) view.getBackground()).getColor();

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

@@ -8,6 +8,7 @@ import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.utils.StatusBarUtils;
 import com.reactnativenavigation.viewcontrollers.navigator.Navigator;
+import com.reactnativenavigation.viewcontrollers.viewcontrolleroverlay.ViewControllerOverlay;
 import com.reactnativenavigation.views.Component;
 
 import androidx.annotation.CallSuper;
@@ -23,7 +24,7 @@ public abstract class ChildController<T extends ViewGroup> extends ViewControlle
     }
 
     public ChildController(Activity activity, ChildControllersRegistry childRegistry, String id, Presenter presenter, Options initialOptions) {
-        super(activity, id, new NoOpYellowBoxDelegate(), initialOptions);
+        super(activity, id, new NoOpYellowBoxDelegate(), initialOptions, new ViewControllerOverlay(activity));
         this.presenter = presenter;
         this.childRegistry = childRegistry;
     }

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

@@ -84,7 +84,7 @@ public class ComponentViewController extends ChildController<ComponentLayout> {
     @NonNull
     @Override
     protected ComponentLayout createView() {
-        view = (ComponentLayout) viewCreator.create(getActivity(), getId(), componentName);
+        ComponentLayout view = (ComponentLayout) viewCreator.create(getActivity(), getId(), componentName);
         return (ComponentLayout) view.asView();
     }
 

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

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

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

@@ -20,6 +20,7 @@ import com.reactnativenavigation.utils.ImageLoadingListenerAdapter;
 import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.button.IconResolver;
+import com.reactnativenavigation.viewcontrollers.viewcontrolleroverlay.ViewControllerOverlay;
 import com.reactnativenavigation.views.titlebar.TitleBarReactButtonView;
 
 import java.util.List;
@@ -57,7 +58,7 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
                                     Button button,
                                     ReactViewCreator viewCreator,
                                     OnClickListener onClickListener) {
-        super(activity, button.id, new YellowBoxDelegate(), new Options());
+        super(activity, button.id, new YellowBoxDelegate(), new Options(), new ViewControllerOverlay(activity));
         this.navigationIconResolver = navigationIconResolver;
         this.optionsPresenter = optionsPresenter;
         this.button = button;

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

@@ -6,6 +6,7 @@ import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.viewcontrollers.viewcontrolleroverlay.ViewControllerOverlay;
 import com.reactnativenavigation.views.titlebar.TitleBarReactView;
 import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
 
@@ -15,7 +16,7 @@ public class TitleBarReactViewController extends ViewController<TitleBarReactVie
     private Component component;
 
     public TitleBarReactViewController(Activity activity, TitleBarReactViewCreator reactViewCreator) {
-        super(activity, CompatUtils.generateViewId() + "", new YellowBoxDelegate(), new Options());
+        super(activity, CompatUtils.generateViewId() + "", new YellowBoxDelegate(), new Options(), new ViewControllerOverlay(activity));
         this.reactViewCreator = reactViewCreator;
     }
 

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

@@ -17,13 +17,12 @@ import com.reactnativenavigation.utils.StringUtils;
 import com.reactnativenavigation.utils.UiThread;
 import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
+import com.reactnativenavigation.viewcontrollers.viewcontrolleroverlay.ViewControllerOverlay;
 import com.reactnativenavigation.views.BehaviourAdapter;
 import com.reactnativenavigation.views.Component;
 import com.reactnativenavigation.views.Renderable;
-import com.reactnativenavigation.views.element.Element;
 
 import java.util.ArrayList;
-import java.util.Collections;
 import java.util.List;
 
 import androidx.annotation.CallSuper;
@@ -40,7 +39,7 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         ViewGroup.OnHierarchyChangeListener,
         BehaviourAdapter {
 
-    private final List<Runnable> onAppearedListeners = new ArrayList();
+    private final List<Runnable> onAppearedListeners = new ArrayList<>();
     private boolean appearEventPosted;
     private boolean isFirstLayout = true;
     private Bool waitForRender = new NullBool();
@@ -69,17 +68,19 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     private boolean isDestroyed;
     private ViewVisibilityListener viewVisibilityListener = new ViewVisibilityListenerAdapter();
     protected FabPresenter fabOptionsPresenter;
+    private ViewControllerOverlay overlay;
 
     public boolean isDestroyed() {
         return isDestroyed;
     }
 
-    public ViewController(Activity activity, String id, YellowBoxDelegate yellowBoxDelegate, Options initialOptions) {
+    public ViewController(Activity activity, String id, YellowBoxDelegate yellowBoxDelegate, Options initialOptions, ViewControllerOverlay overlay) {
         this.activity = activity;
         this.id = id;
         this.yellowBoxDelegate = yellowBoxDelegate;
         fabOptionsPresenter = new FabPresenter();
         this.initialOptions = initialOptions;
+        this.overlay = overlay;
         options = initialOptions.copy();
     }
 
@@ -92,7 +93,11 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     }
 
     public void addOnAppearedListener(Runnable onAppearedListener) {
-        onAppearedListeners.add(onAppearedListener);
+        if (isShown) {
+            onAppearedListener.run();
+        } else {
+            onAppearedListeners.add(onAppearedListener);
+        }
     }
 
     public void removeOnAppearedListener(Runnable onAppearedListener) {
@@ -114,6 +119,14 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         return false;
     }
 
+    public void addOverlay(View v) {
+        perform(view, view -> overlay.add(view, v));
+    }
+
+    public void removeOverlay(View view) {
+        overlay.remove(view);
+    }
+
     @CheckResult
     public Options resolveCurrentOptions() {
         return options;
@@ -140,7 +153,7 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     }
 
     public void setDefaultOptions(Options defaultOptions) {
-        
+
     }
 
     public Activity getActivity() {
@@ -160,6 +173,10 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         return parentController;
     }
 
+    public ParentController requireParentController() {
+        return parentController;
+    }
+
     public void setParentController(@NonNull final ParentController parentController) {
         this.parentController = parentController;
     }
@@ -325,10 +342,6 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         if (controller != null) task.run(controller);
     }
 
-    public List<Element> getElements() {
-        return getView() instanceof IReactView && view != null? ((IReactView) view).getElements() : Collections.EMPTY_LIST;
-    }
-
     @Override
     @CallSuper
     public boolean onMeasureChild(CoordinatorLayout parent, ViewGroup child, int parentWidthMeasureSpec, int widthUsed, int parentHeightMeasureSpec, int heightUsed) {

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/externalcomponent/ExternalComponentViewController.java

@@ -13,6 +13,7 @@ import com.reactnativenavigation.utils.CoordinatorLayoutUtils;
 import com.reactnativenavigation.utils.StatusBarUtils;
 import com.reactnativenavigation.viewcontrollers.NoOpYellowBoxDelegate;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.viewcontrolleroverlay.ViewControllerOverlay;
 import com.reactnativenavigation.views.BehaviourDelegate;
 import com.reactnativenavigation.views.ExternalComponentLayout;
 
@@ -29,7 +30,7 @@ public class ExternalComponentViewController extends ViewController<ExternalComp
     private final ExternalComponentPresenter presenter;
 
     public ExternalComponentViewController(Activity activity, String id, ExternalComponent externalComponent, ExternalComponentCreator componentCreator, ReactInstanceManager reactInstanceManager, EventEmitter emitter, ExternalComponentPresenter presenter, Options initialOptions) {
-        super(activity, id, new NoOpYellowBoxDelegate(), initialOptions);
+        super(activity, id, new NoOpYellowBoxDelegate(), initialOptions, new ViewControllerOverlay(activity));
         this.externalComponent = externalComponent;
         this.componentCreator = componentCreator;
         this.reactInstanceManager = reactInstanceManager;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java

@@ -1,8 +1,6 @@
 package com.reactnativenavigation.viewcontrollers.modal;
 
 import android.app.Activity;
-import androidx.annotation.RestrictTo;
-import androidx.coordinatorlayout.widget.CoordinatorLayout;
 import android.view.ViewGroup;
 
 import com.reactnativenavigation.anim.ModalAnimator;
@@ -18,6 +16,9 @@ import java.util.List;
 
 import javax.annotation.Nullable;
 
+import androidx.annotation.RestrictTo;
+import androidx.coordinatorlayout.widget.CoordinatorLayout;
+
 public class ModalStack {
     private List<ViewController> modals = new ArrayList<>();
     private final ModalPresenter presenter;

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

@@ -34,9 +34,7 @@ public class Navigator extends ParentController {
     private final OverlayManager overlayManager;
     private final RootPresenter rootPresenter;
     private ViewController root;
-
     private ViewController previousRoot;
-
     private final CoordinatorLayout rootLayout;
     private final CoordinatorLayout modalsLayout;
     private final CoordinatorLayout overlaysLayout;

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

@@ -5,6 +5,7 @@ import android.view.View;
 import android.view.ViewGroup;
 
 import com.reactnativenavigation.anim.NavigationAnimator;
+import com.reactnativenavigation.parse.NestedAnimationsOptions;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.StackPresenter;
@@ -155,23 +156,15 @@ public class StackController extends ParentController<StackLayout> {
         child.setParentController(this);
         stack.push(child.getId(), child);
         Options resolvedOptions = resolveCurrentOptions(presenter.getDefaultOptions());
-        addChildToStack(child, child.getView(), resolvedOptions);
+        addChildToStack(child, resolvedOptions);
 
         if (toRemove != null) {
-            if (resolvedOptions.animations.push.enabled.isTrueOrUndefined()) {
-                if (resolvedOptions.animations.push.waitForRender.isTrue()) {
-                    child.getView().setAlpha(0);
-                    child.addOnAppearedListener(() -> animator.push(child.getView(), resolvedOptions.animations.push, resolvedOptions.transitions, toRemove.getElements(), child.getElements(), () -> {
-                        getView().removeView(toRemove.getView());
-                        listener.onSuccess(child.getId());
-                    }));
+            NestedAnimationsOptions animation = resolvedOptions.animations.push;
+            if (animation.enabled.isTrueOrUndefined()) {
+                if (animation.waitForRender.isTrue() || resolvedOptions.animations.push.sharedElements.hasValue()) {
+                    animator.push(child, toRemove, resolvedOptions, () -> onPushAnimationComplete(child, toRemove, listener));
                 } else {
-                    animator.push(child.getView(), resolvedOptions.animations.push, () -> {
-                        if (!toRemove.equals(peek())) {
-                            getView().removeView(toRemove.getView());
-                        }
-                        listener.onSuccess(child.getId());
-                    });
+                    animator.push(child, toRemove, resolvedOptions, () -> onPushAnimationComplete(child, toRemove, listener));
                 }
             } else {
                 getView().removeView(toRemove.getView());
@@ -182,10 +175,15 @@ public class StackController extends ParentController<StackLayout> {
         }
     }
 
-    private void addChildToStack(ViewController child, View view, Options resolvedOptions) {
+    private void onPushAnimationComplete(ViewController toAdd, ViewController toRemove, CommandListener listener) {
+        if (!peek().equals(toRemove)) getView().removeView(toRemove.getView());
+        listener.onSuccess(toAdd.getId());
+    }
+
+    private void addChildToStack(ViewController child, Options resolvedOptions) {
         child.setWaitForRender(resolvedOptions.animations.push.waitForRender);
         if (size() == 1) presenter.applyInitialChildLayoutOptions(resolvedOptions);
-        getView().addView(view, getView().getChildCount() - 1, matchParentWithBehaviour(new StackBehaviour(this)));
+        getView().addView(child.getView(), getView().getChildCount() - 1, matchParentWithBehaviour(new StackBehaviour(this)));
     }
 
     public void setRoot(List<ViewController> children, CommandListener listener) {
@@ -204,7 +202,7 @@ public class StackController extends ParentController<StackLayout> {
         child.setParentController(this);
         stack.push(child.getId(), child);
         Options resolvedOptions = resolveCurrentOptions(presenter.getDefaultOptions());
-        addChildToStack(child, child.getView(), resolvedOptions);
+        addChildToStack(child, resolvedOptions);
 
         CommandListener listenerAdapter = new CommandListenerAdapter() {
             @Override
@@ -229,16 +227,14 @@ public class StackController extends ParentController<StackLayout> {
             if (resolvedOptions.animations.setStackRoot.waitForRender.isTrue()) {
                 child.getView().setAlpha(0);
                 child.addOnAppearedListener(() -> animator.push(
-                        child.getView(),
-                        resolvedOptions.animations.setStackRoot,
-                        resolvedOptions.transitions,
-                        toRemove.getElements(),
-                        child.getElements(),
+                        child,
+                        toRemove,
+                        resolvedOptions,
                         () -> listenerAdapter.onSuccess(child.getId())
                     )
                 );
             } else {
-                animator.push(child.getView(), resolvedOptions.animations.setStackRoot, () -> listenerAdapter.onSuccess(child.getId()));
+                animator.push(child, toRemove, resolvedOptions, () -> listenerAdapter.onSuccess(child.getId()));
             }
         } else {
             listenerAdapter.onSuccess(child.getId());

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/topbar/TopBarBackgroundViewController.java

@@ -8,6 +8,7 @@ import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.YellowBoxDelegate;
+import com.reactnativenavigation.viewcontrollers.viewcontrolleroverlay.ViewControllerOverlay;
 import com.reactnativenavigation.views.topbar.TopBarBackgroundView;
 import com.reactnativenavigation.views.topbar.TopBarBackgroundViewCreator;
 
@@ -17,7 +18,7 @@ public class TopBarBackgroundViewController extends ViewController<TopBarBackgro
     private Component component;
 
     public TopBarBackgroundViewController(Activity activity, TopBarBackgroundViewCreator viewCreator) {
-        super(activity, CompatUtils.generateViewId() + "", new YellowBoxDelegate(), new Options());
+        super(activity, CompatUtils.generateViewId() + "", new YellowBoxDelegate(), new Options(), new ViewControllerOverlay(activity));
         this.viewCreator = viewCreator;
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontrolleroverlay/ViewControllerOverlay.kt

@@ -0,0 +1,28 @@
+package com.reactnativenavigation.viewcontrollers.viewcontrolleroverlay
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewGroup.LayoutParams.MATCH_PARENT
+import android.widget.FrameLayout
+import com.reactnativenavigation.utils.ViewUtils.removeFromParent
+
+class ViewControllerOverlay(context: Context) {
+    private val overlay: FrameLayout = FrameLayout(context)
+
+    fun add(parent: ViewGroup, view: View) {
+        attachOverlayToParent(parent)
+        overlay.addView(view)
+    }
+
+    fun remove(view: View) {
+        overlay.removeView(view)
+        if (overlay.childCount == 0) removeFromParent(overlay)
+    }
+
+    private fun attachOverlayToParent(parent: ViewGroup) {
+        if (overlay.parent == null) {
+            parent.addView(overlay, MATCH_PARENT, MATCH_PARENT)
+        }
+    }
+}

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

@@ -11,11 +11,8 @@ import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.react.ReactView;
 import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.viewcontrollers.TitleBarButtonController;
-import com.reactnativenavigation.views.element.Element;
 import com.reactnativenavigation.views.touch.OverlayTouchDelegate;
 
-import java.util.List;
-
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
 
 import static com.reactnativenavigation.utils.CoordinatorLayoutUtils.matchParentLP;
@@ -84,11 +81,6 @@ public class ComponentLayout extends CoordinatorLayout implements ReactComponent
         return reactView.isRendered();
     }
 
-    @Override
-    public List<Element> getElements() {
-        return reactView.getElements();
-    }
-
     @Override
     public void onPress(String buttonId) {
         reactView.sendOnNavigationButtonPressed(buttonId);

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

@@ -4,7 +4,6 @@ import android.content.Context;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffColorFilter;
 import android.graphics.drawable.Drawable;
-import androidx.annotation.NonNull;
 
 import com.github.clans.fab.FloatingActionButton;
 import com.reactnativenavigation.anim.FabAnimator;
@@ -17,6 +16,8 @@ import com.reactnativenavigation.utils.ImageLoadingListenerAdapter;
 import java.util.Collections;
 import java.util.List;
 
+import androidx.annotation.NonNull;
+
 
 public class Fab extends FloatingActionButton implements FabAnimator {
 
@@ -32,7 +33,7 @@ public class Fab extends FloatingActionButton implements FabAnimator {
     public void applyIcon(String icon, Colour color) {
         new ImageLoader().loadIcons(getContext(), Collections.singletonList(icon), new ImageLoadingListenerAdapter() {
             @Override
-            public void onComplete(@NonNull List<Drawable> drawables) {
+            public void onComplete(@NonNull List<? extends Drawable> drawables) {
                 if (color.hasValue()) drawables.get(0).setColorFilter(new PorterDuffColorFilter(color.get(), PorterDuff.Mode.SRC_IN));
                 setImageDrawable(drawables.get(0));
             }

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

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

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

@@ -0,0 +1,19 @@
+package com.reactnativenavigation.views.element
+
+import android.animation.AnimatorSet
+import android.view.View
+import com.reactnativenavigation.parse.ElementTransitionOptions
+import com.reactnativenavigation.viewcontrollers.ViewController
+
+class ElementTransition(private val transitionOptions: ElementTransitionOptions) : Transition() {
+    val id: String
+        get() = transitionOptions.id
+    override lateinit var viewController: ViewController<*>
+    override lateinit var view: View
+    override val topInset: Int
+        get() = viewController.topInset
+
+    override fun createAnimators(): AnimatorSet = transitionOptions.getAnimation(view)
+
+    fun isValid(): Boolean = ::view.isInitialized
+}

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

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

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

@@ -0,0 +1,74 @@
+package com.reactnativenavigation.views.element
+
+import android.animation.AnimatorSet
+import android.view.View
+import androidx.core.view.doOnLayout
+import com.facebook.react.uimanager.util.ReactFindViewUtil.OnViewFoundListener
+import com.facebook.react.uimanager.util.ReactFindViewUtil.findView
+import com.reactnativenavigation.parse.AnimationOptions
+import com.reactnativenavigation.parse.NestedAnimationsOptions
+import com.reactnativenavigation.utils.Functions.Func1
+import com.reactnativenavigation.viewcontrollers.ViewController
+
+open class ElementTransitionManager {
+    private val animatorCreator: TransitionAnimatorCreator = TransitionAnimatorCreator()
+
+    fun createTransitions(animation: NestedAnimationsOptions, fromScreen: ViewController<*>, toScreen: ViewController<*>, onAnimatorsCreated: Func1<TransitionSet?>) {
+        val sharedElements = animation.sharedElements
+        val elementTransitions = animation.elementTransitions
+        if (!sharedElements.hasValue() && !elementTransitions.hasValue) {
+            onAnimatorsCreated.run(TransitionSet())
+            return
+        }
+        val transitionSet = TransitionSet()
+        for (transitionOptions in sharedElements.get()) {
+            val transition = SharedElementTransition(toScreen, transitionOptions!!)
+            findView(fromScreen.view, transition.fromId)?.let { transition.from = it }
+            findView(toScreen.view, object : OnViewFoundListener {
+                override fun getNativeId(): String {
+                    return transition.toId
+                }
+
+                override fun onViewFound(view: View) {
+                    view.doOnLayout {
+                        transition.to = view
+                        if (transition.isValid()) transitionSet.add(transition)
+                        if (transitionSet.size() == sharedElements.get().size + elementTransitions.transitions.size) {
+                            onAnimatorsCreated.run(transitionSet)
+                        }
+                    }
+                }
+            })
+        }
+        for (transitionOptions in elementTransitions.transitions) {
+            val transition = ElementTransition(transitionOptions)
+            findView(fromScreen.view, transition.id)?.let {
+                transition.view = it
+                transition.viewController = fromScreen
+                transitionSet.add(transition)
+            }
+            if (transition.isValid()) continue
+            findView(toScreen.view, object : OnViewFoundListener {
+                override fun getNativeId(): String {
+                    return transition.id
+                }
+
+                override fun onViewFound(view: View) {
+                    view.doOnLayout {
+                        transition.view = view
+                        transition.viewController = toScreen
+                        transitionSet.add(transition)
+                        if (transitionSet.size() == sharedElements.get().size + elementTransitions.transitions.size) {
+                            onAnimatorsCreated.run(transitionSet)
+                        }
+                    }
+                }
+            })
+        }
+    }
+
+    fun createAnimators(fadeAnimation: AnimationOptions?, transitionSet: TransitionSet?): AnimatorSet {
+        return animatorCreator.create(fadeAnimation!!, transitionSet!!)
+    }
+
+}

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

@@ -0,0 +1,42 @@
+package com.reactnativenavigation.views.element
+
+import android.animation.AnimatorSet
+import android.view.View
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.viewcontrollers.ViewController
+import com.reactnativenavigation.views.element.animators.*
+
+class SharedElementTransition(appearing: ViewController<*>, private val options: SharedElementTransitionOptions) : Transition() {
+    val fromId: String = options.fromId.get()
+    val toId: String = options.toId.get()
+    lateinit var from: View
+    lateinit var to: View
+    override var viewController: ViewController<*> = appearing
+    override val view: View
+        get() = to
+    override val topInset: Int
+        get() = viewController.topInset
+
+    fun isValid(): Boolean = this::from.isInitialized
+
+    override fun createAnimators(): AnimatorSet {
+        val animators = animators()
+                .filter { it.shouldAnimateProperty() }
+                .map { it.create(options) }
+        val set = AnimatorSet()
+        set.playTogether(animators)
+        return set
+    }
+
+    private fun animators(): List<PropertyAnimatorCreator<*>> {
+        return listOf(
+                XAnimator(from, to),
+                YAnimator(from, to),
+                MatrixAnimator(from, to),
+                ScaleXAnimator(from, to),
+                ScaleYAnimator(from, to),
+                BackgroundColorAnimator(from, to),
+                TextChangeAnimator(from, to)
+        )
+    }
+}

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

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.views.element
+
+import android.animation.AnimatorSet
+import android.view.View
+import com.reactnativenavigation.viewcontrollers.ViewController
+
+abstract class Transition {
+    abstract var viewController: ViewController<*>
+    abstract val view: View
+    abstract val topInset: Int
+
+    abstract fun createAnimators(): AnimatorSet
+}

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

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

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

@@ -0,0 +1,137 @@
+package com.reactnativenavigation.views.element
+
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.AnimatorSet
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.core.animation.doOnCancel
+import androidx.core.animation.doOnEnd
+import com.facebook.react.uimanager.ViewGroupManager
+import com.reactnativenavigation.R
+import com.reactnativenavigation.parse.AnimationOptions
+import com.reactnativenavigation.utils.ViewTags
+import com.reactnativenavigation.utils.ViewUtils
+import java.util.*
+
+open class TransitionAnimatorCreator {
+    fun create(fadeAnimation: AnimationOptions, transitions: TransitionSet): AnimatorSet {
+        if (transitions.isEmpty) return AnimatorSet()
+        recordIndices(transitions)
+        reparentViews(transitions)
+        val animators = ArrayList<Animator>()
+        animators.addAll(createSharedElementTransitionAnimators(transitions.validSharedElementTransitions))
+        animators.addAll(createElementTransitionAnimators(transitions.validElementTransitions))
+
+        setAnimatorsDuration(animators, fadeAnimation)
+        val set = AnimatorSet()
+        set.doOnEnd { restoreViewsToOriginalState(transitions) }
+        set.doOnCancel { restoreViewsToOriginalState(transitions) }
+        set.playTogether(animators)
+        return set
+    }
+
+    private fun recordIndices(transitions: TransitionSet) {
+        transitions.forEach {
+            it.view.setTag(R.id.original_index_in_parent, ViewUtils.getIndexInParent(it.view))
+        }
+    }
+
+    private fun setAnimatorsDuration(animators: Collection<Animator>, fadeAnimation: AnimationOptions) {
+        for (animator in animators) {
+            if (animator is AnimatorSet) {
+                setAnimatorsDuration(animator.childAnimations, fadeAnimation)
+            } else if (animator.duration.toInt() <= 0) {
+                animator.duration = fadeAnimation.duration.toLong()
+            }
+        }
+    }
+
+    private fun reparentViews(transitions: TransitionSet) {
+        transitions.transitions
+                .sortedBy { ViewGroupManager.getViewZIndex(it.view) }
+                .forEach {
+                    reparent(it)
+                }
+    }
+
+    private fun createSharedElementTransitionAnimators(transitions: List<SharedElementTransition>): List<AnimatorSet> {
+        val animators: MutableList<AnimatorSet> = ArrayList()
+        for (transition in transitions) {
+            animators.add(createSharedElementAnimator(transition))
+        }
+        return animators
+    }
+
+    private fun createSharedElementAnimator(transition: SharedElementTransition): AnimatorSet {
+        val set = AnimatorSet()
+        set.playTogether(transition.createAnimators())
+        set.addListener(object : AnimatorListenerAdapter() {
+            override fun onAnimationStart(animation: Animator) {
+                transition.from.alpha = 0f
+            }
+        })
+        return set
+    }
+
+    private fun createElementTransitionAnimators(transitions: List<ElementTransition>): List<AnimatorSet> {
+        val animators: MutableList<AnimatorSet> = ArrayList()
+        for (transition in transitions) {
+            animators.add(transition.createAnimators())
+        }
+        return animators
+    }
+
+    private fun restoreViewsToOriginalState(transitions: TransitionSet) {
+        mutableListOf<Transition>().apply {
+            addAll(transitions.validSharedElementTransitions)
+            addAll(transitions.validElementTransitions)
+            sortBy { ViewGroupManager.getViewZIndex(it.view) }
+            sortBy { it.view.getTag(R.id.original_index_in_parent) as Int}
+            forEach {
+                it.viewController.requireParentController().removeOverlay(it.view)
+                returnToOriginalParent(it.view)
+            }
+        }
+        transitions.validSharedElementTransitions.forEach {
+            it.from.alpha = 1f
+        }
+    }
+
+    private fun reparent(transition: Transition) {
+        with(transition) {
+            val biologicalParent = view.parent as ViewGroup
+            view.setTag(R.id.original_parent, biologicalParent)
+            view.setTag(R.id.original_layout_params, view.layoutParams)
+            view.setTag(R.id.original_top, view.top)
+            view.setTag(R.id.original_bottom, view.bottom)
+            view.setTag(R.id.original_right, view.right)
+            view.setTag(R.id.original_left, view.left)
+
+            val loc = ViewUtils.getLocationOnScreen(view)
+            biologicalParent.removeView(view)
+
+            val lp = FrameLayout.LayoutParams(view.layoutParams)
+            lp.topMargin = loc.y + viewController.topInset
+            lp.topMargin = loc.y
+            lp.leftMargin = loc.x
+            lp.width = view.width
+            lp.height = view.height
+            view.layoutParams = lp
+            transition.viewController.requireParentController().addOverlay(view)
+        }
+    }
+
+    private fun returnToOriginalParent(element: View) {
+        ViewUtils.removeFromParent(element)
+        element.top = ViewTags.get(element, R.id.original_top)
+        element.bottom = ViewTags.get(element, R.id.original_bottom)
+        element.right = ViewTags.get(element, R.id.original_right)
+        element.left = ViewTags.get(element, R.id.original_left)
+        val parent = ViewTags.get<ViewGroup>(element, R.id.original_parent)
+        val lp = ViewTags.get<ViewGroup.LayoutParams>(element, R.id.original_layout_params)
+        val index = ViewTags.get<Int>(element, R.id.original_index_in_parent)
+        parent.addView(element, index, lp)
+    }
+}

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

@@ -0,0 +1,27 @@
+package com.reactnativenavigation.views.element
+
+import java.util.*
+
+class TransitionSet {
+    var validSharedElementTransitions: MutableList<SharedElementTransition> = ArrayList()
+    var validElementTransitions: MutableList<ElementTransition> = ArrayList()
+    val isEmpty: Boolean
+        get() = size() == 0
+    val transitions: List<Transition>
+        get() = validElementTransitions + validSharedElementTransitions
+
+    fun add(transition: SharedElementTransition) {
+        validSharedElementTransitions.add(transition)
+    }
+
+    fun add(transition: ElementTransition) {
+        validElementTransitions.add(transition)
+    }
+
+    fun forEach(action: ((Transition) -> Unit)) {
+        validSharedElementTransitions.forEach(action)
+        validElementTransitions.forEach(action)
+    }
+
+    fun size(): Int = validElementTransitions.size + validSharedElementTransitions.size
+}

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

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

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

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

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

@@ -0,0 +1,28 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.animation.ObjectAnimator
+import android.view.View
+import android.view.ViewGroup
+import com.facebook.react.views.text.ReactTextView
+import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.utils.ColorUtils
+import com.reactnativenavigation.utils.ViewUtils
+
+class BackgroundColorAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
+    override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
+        return fromChild.background is ReactViewBackgroundDrawable &&
+                toChild.background is ReactViewBackgroundDrawable && (fromChild.background as ReactViewBackgroundDrawable).color != (toChild.background as ReactViewBackgroundDrawable).color
+    }
+
+    override fun excludedViews() = listOf(ReactTextView::class.java)
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        return ObjectAnimator.ofObject(
+                BackgroundColorEvaluator(to.background as ReactViewBackgroundDrawable),
+                ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(from)),
+                ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(to))
+        ).setDuration(options.getDuration())
+    }
+}

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

@@ -0,0 +1,15 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.TypeEvaluator
+import androidx.core.graphics.ColorUtils
+import com.facebook.react.views.view.ReactViewBackgroundDrawable
+
+class BackgroundColorEvaluator(private val background: ReactViewBackgroundDrawable) : TypeEvaluator<DoubleArray> {
+    private val color = DoubleArray(3)
+
+    override fun evaluate(ratio: Float, from: DoubleArray, to: DoubleArray): DoubleArray {
+        ColorUtils.blendLAB(from, to, ratio.toDouble(), color)
+        background.color = com.reactnativenavigation.utils.ColorUtils.labToColor(color)
+        return color
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.animation.ObjectAnimator
+import android.animation.TypeEvaluator
+import android.graphics.Rect
+import android.view.View
+import com.facebook.drawee.drawable.ScalingUtils.InterpolatingScaleType
+import com.facebook.react.views.image.ReactImageView
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.utils.ViewUtils
+
+class MatrixAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactImageView>(from, to) {
+    override fun shouldAnimateProperty(fromChild: ReactImageView, toChild: ReactImageView): Boolean {
+        return !ViewUtils.areDimensionsEqual(from, to)
+    }
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        with(to as ReactImageView) {
+            hierarchy.actualImageScaleType = InterpolatingScaleType(
+                    getScaleType(from),
+                    getScaleType(to),
+                    calculateBounds(from),
+                    calculateBounds(to)
+            )
+            return ObjectAnimator.ofObject(TypeEvaluator<Float> { fraction: Float, _: Any, _: Any ->
+                hierarchy.actualImageScaleType?.let {
+                    (hierarchy.actualImageScaleType as InterpolatingScaleType?)!!.value = fraction
+                    to.invalidate()
+                }
+                null
+            }, 0, 1).setDuration(options.getDuration())
+        }
+    }
+
+    private fun getScaleType(child: View) = (child as ReactImageView).hierarchy.actualImageScaleType
+
+    private fun calculateBounds(view: View): Rect = Rect(0, 0, view.width, view.height)
+}

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

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

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

@@ -0,0 +1,27 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.view.View
+import androidx.annotation.CallSuper
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import java.lang.reflect.ParameterizedType
+
+abstract class PropertyAnimatorCreator<T : View> internal constructor(protected var from: View, protected var to: View) {
+    @CallSuper
+    fun shouldAnimateProperty(): Boolean {
+        val type = childClass
+        return type.isInstance(from) &&
+                type.isInstance(to) &&
+                !excludedViews().contains(from.javaClass) &&
+                !excludedViews().contains(to.javaClass) &&
+                shouldAnimateProperty(from as T, to as T)
+    }
+
+    protected abstract fun shouldAnimateProperty(fromChild: T, toChild: T): Boolean
+    protected open fun excludedViews() = emptyList<Class<*>>()
+
+    abstract fun create(options: SharedElementTransitionOptions): Animator
+    private val childClass: Class<T>
+        get() = (javaClass.genericSuperclass as ParameterizedType).actualTypeArguments[0] as Class<T>
+
+}

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

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

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

@@ -0,0 +1,22 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.animation.ObjectAnimator
+import android.view.View
+import android.view.ViewGroup
+import com.facebook.react.views.text.ReactTextView
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+
+class ScaleXAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
+    override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
+        return fromChild.childCount == 0 && toChild.childCount == 0
+    }
+
+    override fun excludedViews(): List<Class<*>> = listOf<Class<*>>(ReactTextView::class.java)
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        return ObjectAnimator
+                .ofFloat(to, View.SCALE_X, from.width.toFloat() / to.width, 1f)
+                .setDuration(options.getDuration())
+    }
+}

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

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

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

@@ -0,0 +1,22 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.animation.ObjectAnimator
+import android.view.View
+import android.view.ViewGroup
+import com.facebook.react.views.text.ReactTextView
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+
+class ScaleYAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
+    override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
+        return fromChild.childCount == 0 && toChild.childCount == 0
+    }
+
+    override fun excludedViews() = listOf(ReactTextView::class.java)
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        return ObjectAnimator
+                .ofFloat(to, View.SCALE_Y, from.height.toFloat() / to.height, 1f)
+                .setDuration(options.getDuration())
+    }
+}

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

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

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

@@ -0,0 +1,43 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.graphics.Rect
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import com.facebook.react.views.text.ReactTextView
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.utils.TextViewUtils
+import com.reactnativenavigation.utils.ViewUtils
+import com.shazam.android.widget.text.reflow.ReflowTextAnimatorHelper
+
+class TextChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactTextView>(from, to) {
+    override fun shouldAnimateProperty(fromChild: ReactTextView, toChild: ReactTextView): Boolean {
+        val fromXy = ViewUtils.getLocationOnScreen(from)
+        val toXy = ViewUtils.getLocationOnScreen(to)
+        return TextViewUtils.getTextSize(fromChild) != TextViewUtils.getTextSize(toChild) ||
+                !fromXy.equals(toXy.x, toXy.y)
+    }
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        return ReflowTextAnimatorHelper.Builder(from as TextView, to as TextView)
+                .calculateDuration(false)
+                .setBoundsCalculator { view: View ->
+                    val loc = IntArray(2)
+                    view.getLocationInWindow(loc)
+                    val x = loc[0]
+                    val y = if (view == to) (to.layoutParams as ViewGroup.MarginLayoutParams).topMargin else loc[1]
+                    Rect(
+                            x,
+                            y,
+                            x + view.width,
+                            y + view.height
+                    )
+                }
+                .setTextColorGetter {
+                    TextViewUtils.getTextColor(it)
+                }
+                .buildAnimator()
+                .setDuration(options.getDuration())
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.animation.ObjectAnimator
+import android.view.View
+import android.view.View.TRANSLATION_X
+import com.facebook.react.views.text.ReactTextView
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.utils.ViewUtils
+
+class XAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to) {
+    private val dx: Int
+
+    init {
+        val fromXy = ViewUtils.getLocationOnScreen(from)
+        val toXy = ViewUtils.getLocationOnScreen(to)
+        dx = fromXy.x - toXy.x
+        to.pivotX = 0f
+    }
+
+    override fun excludedViews() = listOf(ReactTextView::class.java)
+
+    override fun shouldAnimateProperty(fromChild: View, toChild: View) = dx != 0
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        return ObjectAnimator.ofFloat(to, TRANSLATION_X, dx.toFloat(), 0f).setDuration(options.getDuration())
+    }
+}

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

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

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

@@ -0,0 +1,29 @@
+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.animation.ObjectAnimator
+import android.view.View
+import android.view.View.TRANSLATION_Y
+import android.view.ViewGroup
+import com.facebook.react.views.text.ReactTextView
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.utils.ViewUtils
+
+class YAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to) {
+    private val dy: Int
+
+    init {
+        val fromXy = ViewUtils.getLocationOnScreen(from)
+        val toY = (to.layoutParams as ViewGroup.MarginLayoutParams).topMargin
+        dy = fromXy.y - toY
+        to.pivotY = 0f
+    }
+
+    override fun shouldAnimateProperty(fromChild: View, toChild: View) = dy != 0
+
+    override fun excludedViews() = listOf(ReactTextView::class.java)
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        return ObjectAnimator.ofFloat(to, TRANSLATION_Y, dy.toFloat(), 0f).setDuration(options.getDuration())
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/titlebar/TitleBar.java

@@ -28,6 +28,7 @@ import androidx.appcompat.widget.Toolbar;
 import static com.reactnativenavigation.utils.ObjectUtils.perform;
 import static com.reactnativenavigation.utils.UiUtils.runOnPreDrawOnce;
 import static com.reactnativenavigation.utils.ViewUtils.findChildByClass;
+import static com.reactnativenavigation.utils.ViewUtils.findChildrenByClass;
 
 @SuppressLint("ViewConstructor")
 public class TitleBar extends Toolbar {
@@ -109,11 +110,10 @@ public class TitleBar extends Toolbar {
 
     public void alignTextView(Alignment alignment, TextView view) {
         if (StringUtils.isEmpty(view.getText())) return;
-        Integer direction = view.getParent().getLayoutDirection();
+        int direction = view.getParent().getLayoutDirection();
         boolean isRTL = direction == View.LAYOUT_DIRECTION_RTL;
 
         if (alignment == Alignment.Center) {
-            //noinspection IntegerDivisionInFloatingPointContext
             view.setX((getWidth() - view.getWidth()) / 2);
         } else if (leftButtonController != null) {
             view.setX(isRTL ? (getWidth() - view.getWidth()) - getContentInsetStartWithNavigation() : getContentInsetStartWithNavigation());
@@ -128,17 +128,13 @@ public class TitleBar extends Toolbar {
 
         if(changed || isTitleChanged) {
             TextView title = findTitleTextView();
-            if (title != null) {
-                this.alignTextView(titleAlignment, title);
-            }
+            if (title != null) this.alignTextView(titleAlignment, title);
             isTitleChanged = false;
         }
 
         if(changed || isSubtitleChanged) {
             TextView subtitle = findSubtitleTextView();
-            if (subtitle != null) {
-                this.alignTextView(subtitleAlignment, subtitle);
-            }
+            if (subtitle != null) this.alignTextView(subtitleAlignment, subtitle);
             isSubtitleChanged = false;
         }
     }
@@ -151,13 +147,13 @@ public class TitleBar extends Toolbar {
 
     @Nullable
     public TextView findTitleTextView() {
-        List<TextView> children = ViewUtils.findChildrenByClass(this, TextView.class, textView -> textView.getText().equals(getTitle()));
+        List<TextView> children = findChildrenByClass(this, TextView.class, textView -> textView.getText().equals(getTitle()));
         return children.isEmpty() ? null : children.get(0);
     }
 
     @Nullable
     public TextView findSubtitleTextView() {
-        List<TextView> children = ViewUtils.findChildrenByClass(this, TextView.class, textView -> textView.getText().equals(getSubtitle()));
+        List<TextView> children = findChildrenByClass(this, TextView.class, textView -> textView.getText().equals(getSubtitle()));
         return children.isEmpty() ? null : children.get(0);
     }
 

lib/android/app/src/main/res/values/ids.xml

@@ -5,4 +5,12 @@
     <item name="topBarBackgroundComponent" type="id"/>
     <item name="bottomTabs" type="id"/>
     <item name="fab_bottom_margin" type="id" />
+
+    <item name="original_parent" type="id" />
+    <item name="original_layout_params" type="id" />
+    <item name="original_index_in_parent" type="id" />
+    <item name="original_top" type="id" />
+    <item name="original_bottom" type="id" />
+    <item name="original_right" type="id" />
+    <item name="original_left" type="id" />
 </resources>

lib/android/app/src/reactNative51/java/com/reactnativenavigation/react/NavigationReactNativeHost.java

@@ -1,9 +1,5 @@
 package com.reactnativenavigation.react;
 
-import android.app.Application;
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactInstanceManagerBuilder;
@@ -11,20 +7,17 @@ import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.common.LifecycleState;
 import com.facebook.react.devsupport.interfaces.DevBundleDownloadListener;
-import com.facebook.react.shell.MainReactPackage;
 import com.reactnativenavigation.NavigationApplication;
 
-import java.util.ArrayList;
-import java.util.List;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 
 /**
  * Default implementation of {@link ReactNativeHost} that includes {@link NavigationPackage}
  * and user-defined additional packages.
  */
-public class NavigationReactNativeHost extends ReactNativeHost implements BundleDownloadListenerProvider {
+public abstract class NavigationReactNativeHost extends ReactNativeHost implements BundleDownloadListenerProvider {
 
-    private final boolean isDebug;
-    private final List<ReactPackage> additionalReactPackages;
     private @Nullable NavigationDevBundleDownloadListener bundleListener;
     private final DevBundleDownloadListener bundleListenerMediator = new DevBundleDownloadListenerAdapter() {
         @Override
@@ -35,16 +28,9 @@ public class NavigationReactNativeHost extends ReactNativeHost implements Bundle
         }
     };
 
-
-    public NavigationReactNativeHost(NavigationApplication application) {
-        this(application, application.isDebug(), application.createAdditionalReactPackages());
-    }
-
     @SuppressWarnings("WeakerAccess")
-    public NavigationReactNativeHost(Application application, boolean isDebug, final List<ReactPackage> additionalReactPackages) {
+    public NavigationReactNativeHost(NavigationApplication application) {
         super(application);
-        this.isDebug = isDebug;
-        this.additionalReactPackages = additionalReactPackages;
     }
 
     @Override
@@ -52,30 +38,6 @@ public class NavigationReactNativeHost extends ReactNativeHost implements Bundle
         bundleListener = listener;
     }
 
-    @Override
-    public boolean getUseDeveloperSupport() {
-        return isDebug;
-    }
-
-    @Override
-    protected List<ReactPackage> getPackages() {
-        List<ReactPackage> packages = new ArrayList<>();
-        boolean hasMainReactPackage = false;
-        packages.add(new NavigationPackage(this));
-        if (additionalReactPackages != null) {
-            for (ReactPackage p : additionalReactPackages) {
-                if (!(p instanceof NavigationPackage)) {
-                    packages.add(p);
-                }
-                if (p instanceof MainReactPackage) hasMainReactPackage = true;
-            }
-        }
-        if (!hasMainReactPackage) {
-            packages.add(new MainReactPackage());
-        }
-        return packages;
-    }
-
     protected ReactInstanceManager createReactInstanceManager() {
         ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
                 .setApplication(getApplication())

lib/android/app/src/reactNative55/java/com/reactnativenavigation/react/NavigationReactNativeHost.java

@@ -1,9 +1,5 @@
 package com.reactnativenavigation.react;
 
-import android.app.Application;
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactInstanceManagerBuilder;
@@ -11,20 +7,17 @@ import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.common.LifecycleState;
 import com.facebook.react.devsupport.interfaces.DevBundleDownloadListener;
-import com.facebook.react.shell.MainReactPackage;
 import com.reactnativenavigation.NavigationApplication;
 
-import java.util.ArrayList;
-import java.util.List;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 
 /**
  * Default implementation of {@link ReactNativeHost} that includes {@link NavigationPackage}
  * and user-defined additional packages.
  */
-public class NavigationReactNativeHost extends ReactNativeHost implements BundleDownloadListenerProvider {
+public abstract class NavigationReactNativeHost extends ReactNativeHost implements BundleDownloadListenerProvider {
 
-    private final boolean isDebug;
-    private final List<ReactPackage> additionalReactPackages;
     private @Nullable NavigationDevBundleDownloadListener bundleListener;
     private final DevBundleDownloadListener bundleListenerMediator = new DevBundleDownloadListenerAdapter() {
         @Override
@@ -35,16 +28,9 @@ public class NavigationReactNativeHost extends ReactNativeHost implements Bundle
         }
     };
 
-
-    public NavigationReactNativeHost(NavigationApplication application) {
-        this(application, application.isDebug(), application.createAdditionalReactPackages());
-    }
-
     @SuppressWarnings("WeakerAccess")
-    public NavigationReactNativeHost(Application application, boolean isDebug, final List<ReactPackage> additionalReactPackages) {
+    public NavigationReactNativeHost(NavigationApplication application) {
         super(application);
-        this.isDebug = isDebug;
-        this.additionalReactPackages = additionalReactPackages;
     }
 
     @Override
@@ -52,30 +38,6 @@ public class NavigationReactNativeHost extends ReactNativeHost implements Bundle
         bundleListener = listener;
     }
 
-    @Override
-    public boolean getUseDeveloperSupport() {
-        return isDebug;
-    }
-
-    @Override
-    protected List<ReactPackage> getPackages() {
-        List<ReactPackage> packages = new ArrayList<>();
-        boolean hasMainReactPackage = false;
-        packages.add(new NavigationPackage(this));
-        if (additionalReactPackages != null) {
-            for (ReactPackage p : additionalReactPackages) {
-                if (!(p instanceof NavigationPackage)) {
-                    packages.add(p);
-                }
-                if (p instanceof MainReactPackage) hasMainReactPackage = true;
-            }
-        }
-        if (!hasMainReactPackage) {
-            packages.add(new MainReactPackage());
-        }
-        return packages;
-    }
-
     protected ReactInstanceManager createReactInstanceManager() {
         ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
                 .setApplication(getApplication())
@@ -85,6 +47,7 @@ public class NavigationReactNativeHost extends ReactNativeHost implements Bundle
                 .setJavaScriptExecutorFactory(getJavaScriptExecutorFactory())
                 .setUIImplementationProvider(getUIImplementationProvider())
                 .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
+                .setJSIModulesProvider(getJSIModulesProvider())
                 .setDevBundleDownloadListener(getDevBundleDownloadListener());
 
         for (ReactPackage reactPackage : getPackages()) {