[Experimental] Custom transition animation for ios (#1955)

* screen Background Color iOS

* ios v2 topBarTextFontFamily

* added topBarHidden to iOS

* minor fix and topBarHideOnScroll

* minor fix

* topBarButtonColor iOS

* topBarTranslucent iOS

* topBarTranslucent IOS minor fixes

* eslint fixes

* minor fixes

* changed setTabBadge to tabBadge and added a unit test in iOS

* added fontSize on iOS

* minor fix

* topBarTransparent

* minor fix

* first dirty custom transition iOS poc. in need of complete refactor and testing

* dirty poc for view transition

* dirty poc of interactive transition

* deleted unNeeded Files

* cleaning

* cleaning, support for interactiveImagePop and backButton custom transition

* cleaning

* merge v2 into custom-transition-animation fix

* merge fix

* merge fix

* cleaning and merge fix

* support for multiple animation in parralel, animations with are not shared element including: velocity, spring, alpha and translate

* last commit should also include these

* added resize mode animation and fixed flickering bug

* refactoring

* first cleaning and another test

* cleaning

* commandsHandler now accepts bridge in constructor, fixed tests, added e2e test

* eslint

* android pop now recieves two parameters - preparation for custom transition

* Refactor + add afterLoad to modal

* merge v2 second try

* merge fix

* merge fix

* fix ios unit tests

* fixed topBarTransparent e2e

* fix js tests

* refactored RNNAnimator, RNNAnimatedView, small fixes

* refactor topBarLargeTitle

* fixed lifycycle bug with componentWillUnmount, small fixes

* fix transparent conflict

* removered Element.js from coverage report

* comment redundent test
(still needs to be discussed), small fix

* removed commented test, moved element.js to adapters

e2e/CustomTransition.js

+
+const Utils = require('./Utils');
+
+const elementByLabel = Utils.elementByLabel;
+
+describe('custom transition', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+  });
+
+  it('sanity', async () => {
+    await elementByLabel('Push Options Screen').tap();
+    await elementByLabel('Custom Transition').tap();
+    await expect(element(by.id('shared_image1'))).toExist();
+    await element(by.id('shared_image1')).tap();
+    await expect(element(by.id('shared_image2'))).toExist();
+    await element(by.id('shared_image2')).tap();
+    await expect(element(by.id('shared_image1'))).toExist();
+  });
+});

e2e/Orientations.test.js

   it('landscape only', async () => {
     await elementByLabel('Orientation').tap();
     await elementByLabel('landscape only').tap();
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
     await device.setOrientation('landscape');
     await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
     await device.setOrientation('portrait');

e2e/ScreenStyle.test.js

     await expect(element(by.type('UINavigationBar'))).toBeVisible();
   });
 
+  it('makes topBar transparent and opaque', async () => {
+    await elementByLabel('Push Options Screen').tap();
+    await elementByLabel('Top Bar Transparent').tap();
+    await expect(element(by.type('_UIVisualEffectBackdropView'))).toBeNotVisible();
+    await elementByLabel('Top Bar Opaque').tap();
+    await expect(element(by.type('_UIVisualEffectBackdropView')).atIndex(1)).toBeVisible();
+  });
+
   it('set Tab Bar badge on a current Tab', async () => {
     await elementByLabel('Switch to tab based app').tap();
     await elementByLabel('Set Tab Badge').tap();

lib/ios/RNNAnimatedView.h

+#import <UIKit/UIKit.h>
+#import "RNNTransitionStateHolder.h"
+#import "RNNViewLocation.h"
+#import "VICMAImageView.h"
+
+@class RNNViewLocation;
+@class RNNTransitionStateHolder;
+@interface RNNAnimatedView : UIView
+
+-(instancetype)initWithTransition:(RNNTransitionStateHolder*)transition andLocation:(RNNViewLocation*)location andIsBackButton:(BOOL)backButton;
++(UIViewContentMode)contentModefromString:(NSString*)resizeMode;
+@end

lib/ios/RNNAnimatedView.m

+#import "RNNAnimatedView.h"
+#import "RNNElementView.h"
+
+@implementation RNNAnimatedView
+
+-(instancetype)initWithTransition:(RNNTransitionStateHolder*)transition andLocation:(RNNViewLocation*)location andIsBackButton:(BOOL)backButton {
+	UIView* animatedView = nil;
+	if (backButton) {
+		if ([self elementIsImage:transition.fromElement]) {
+			animatedView = [self createImageAnimatedView:animatedView fromElement:transition.fromElement toElement:transition.toElement];
+		} else {
+			if (transition.toElement) {
+				animatedView = [[transition.toElement subviews][0] snapshotViewAfterScreenUpdates:NO];
+			} else {
+				animatedView = [[transition.fromElement subviews][0] snapshotViewAfterScreenUpdates:NO];
+			}
+		}
+		[self assignStyle:animatedView withSize:location.toSize center:location.toCenter andAlpha:transition.endAlpha];
+	} else {
+		if ([self elementIsImage:transition.fromElement]) {
+			animatedView = [self createImageAnimatedView:animatedView fromElement:transition.fromElement toElement:transition.fromElement];
+		} else {
+			if (transition.isFromVC) {
+				animatedView = [[transition.fromElement subviews][0] snapshotViewAfterScreenUpdates:NO];
+			} else {
+				animatedView = [[transition.fromElement subviews][0] snapshotViewAfterScreenUpdates:YES];
+			}
+		}
+		[self assignStyle:animatedView withSize:location.fromSize center:location.fromCenter andAlpha:transition.startAlpha];
+	}
+	return (RNNAnimatedView*)animatedView;
+}
+
+-(BOOL)elementIsImage:(RNNElementView*)element {
+	return [[element subviews][0] isKindOfClass:[UIImageView class]];
+}
+
+-(UIView*)createImageAnimatedView:(UIView*)animatedView fromElement:(RNNElementView*)fromElement toElement:(RNNElementView*)toElement {
+	UIImage* image = [[fromElement subviews][0] image];
+	animatedView = [[VICMAImageView alloc] initWithImage:image];
+	animatedView.contentMode = UIViewContentModeScaleAspectFill;
+	if (toElement.resizeMode){
+		animatedView.contentMode = [RNNAnimatedView contentModefromString:toElement.resizeMode];
+	}
+	return animatedView;
+}
+
+-(void)assignStyle:(UIView*)animatedView withSize:(CGSize)size center:(CGPoint)center andAlpha:(double)alpha {
+	animatedView.frame = CGRectMake(0, 0, size.width, size.height);
+	animatedView.center = center;
+	animatedView.alpha = alpha;
+}
+
++(UIViewContentMode)contentModefromString:(NSString*)resizeMode{
+	if ([resizeMode isEqualToString:@"cover"]) {
+		return UIViewContentModeScaleAspectFill;
+	} else if ([resizeMode isEqualToString:@"contain"]) {
+		return UIViewContentModeScaleAspectFit;
+	} else if ([resizeMode isEqualToString:@"stretch"]) {
+		return UIViewContentModeScaleToFill;
+	} else {
+		return 0;
+	}
+}
+@end

lib/ios/RNNAnimator.h

+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+#import "RNNElementView.h"
+
+@interface RNNAnimator : NSObject <UIViewControllerAnimatedTransitioning>
+-(void)setupTransition:(NSDictionary*)data;
+
+@end

lib/ios/RNNAnimator.m

+#import <React/RCTRedBox.h>
+#import "RNNAnimator.h"
+#import "RNNElementView.h"
+#import "RNNInteractivePopAnimator.h"
+#import "VICMAImageView.h"
+#import "RNNTransitionStateHolder.h"
+#import "RNNElementFinder.h"
+#import "RNNViewLocation.h"
+#import "RNNAnimatedView.h"
+
+@interface  RNNAnimator()
+@property (nonatomic, strong)NSArray* animations;
+@property (nonatomic)double duration;
+@property (nonatomic)double springDamping;
+@property (nonatomic)double springVelocity;
+@property (nonatomic, strong) RNNInteractivePopAnimator* interactivePopAnimator;
+@property (nonatomic) BOOL backButton;
+@property (nonatomic, strong) UIViewController* fromVC;
+@property (nonatomic, strong) UIViewController* toVC;
+@end
+
+@implementation RNNAnimator
+
+-(void)setupTransition:(NSDictionary*)data{
+	if ([data objectForKey:@"animations"]) {
+		self.animations= [data objectForKey:@"animations"];
+	} else {
+		[[NSException exceptionWithName:NSInvalidArgumentException reason:@"No animations" userInfo:nil] raise];
+	}
+	if ([data objectForKey:@"duration"]) {
+		self.duration = [[data objectForKey:@"duration"] doubleValue];
+	} else {
+		self.duration = 0.7;
+	}
+	if ([data objectForKey:@"springDamping"]) {
+		self.springDamping = [[data objectForKey:@"springDamping"] doubleValue];
+	} else {
+		self.springDamping = 0.85;
+	}
+	if ([data objectForKey:@"springVelocity"]) {
+		self.springVelocity= [[data objectForKey:@"springVelocity"] doubleValue];
+	} else {
+		self.springVelocity = 0.8;
+	}
+	
+	self.backButton = false;
+}
+
+-(NSArray*)prepareSharedElementTransition:(NSArray*)RNNSharedElementsToVC
+						andfromVCElements:(NSArray*)RNNSharedElementsFromVC
+						withContainerView:(UIView*)containerView
+{
+	NSMutableArray* transitions = [NSMutableArray new];
+	for (NSDictionary* transition in self.animations) {
+		RNNTransitionStateHolder* transitionStateHolder = [[RNNTransitionStateHolder alloc] initWithTransition:transition];
+		RNNElementFinder* elementFinder = [[RNNElementFinder alloc] initWithToVC:self.toVC andfromVC:self.fromVC];
+		[elementFinder findElementsInTransition:transitionStateHolder];
+		RNNViewLocation* animatedViewLocations = [[RNNViewLocation alloc] initWithTransition:transitionStateHolder andVC:self.fromVC];
+		RNNAnimatedView* animatedView = [[RNNAnimatedView alloc] initWithTransition:transitionStateHolder andLocation:animatedViewLocations andIsBackButton:self.backButton];
+		transitionStateHolder.locations = animatedViewLocations;
+		[containerView addSubview:animatedView];
+		[containerView bringSubviewToFront:animatedView];
+		transitionStateHolder.animatedView = animatedView;
+		[transitions addObject:transitionStateHolder];
+		if (transitionStateHolder.isSharedElementTransition){
+			[transitionStateHolder.toElement setHidden: YES];
+		}
+		[transitionStateHolder.fromElement setHidden:YES];
+	}
+	return transitions;
+}
+
+-(void)animateTransitions:(NSArray*)transitions {
+	for (RNNTransitionStateHolder* transition in transitions ) {
+		[UIView animateWithDuration:transition.duration delay:transition.startDelay usingSpringWithDamping:transition.springDamping initialSpringVelocity:transition.springVelocity options:UIViewAnimationOptionCurveEaseOut  animations:^{
+			RNNAnimatedView* animatedView = transition.animatedView;
+			if (!self.backButton) {
+				[self setAnimatedViewFinalProperties:animatedView toElement:transition.toElement fromElement:transition.fromElement isSharedElementTransition:transition.isSharedElementTransition withTransform:transition.locations.transform withCenter:transition.locations.toCenter andAlpha:transition.endAlpha];
+			} else {
+				[self setAnimatedViewFinalProperties:animatedView toElement:transition.fromElement fromElement:transition.fromElement isSharedElementTransition:transition.isSharedElementTransition withTransform:transition.locations.transformBack withCenter:transition.locations.fromCenter andAlpha:transition.startAlpha];
+			}
+		} completion:^(BOOL finished) {
+
+		}];
+	}
+}
+
+-(void)setAnimatedViewFinalProperties:(RNNAnimatedView*)animatedView toElement:(RNNElementView*)toElement fromElement:(RNNElementView*)fromElement isSharedElementTransition:(BOOL)isShared withTransform:(CGAffineTransform)transform withCenter:(CGPoint)center andAlpha:(double)alpha {
+	animatedView.alpha = alpha;
+	animatedView.center = center;
+	animatedView.transform = transform;
+	if (isShared) {
+		if ([[fromElement subviews][0] isKindOfClass:[UIImageView class]]) {
+			animatedView.contentMode = UIViewContentModeScaleAspectFill;
+			if ([toElement resizeMode]){
+				animatedView.contentMode = [RNNAnimatedView contentModefromString:[toElement resizeMode]];
+			}
+		}
+	}
+}
+
+
+-(void)animateComplition:(NSArray*)transitions fromVCSnapshot:(UIView*)fromSnapshot andTransitioningContext:(id<UIViewControllerContextTransitioning>)transitionContext {
+	[UIView animateWithDuration:[self transitionDuration:transitionContext ] delay:0 usingSpringWithDamping:self.springDamping initialSpringVelocity:self.springVelocity options:UIViewAnimationOptionCurveEaseOut  animations:^{
+				self.toVC.view.alpha = 1;
+			} completion:^(BOOL finished) {
+				for (RNNTransitionStateHolder* transition in transitions ) {
+					[transition.fromElement setHidden:NO];
+					if (transition.isSharedElementTransition) {
+						[transition.toElement setHidden:NO];
+					}
+					RNNAnimatedView* animtedView = transition.animatedView;
+					[animtedView removeFromSuperview];
+					
+					if (transition.interactivePop) {
+						self.interactivePopAnimator = [[RNNInteractivePopAnimator alloc] initWithTopView:transition.toElement andBottomView:transition.fromElement andOriginFrame:transition.locations.fromFrame andViewController:self.toVC];
+						UIPanGestureRecognizer* gesture = [[UIPanGestureRecognizer alloc] initWithTarget:self.interactivePopAnimator
+																								  action:@selector(handleGesture:)];
+						[transition.toElement addGestureRecognizer:gesture];
+					}
+				}
+				[fromSnapshot removeFromSuperview];
+				if (![transitionContext transitionWasCancelled]) {
+					self.toVC.view.alpha = 1;
+					[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+					self.backButton = true;
+				}
+			}];
+}
+
+- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
+{
+	return self.duration;
+}
+- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
+{
+	UIViewController* toVC   = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
+	UIViewController* fromVC  = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
+	UIView* containerView = [transitionContext containerView];
+	self.fromVC = fromVC;
+	self.toVC = toVC;
+	toVC.view.frame = fromVC.view.frame;
+	UIView* fromSnapshot = [fromVC.view snapshotViewAfterScreenUpdates:true];
+	fromSnapshot.frame = fromVC.view.frame;
+	[containerView addSubview:fromSnapshot];
+	[containerView addSubview:toVC.view];
+	toVC.view.alpha = 0;
+	NSArray* onlyForTesting = @[];
+	NSArray* onlyForTesting2 = @[];
+	NSArray* transitions = [self prepareSharedElementTransition:onlyForTesting andfromVCElements:onlyForTesting2 withContainerView:containerView];
+	[self animateComplition:transitions fromVCSnapshot:fromSnapshot andTransitioningContext:transitionContext];
+	[self animateTransitions:transitions];
+}
+@end
+
+
+

lib/ios/RNNBridgeModule.m

 @implementation RNNBridgeModule {
 	RNNCommandsHandler* _commandsHandler;
 }
-
+@synthesize bridge = _bridge;
 RCT_EXPORT_MODULE();
 
 - (dispatch_queue_t)methodQueue {
 	[_commandsHandler push:containerId layout:layout];
 }
 
-RCT_EXPORT_METHOD(pop:(NSString*)containerId) {
-	[_commandsHandler pop:containerId];
+RCT_EXPORT_METHOD(pop:(NSString*)containerId options:(NSDictionary*)options) {
+	[_commandsHandler pop:containerId options:(NSDictionary*)options];
 }
 
 RCT_EXPORT_METHOD(popTo:(NSString*)containerId) {

lib/ios/RNNCommandsHandler.h

 
 @interface RNNCommandsHandler : NSObject
 
--(instancetype) initWithStore:(RNNStore*)store controllerFactory:(RNNControllerFactory*)controllerFactory;
+-(instancetype) initWithStore:(RNNStore*)store controllerFactory:(RNNControllerFactory*)controllerFactory andBridge:(RCTBridge*)bridge;
 
 -(void) setRoot:(NSDictionary*)layout;
 
 
 -(void) push:(NSString*)containerId layout:(NSDictionary*)layout;
 
--(void) pop:(NSString*)containerId;
+-(void) pop:(NSString*)containerId options:(NSDictionary*)options;
 
 -(void) popTo:(NSString*)containerId;
 

lib/ios/RNNCommandsHandler.m

-
 #import "RNNCommandsHandler.h"
-
 #import "RNNModalManager.h"
 #import "RNNNavigationStackManager.h"
 #import "RNNNavigationOptions.h"
 @implementation RNNCommandsHandler {
 	RNNControllerFactory *_controllerFactory;
 	RNNStore *_store;
+	RCTBridge* _bridge;
 	RNNNavigationStackManager* _navigationStackManager;
 	RNNModalManager* _modalManager;
 }
 
--(instancetype) initWithStore:(RNNStore*)store controllerFactory:(RNNControllerFactory*)controllerFactory {
+-(instancetype) initWithStore:(RNNStore*)store controllerFactory:(RNNControllerFactory*)controllerFactory andBridge:(RCTBridge*)bridge {
 	self = [super init];
+	_bridge = bridge;
 	_store = store;
 	_controllerFactory = controllerFactory;
 	_navigationStackManager = [[RNNNavigationStackManager alloc] initWithStore:_store];
 	}
 }
 
--(void) push:(NSString*)containerId layout:(NSDictionary*)layout {
+-(void)push:(NSString*)containerId layout:(NSDictionary*)layout {
 	[self assertReady];
-	
+	NSDictionary* customAnimation = layout[@"data"][@"customTransition"];
 	UIViewController *newVc = [_controllerFactory createLayoutAndSaveToStore:layout];
-	[_navigationStackManager push:newVc onTop:containerId];
+	RCTBridge* bridge = _bridge;
+	if (customAnimation) {
+		if ([customAnimation objectForKey:@"animations"]) {
+			[_navigationStackManager push:newVc onTop:containerId customAnimationData:(NSDictionary*)customAnimation bridge:bridge];
+		} else {
+			[[NSException exceptionWithName:NSInvalidArgumentException reason:@"unsupported transitionAnimation" userInfo:nil] raise];
+		}
+	} else {
+		[_navigationStackManager push:newVc onTop:containerId customAnimationData:(NSDictionary*)nil bridge:bridge];
+	}
 }
 
--(void) pop:(NSString*)containerId {
+-(void)pop:(NSString*)containerId options:(NSDictionary*)options{
 	[self assertReady];
+	NSDictionary* animationData = options[@"customTransition"];
+	if (animationData){
+		if ([animationData objectForKey:@"animations"]) {
+			[_navigationStackManager pop:containerId withAnimationData:animationData];
+		} else {
+			[[NSException exceptionWithName:NSInvalidArgumentException reason:@"unsupported transitionAnimation" userInfo:nil] raise];
+		}
+	} else {
+		[_navigationStackManager pop:containerId withAnimationData:nil];
+	}
 	
-	[_navigationStackManager pop:containerId];
 }
 
 -(void) popTo:(NSString*)containerId {

lib/ios/RNNElement.h

+#import <React/RCTViewManager.h>
+#import <Foundation/Foundation.h>
+
+@interface RNNElement : RCTViewManager
+
+@end

lib/ios/RNNElement.m

+
+#import <React/RCTViewManager.h>
+#import "RNNElement.h"
+#import "RNNElementView.h"
+@interface RNNElement()
+
+
+@end
+@implementation RNNElement
+
+
+RCT_CUSTOM_VIEW_PROPERTY(elementId, NSString, RNNElement)
+{
+	[(RNNElementView*)view setElementId:json];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(resizeMode, NSString, RNNElement)
+{
+	[(RNNElementView*)view setResizeMode:json];
+}
+
+RCT_EXPORT_MODULE();
+
+- (RNNElementView *)view
+{
+	RNNElementView* element = [[RNNElementView alloc] init];
+	return element;
+}
+
+@end

lib/ios/RNNElementFinder.h

+#import <Foundation/Foundation.h>
+#import "RNNElementView.h"
+#import "RNNTransitionStateHolder.h"
+
+@interface RNNElementFinder : NSObject
+
+@property (nonatomic, strong) NSArray* toVCTransitionElements;
+@property (nonatomic, strong) NSArray* fromVCTransitionElements;
+
+-(instancetype)initWithToVC:(UIViewController*)toVC andfromVC:(UIViewController*)fromVC;
+-(NSArray*)findRNNElementViews:(UIView*)view;
+-(RNNElementView*)findViewToAnimate:(NSArray*)RNNTransitionElementViews withId:(NSString*)elementId;
+-(void)findElementsInTransition:(RNNTransitionStateHolder*)transitionStateHolder;
+@end

lib/ios/RNNElementFinder.m

+#import "RNNElementFinder.h"
+
+@implementation RNNElementFinder 
+
+-(instancetype)initWithToVC:(UIViewController*)toVC andfromVC:(UIViewController*)fromVC {
+	self = [super init];
+	self.toVCTransitionElements = [self findRNNElementViews:toVC.view];
+	self.fromVCTransitionElements = [self findRNNElementViews:fromVC.view];
+	return self;
+}
+
+-(RNNElementView*)findViewToAnimate:(NSArray*)RNNTransitionElementViews withId:(NSString*)elementId{
+	for (RNNElementView* view in RNNTransitionElementViews) {
+		if ([view.elementId isEqualToString:elementId]){
+			return view;
+		}
+	}
+	return nil;
+}
+
+-(NSArray*)findRNNElementViews:(UIView*)view{
+	NSMutableArray* elementViews = [NSMutableArray new];
+	for(UIView *aView in view.subviews){
+		if([aView isMemberOfClass:[RNNElementView class]]){
+			[elementViews addObject:aView];
+		} else{
+			if ([aView subviews]) {
+				[elementViews addObjectsFromArray:[self findRNNElementViews:aView]];
+			}
+		}
+	}
+	return elementViews;
+}
+
+-(void)findElementsInTransition:(RNNTransitionStateHolder*)transitionStateHolder {
+	if ([self findViewToAnimate:self.toVCTransitionElements withId:transitionStateHolder.fromId]) {
+		transitionStateHolder.fromElement = [self findViewToAnimate:self.toVCTransitionElements withId:transitionStateHolder.fromId];
+		transitionStateHolder.isFromVC = false;
+	} else if ([self findViewToAnimate:self.fromVCTransitionElements withId:transitionStateHolder.fromId]){
+		transitionStateHolder.fromElement = [self findViewToAnimate:self.fromVCTransitionElements withId:transitionStateHolder.fromId];
+		transitionStateHolder.isFromVC = true;
+	} else {
+		[[NSException exceptionWithName:NSInvalidArgumentException reason:[NSString stringWithFormat:@"elementId %@ does not exist", transitionStateHolder.fromId] userInfo:nil] raise];
+	}
+	if (transitionStateHolder.toId) {
+		if ([self findViewToAnimate:self.toVCTransitionElements withId:transitionStateHolder.toId]) {
+			transitionStateHolder.toElement = [self findViewToAnimate:self.toVCTransitionElements withId:transitionStateHolder.toId];
+		} else if ([self findViewToAnimate:self.fromVCTransitionElements withId:transitionStateHolder.toId]){
+			transitionStateHolder.toElement = [self findViewToAnimate:self.fromVCTransitionElements withId:transitionStateHolder.toId];
+		} else {
+			[[NSException exceptionWithName:NSInvalidArgumentException reason:[NSString stringWithFormat:@"elementId %@ does not exist", transitionStateHolder.toId] userInfo:nil] raise];
+		}
+	}
+}
+
+@end

lib/ios/RNNElementView.h

+#import <UIKit/UIKit.h>
+
+@interface RNNElementView : UIView
+
+@property (nonatomic, strong) NSString* elementId;
+@property (nonatomic, strong) NSString* type;
+@property (nonatomic, strong) NSString* resizeMode;
+@property (nonatomic, strong) NSNumber* interactive;
+@property (nonatomic, strong) UIViewController* vc;
+@property (nonatomic) CGPoint originalCenter;
+
+@end

lib/ios/RNNElementView.m

+#import "RNNElementView.h"
+
+@implementation RNNElementView
+
+
+@end

lib/ios/RNNInteractivePopAnimator.h

+#import <UIKit/UIKit.h>
+#import "RNNElementView.h"
+
+@interface RNNInteractivePopAnimator : UIPercentDrivenInteractiveTransition <UINavigationControllerDelegate, UIViewControllerAnimatedTransitioning, UIViewControllerInteractiveTransitioning>
+
+@property (nonatomic, strong) RNNElementView* topView;
+@property (nonatomic, strong) RNNElementView* bottomView;
+@property (nonatomic, strong) UIViewController* vc;
+@property (nonatomic) CGRect originFrame;
+@property CGPoint toCenter;
+
+-(instancetype)initWithTopView:(RNNElementView*)topView andBottomView:(RNNElementView*)bottomView andOriginFrame:(CGRect)originFrame andViewController:(UIViewController*)vc;
+-(void)handleGesture:(UIPanGestureRecognizer*)recognizer;
+
+@end

lib/ios/RNNInteractivePopAnimator.m

+#import "RNNInteractivePopAnimator.h"
+#import "RNNAnimator.h"
+#import "RNNAnimatedView.h"
+#import "RNNElementView.h"
+#import "RNNRootViewController.h"
+#import "VICMAImageView.h"
+
+@interface  RNNInteractivePopAnimator()
+@property (nonatomic) CGRect topFrame;
+@property (nonatomic) CGFloat percent;
+@property (nonatomic) UINavigationController* nc;
+@property (nonatomic) UIView* imageSnapshot;
+@property (nonatomic) double totalTranslate;
+@property (nonatomic) id transitionContext;
+
+
+@end
+
+@implementation RNNInteractivePopAnimator
+
+-(instancetype)initWithTopView:(RNNElementView*)topView andBottomView:(RNNElementView*)bottomView andOriginFrame:(CGRect)originFrame andViewController:(UIViewController*)vc{
+	RNNInteractivePopAnimator* interactiveController = [[RNNInteractivePopAnimator alloc] init];
+	[interactiveController setTopView:topView];
+	[interactiveController setBottomView:bottomView];
+	[interactiveController setOriginFrame:originFrame];
+	[interactiveController setVc:vc];
+	[interactiveController setNc:vc.navigationController];
+	return interactiveController;
+}
+
+-(void)startInteractiveTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
+	[super startInteractiveTransition:transitionContext];
+}
+
+-(BOOL)shouldBeginInteractivePop:(CGPoint)velocity {
+	if (velocity.y > 0) {
+		return YES;
+	}
+	return NO;
+}
+
+-(BOOL)shouldCancelInteractivePop:(UIPanGestureRecognizer*)recognizer {
+	return ([recognizer velocityInView:self.imageSnapshot].y < 0 || self.totalTranslate < 0);
+}
+-(void)handleGesture:(UIPanGestureRecognizer*)recognizer {
+	CGPoint translation = [recognizer translationInView:self.topView];
+	if (recognizer.state == UIGestureRecognizerStateBegan) {
+		CGPoint velocity = [recognizer velocityInView:recognizer.view];
+		self.nc.delegate = self;
+		if ([self shouldBeginInteractivePop:velocity]) {
+			[self.nc popViewControllerAnimated:YES];
+		}
+	} else
+	if (recognizer.state == UIGestureRecognizerStateChanged) {
+		self.totalTranslate = self.totalTranslate + translation.y;
+		[self animateAlongsideTransition:^void(id context){
+			self.imageSnapshot.center = CGPointMake(self.imageSnapshot.center.x + translation.x,
+													self.imageSnapshot.center.y + translation.y);
+		}
+							  completion:nil];
+		[recognizer setTranslation:CGPointMake(0, 0) inView:self.imageSnapshot];
+		if (self.totalTranslate >= 0 && self.totalTranslate <= 400.0) {
+			[self updateInteractiveTransition:self.totalTranslate/400];
+		}
+	} else if (recognizer.state == UIGestureRecognizerStateEnded) {
+		if([self shouldCancelInteractivePop:recognizer]) {
+			[self cancelInteractiveTransition];
+			[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0.8 options:UIViewAnimationOptionCurveEaseOut  animations:^{
+				self.imageSnapshot.frame = self.topFrame;
+			} completion:^(BOOL finished) {
+				self.nc.delegate = (RNNRootViewController*)self.vc;
+			}];
+		} else {
+			[UIView animateWithDuration:0.3 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0.8 options:UIViewAnimationOptionCurveEaseOut  animations:^{
+				self.imageSnapshot.frame = self.originFrame;
+				self.imageSnapshot.contentMode = UIViewContentModeScaleAspectFill;
+				if ([self.bottomView resizeMode]) {
+					self.imageSnapshot.contentMode = [RNNAnimatedView contentModefromString:[self.bottomView resizeMode]];
+				}
+			} completion:^(BOOL finished) {
+				self.nc.delegate = nil;
+			}];
+			[self finishInteractiveTransition];
+		}
+	}
+}
+- (BOOL)animateAlongsideTransition:(void (^)(id<UIViewControllerTransitionCoordinatorContext> context))animation
+						completion:(void (^)(id<UIViewControllerTransitionCoordinatorContext> context))completion;{
+	animation(nil);
+	return YES;
+}
+- (void)animationEnded:(BOOL)transitionCompleted {
+	
+}
+
+- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
+{
+	return 0.7;
+}
+
+- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
+{
+	self.totalTranslate = 0;
+	self.transitionContext = transitionContext;
+	UIViewController* toVC   = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
+	UIViewController* fromVC  = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
+	UIView* containerView = [transitionContext containerView];
+	
+	toVC.view.frame = fromVC.view.frame;
+	UIView* topViewContent = [self.topView subviews][0];
+	UIImage* image = [[self.topView subviews][0] image];
+	UIView* imageSnapshot = [[VICMAImageView alloc] initWithImage:image];
+	CGPoint fromSharedViewFrameOrigin = [topViewContent.superview convertPoint:topViewContent.frame.origin toView:fromVC.view];
+	CGRect fromOriginRect = CGRectMake(fromSharedViewFrameOrigin.x, fromSharedViewFrameOrigin.y, topViewContent.frame.size.width, topViewContent.frame.size.height);
+	self.topFrame = fromOriginRect;
+	imageSnapshot.contentMode = UIViewContentModeScaleAspectFill;
+	if ([self.topView resizeMode]) {
+		imageSnapshot.contentMode = [RNNAnimatedView contentModefromString:[self.topView resizeMode]];
+	}
+	imageSnapshot.frame = fromOriginRect;
+	self.imageSnapshot = imageSnapshot;
+	[self.bottomView setHidden:YES];
+	UIView* toSnapshot = [toVC.view snapshotViewAfterScreenUpdates:true];
+	toSnapshot.frame = fromVC.view.frame;
+	[containerView insertSubview:(UIView *)toSnapshot atIndex:1];
+	[containerView addSubview:self.imageSnapshot];
+	toSnapshot.alpha = 0.0;
+	[self.topView setHidden:YES];
+	[UIView animateKeyframesWithDuration:(NSTimeInterval)[self transitionDuration:transitionContext]
+								   delay:0
+								 options: UIViewKeyframeAnimationOptionAllowUserInteraction
+							  animations:^{
+								  [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations:^{
+									  fromVC.view.alpha = 0;
+									  toSnapshot.alpha = 1;
+								  }];
+							  }
+							  completion:^(BOOL finished) {
+								  [self.bottomView setHidden:NO];
+								  [toSnapshot removeFromSuperview];
+								  [self.imageSnapshot removeFromSuperview];
+								  self.totalTranslate = 0;
+								  if (![transitionContext transitionWasCancelled]) {
+									  [containerView addSubview: toVC.view];
+									  [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+									  
+								  }
+								  if ([transitionContext transitionWasCancelled]) {
+									  [self.topView setHidden:NO];
+									  [containerView addSubview: fromVC.view];
+									  [transitionContext completeTransition:NO];
+								  }
+							  }];
+}
+
+- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
+								  animationControllerForOperation:(UINavigationControllerOperation)operation
+											   fromViewController:(UIViewController*)fromVC
+												 toViewController:(UIViewController*)toVC {
+	
+		if (operation == UINavigationControllerOperationPop) {
+			return self;
+		} else {
+			return nil;
+		}
+	
+	return nil;
+	
+}
+- (id<UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
+						 interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController {
+	return self;
+}
+
+@end

lib/ios/RNNModalManager.h

 
 @interface RNNModalManager : NSObject
 
--(instancetype)initWithStore:(RNNStore*)store;
+@property (nonatomic, strong) UIViewController* toVC;
 
+-(instancetype)initWithStore:(RNNStore*)store;
 -(void)showModal:(UIViewController*)viewController;
 -(void)dismissModal:(NSString*)containerId;
 -(void)dismissAllModals;

lib/ios/RNNModalManager.m

 	_store = store;
 	return self;
 }
+-(void)waitForContentToAppearAndThen:(SEL)nameOfSelector {
+	[[NSNotificationCenter defaultCenter] addObserver:self
+											 selector:nameOfSelector
+												 name: @"RCTContentDidAppearNotification"
+											   object:nil];
+}
 
--(void)showModal:(UIViewController *)viewController {
+-(void)showModalAfterLoad:(NSDictionary*)notif {
+	[[NSNotificationCenter defaultCenter] removeObserver:self name:@"RCTContentDidAppearNotification" object:nil];
 	UIViewController *topVC = [self topPresentedVC];
-	[topVC presentViewController:viewController animated:YES completion:nil];
+	[topVC presentViewController:self.toVC animated:YES completion:nil];
+}
+
+//-(void)prepareShowModal{
+//
+//}
+
+-(void)showModal:(UIViewController *)viewController {
+	self.toVC = viewController;
+//	[self prepareShowModal]
+	[self waitForContentToAppearAndThen:@selector(showModalAfterLoad:)];
 }
 
 -(void)dismissModal:(NSString *)containerId {

lib/ios/RNNNavigationController.h

-
 #import <UIKit/UIKit.h>
 
 @interface RNNNavigationController : UINavigationController

lib/ios/RNNNavigationOptions.h

 
 extern const NSInteger BLUR_STATUS_TAG;
 extern const NSInteger BLUR_TOPBAR_TAG;
+extern const NSInteger TOP_BAR_TRANSPARENT_TAG;
 
 @interface RNNNavigationOptions : NSObject
 
 @property (nonatomic, strong) NSNumber* statusBarHidden;
 @property (nonatomic, strong) NSNumber* screenBackgroundColor;
+@property (nonatomic, strong) NSMutableDictionary* originalTopBarImages;
+@property (nonatomic, strong) NSString* backButtonTransition;
 @property (nonatomic, strong) id orientation;
 @property (nonatomic, strong) NSArray* leftButtons;
 @property (nonatomic, strong) NSArray* rightButtons;
 
 -(void)applyOn:(UIViewController*)viewController;
 -(void)mergeWith:(NSDictionary*)otherOptions;
+-(void)storeOriginalTopBarImages:(UIViewController*)viewController;
 
 @end

lib/ios/RNNNavigationOptions.m

 
 const NSInteger BLUR_STATUS_TAG = 78264801;
 const NSInteger BLUR_TOPBAR_TAG = 78264802;
+const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 
 @implementation RNNNavigationOptions
 
+
+
 -(instancetype)init {
 	return [self initWithDict:@{}];
 }
 	self = [super init];
 	self.statusBarHidden = [navigationOptions objectForKey:@"statusBarHidden"];
 	self.screenBackgroundColor = [navigationOptions objectForKey:@"screenBackgroundColor"];
+	self.backButtonTransition = [navigationOptions objectForKey:@"backButtonTransition"];
 	self.orientation = [navigationOptions objectForKey:@"orientation"];
 	self.leftButtons = [navigationOptions objectForKey:@"leftButtons"];
 	self.rightButtons = [navigationOptions objectForKey:@"rightButtons"];
 			viewController.navigationItem.title = self.topBar.title;
 		}
 		
+		if (@available(iOS 11.0, *)) {
+			if (self.topBar.largeTitle){
+				if ([self.topBar.largeTitle boolValue]) {
+					viewController.navigationController.navigationBar.prefersLargeTitles = YES;
+					viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeAlways;
+				} else {
+					viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeNever;
+				}
+			} else {
+				viewController.navigationController.navigationBar.prefersLargeTitles = NO;
+				viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeNever;
+			}
+		}
+		
+		
 		if (self.topBar.textFontFamily || self.topBar.textFontSize || self.topBar.textColor) {
 			NSMutableDictionary* navigationBarTitleTextAttributes = [NSMutableDictionary new];
 			if (self.topBar.textColor) {
 			}
 		}
 		
+		void (^disableTopBarTransparent)() = ^void(){
+			UIView *transparentView = [viewController.navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
+			if (transparentView){
+				[transparentView removeFromSuperview];
+				[viewController.navigationController.navigationBar setBackgroundImage:self.originalTopBarImages[@"backgroundImage"] forBarMetrics:UIBarMetricsDefault];
+				viewController.navigationController.navigationBar.shadowImage = self.originalTopBarImages[@"shadowImage"];
+				self.originalTopBarImages = nil;
+			}
+		};
+	
+		if (self.topBar.transparent) {
+			if ([self.topBar.transparent boolValue]) {
+				if (![viewController.navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG]){
+					[self storeOriginalTopBarImages:viewController];
+					[viewController.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
+					viewController.navigationController.navigationBar.shadowImage = [UIImage new];
+					UIView *transparentView = [[UIView alloc] initWithFrame:CGRectZero];
+					transparentView.tag = TOP_BAR_TRANSPARENT_TAG;
+					[viewController.navigationController.navigationBar insertSubview:transparentView atIndex:0];
+				}
+			} else {
+				disableTopBarTransparent();
+			}
+		} else {
+			disableTopBarTransparent();
+		}
+
 		if (self.topBar.translucent) {
 			viewController.navigationController.navigationBar.translucent = [self.topBar.translucent boolValue];
 		}
 		
-		if (self.topBar.transparent) {
-			[viewController.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
-			viewController.navigationController.navigationBar.shadowImage = [UIImage new];
-			UIView *transparentView = [[UIView alloc] initWithFrame:CGRectZero];
-			[viewController.navigationController.navigationBar insertSubview:transparentView atIndex:0];
-		}
-		
 		if (self.topBar.noBorder) {
 			if ([self.topBar.noBorder boolValue]) {
 				viewController.navigationController.navigationBar
 	return supportedOrientationsMask;
 }
 
+-(void)storeOriginalTopBarImages:(UIViewController*)viewController {
+	NSMutableDictionary *originalTopBarImages = [@{} mutableCopy];
+	UIImage *bgImage = [viewController.navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault];
+	if (bgImage != nil) {
+		originalTopBarImages[@"backgroundImage"] = bgImage;
+	}
+	UIImage *shadowImage = viewController.navigationController.navigationBar.shadowImage;
+	if (shadowImage != nil) {
+		originalTopBarImages[@"shadowImage"] = shadowImage;
+	}
+	self.originalTopBarImages = originalTopBarImages;
+}
+
 
 @end

lib/ios/RNNNavigationStackManager.h

 
 @interface RNNNavigationStackManager : NSObject
 
+@property (nonatomic, strong) UIViewController* fromVC;
+@property (nonatomic, strong) RNNRootViewController* toVC;
+@property (nonatomic) int loadCount;
 -(instancetype)initWithStore:(RNNStore*)store;
 
--(void)push:(UIViewController*)newTop onTop:(NSString*)containerId;
--(void)pop:(NSString*)containerId;
+
+-(void)push:(UIViewController*)newTop onTop:(NSString*)containerId customAnimationData:(NSDictionary*)customAnimationData bridge:(RCTBridge*)bridge;
+-(void)pop:(NSString*)containerId withAnimationData:(NSDictionary*)animationData;
 -(void)popTo:(NSString*)containerId;
 -(void)popToRoot:(NSString*)containerId;
 

lib/ios/RNNNavigationStackManager.m

 #import "RNNNavigationStackManager.h"
 #import "RNNRootViewController.h"
+#import "React/RCTUIManager.h"
+#import "RNNAnimator.h"
 
+
+dispatch_queue_t RCTGetUIManagerQueue(void);
 @implementation RNNNavigationStackManager {
 	RNNStore *_store;
 }
 	return self;
 }
 
--(void)push:(UIViewController *)newTop onTop:(NSString *)containerId {
+
+-(void)push:(UIViewController *)newTop onTop:(NSString *)containerId customAnimationData:(NSDictionary*)customAnimationData bridge:(RCTBridge*)bridge {
 	UIViewController *vc = [_store findContainerForId:containerId];
-	[[vc navigationController] pushViewController:newTop animated:YES];
+	[self preparePush:newTop onTopVC:vc customAnimationData:customAnimationData bridge:bridge];
+	[self waitForContentToAppearAndThen:@selector(pushAfterLoad:)];
+}
+
+-(void)preparePush:(UIViewController *)newTop onTopVC:(UIViewController*)vc customAnimationData:(NSDictionary*)customAnimationData bridge:(RCTBridge*)bridge {
+	if (customAnimationData) {
+		RNNRootViewController* newTopRootView = (RNNRootViewController*)newTop;
+		self.fromVC = vc;
+		self.toVC = newTopRootView;
+		vc.navigationController.delegate = newTopRootView;
+		[newTopRootView.animator setupTransition:customAnimationData];
+		RCTUIManager *uiManager = bridge.uiManager;
+		CGRect screenBound = [vc.view bounds];
+		CGSize screenSize = screenBound.size;
+		[uiManager setAvailableSize:screenSize forRootView:self.toVC.view];
+	} else {
+		self.fromVC = vc;
+		self.toVC = (RNNRootViewController*)newTop;
+		vc.navigationController.delegate = nil;
+		self.fromVC.navigationController.interactivePopGestureRecognizer.delegate = nil;
+	}
 }
 
--(void)pop:(NSString *)containerId {
+-(void)waitForContentToAppearAndThen:(SEL)nameOfSelector {
+	[[NSNotificationCenter defaultCenter] addObserver:self
+											 selector:nameOfSelector
+												 name: @"RCTContentDidAppearNotification"
+											   object:nil];
+}
+
+-(void)pushAfterLoad:(NSDictionary*)notif {
+	[[NSNotificationCenter defaultCenter] removeObserver:self name:@"RCTContentDidAppearNotification" object:nil];
+	[[self.fromVC navigationController] pushViewController:self.toVC animated:YES];
+	self.toVC = nil;
+	self.fromVC.navigationController.interactivePopGestureRecognizer.delegate = nil;
+	self.fromVC = nil;
+}
+
+-(void)pop:(NSString *)containerId withAnimationData:(NSDictionary *)animationData {
 	UIViewController* vc = [_store findContainerForId:containerId];
 	UINavigationController* nvc = [vc navigationController];
 	if ([nvc topViewController] == vc) {
-		[nvc popViewControllerAnimated:YES];
+		if (animationData) {
+			RNNRootViewController* RNNVC = (RNNRootViewController*)vc;
+			nvc.delegate = RNNVC;
+			[RNNVC.animator setupTransition:animationData];
+			[nvc popViewControllerAnimated:YES];
+		} else {
+			nvc.delegate = nil;
+			[nvc popViewControllerAnimated:YES];
+		}
 	} else {
 		NSMutableArray * vcs = nvc.viewControllers.mutableCopy;
 		[vcs removeObject:vc];

lib/ios/RNNRootViewController.h

 #import "RNNRootViewCreator.h"
 #import "RNNEventEmitter.h"
 #import "RNNNavigationOptions.h"
-
-@interface RNNRootViewController : UIViewController
-
+#import "RNNAnimator.h"
+@interface RNNRootViewController : UIViewController	<UINavigationControllerDelegate>
 @property (nonatomic, strong) RNNNavigationOptions* navigationOptions;
+@property (nonatomic, strong) RNNAnimator* animator;
 @property (nonatomic, strong) RNNEventEmitter *eventEmitter;
 @property (nonatomic, strong) NSString* containerId;
 

lib/ios/RNNRootViewController.m

 
 #import "RNNRootViewController.h"
 #import <React/RCTConvert.h>
+#import "RNNAnimator.h"
 #import "RNNNavigationButtons.h"
 
 @interface RNNRootViewController()
 											 selector:@selector(onJsReload)
 												 name:RCTJavaScriptWillStartLoadingNotification
 											   object:nil];
-	
+	self.animator = [[RNNAnimator alloc] init];
+	self.navigationController.modalPresentationStyle = UIModalPresentationCustom;
+	self.navigationController.delegate = self;
 	self.navigationButtons = [[RNNNavigationButtons alloc] initWithViewController:self];
-	
 	return self;
 }
-
+	
 -(void)viewWillAppear:(BOOL)animated{
 	[super viewWillAppear:animated];
 	[self.navigationOptions applyOn:self];
 	[self applyNavigationButtons];
 }
 
+- (void)viewDidLoad {
+	[super viewDidLoad];
+}
+
 - (BOOL)prefersStatusBarHidden {
 	if ([self.navigationOptions.statusBarHidden boolValue]) {
 		return YES;
 	[self.eventEmitter sendContainerDidDisappear:self.containerId];
 }
 
+- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
+	RNNRootViewController* vc =  (RNNRootViewController*)viewController;
+	if (![vc.navigationOptions.backButtonTransition isEqualToString:@"custom"]){
+		navigationController.delegate = nil;
+	}
+}
+
+- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
+								  animationControllerForOperation:(UINavigationControllerOperation)operation
+											   fromViewController:(UIViewController*)fromVC
+												 toViewController:(UIViewController*)toVC {
+{
+	if (operation == UINavigationControllerOperationPush) {
+		return self.animator;
+	} else if (operation == UINavigationControllerOperationPop) {
+		return self.animator;
+	} else {
+		return nil;
+	}
+}
+	return nil;
+
+}
+
+
+
 -(void) applyNavigationButtons{
 	[self.navigationButtons applyLeftButtons:self.navigationOptions.leftButtons rightButtons:self.navigationOptions.rightButtons];
 }

lib/ios/RNNTopBarOptions.h

 @property (nonatomic, strong) NSNumber* noBorder;
 @property (nonatomic, strong) NSNumber* blur;
 @property (nonatomic, strong) NSNumber* animateHide;
+@property (nonatomic, strong) NSNumber* largeTitle;
 
 -(instancetype)init;
 -(instancetype)initWithDict:(NSDictionary *)topBarOptions;

lib/ios/RNNTopBarOptions.m

 	self.transparent = [topBarOptions valueForKey:@"transparent"];
 	self.noBorder = [topBarOptions valueForKey:@"noBorder"];
 	self.animateHide =[topBarOptions valueForKey:@"animateHide"];
+	self.largeTitle =[topBarOptions valueForKey:@"largeTitle"];
 	
 	return self;
 }

lib/ios/RNNTransitionStateHolder.h

+#import <Foundation/Foundation.h>
+#import "RNNElementView.h"
+#import "RNNViewLocation.h"
+#import "RNNAnimatedView.h"
+
+@class RNNAnimatedView;
+@class RNNViewLocation;
+@interface RNNTransitionStateHolder : NSObject
+
+@property (nonatomic) double startAlpha;
+@property (nonatomic) double endAlpha;
+@property (nonatomic) BOOL interactivePop;
+@property (nonatomic) double duration;
+@property (nonatomic) double springVelocity;
+@property (nonatomic) double springDamping;
+@property (nonatomic) double startDelay;
+@property (nonatomic, strong) RNNElementView* fromElement;
+@property (nonatomic, strong) NSString* fromElementType;
+@property (nonatomic) UIViewContentMode fromElementResizeMode;
+@property (nonatomic, strong) RNNElementView* toElement;
+@property (nonatomic, strong) NSString* fromId;
+@property (nonatomic, strong) NSString* toId;
+@property (nonatomic, strong) RNNAnimatedView* animatedView;
+@property (nonatomic, strong) NSString* isSharedElementTransition;
+@property (nonatomic, strong) RNNViewLocation* locations;
+@property (nonatomic) BOOL isFromVC;
+@property (nonatomic) double startY;
+@property (nonatomic) double endY;
+@property (nonatomic) double startX;
+@property (nonatomic) double endX;
+
+-(instancetype)initWithTransition:(NSDictionary*)transition;
+@end

lib/ios/RNNTransitionStateHolder.m

+#import "RNNTransitionStateHolder.h"
+#import "RNNUtils.h"
+#import "RNNElementFinder.h"
+
+@implementation RNNTransitionStateHolder
+
+-(instancetype)initWithTransition:(NSDictionary *)transition {
+	self = [super init];
+	self.springDamping = [RNNUtils getDoubleOrKey:transition withKey:@"springDamping" withDefault:0.85];
+	self.springVelocity = [RNNUtils getDoubleOrKey:transition withKey:@"springVelocity" withDefault:0.8];
+	self.startDelay = [RNNUtils getDoubleOrKey:transition withKey:@"startDelay" withDefault:0];
+	self.duration = [RNNUtils getDoubleOrKey:transition withKey:@"duration" withDefault:1];
+	self.startAlpha = [RNNUtils getDoubleOrKey:transition withKey:@"startAlpha" withDefault:1];
+	self.endAlpha = [RNNUtils getDoubleOrKey:transition withKey:@"endAlpha" withDefault:1];
+	self.interactivePop = [RNNUtils getBoolOrKey:transition withKey:@"interactivePop" withDefault:NO];
+	self.startX = [RNNUtils getDoubleOrKey:transition withKey:@"startX" withDefault:0];
+	self.startY = [RNNUtils getDoubleOrKey:transition withKey:@"startY" withDefault:0];
+	self.endX = [RNNUtils getDoubleOrKey:transition withKey:@"endX" withDefault:0];
+	self.endY = [RNNUtils getDoubleOrKey:transition withKey:@"endY" withDefault:0];
+	self.fromId = [transition objectForKey:@"fromId"];
+	self.toId = [transition objectForKey:@"toId"];
+	self.fromElement = nil;
+	self.fromElementType = nil;
+	self.fromElementResizeMode = UIViewContentModeScaleAspectFill;
+	self.toElement = nil;
+	self.animatedView = nil;
+	self.locations  = nil; 
+	self.isSharedElementTransition = [transition objectForKey:@"type"];
+	return self;
+}
+
+@end

lib/ios/RNNUtils.h

+#import <Foundation/Foundation.h>
+
+@interface RNNUtils : NSObject
+
++(double)getDoubleOrKey:(NSDictionary*)dict withKey:(NSString*)key withDefault:(double)defaultResult;
++(BOOL)getBoolOrKey:(NSDictionary*)dict withKey:(NSString*)key withDefault:(BOOL)defaultResult;
++(id)getObjectOrKey:(NSDictionary*)dict withKey:(NSString*)key withDefault:(id)defaultResult;
+@end

lib/ios/RNNUtils.m

+#import "RNNUtils.h"
+
+@implementation RNNUtils
++(double)getDoubleOrKey:(NSDictionary*)dict withKey:(NSString*)key withDefault:(double)defaultResult {
+	if ([dict objectForKey:key]) {
+		return [dict[key] doubleValue];
+	} else {
+		return defaultResult;
+	}
+}
++(BOOL)getBoolOrKey:(NSDictionary*)dict withKey:(NSString*)key withDefault:(BOOL)defaultResult {
+	if ([dict objectForKey:key]) {
+		return [dict[key] boolValue];
+	} else {
+		return defaultResult;
+	}
+}
++(id)getObjectOrKey:(NSDictionary*)dict withKey:(NSString*)key withDefault:(id)defaultResult {
+	if ([dict objectForKey:key]) {
+		return dict[key];
+	} else {
+		return defaultResult;
+	}
+}
+@end

lib/ios/RNNViewLocation.h

+//
+//  RNNViewLocation.h
+//  ReactNativeNavigation
+//
+//  Created by Elad Bogomolny on 03/10/2017.
+//  Copyright © 2017 Wix. All rights reserved.
+//
+
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+#import "RNNTransitionStateHolder.h"
+
+@class RNNTransitionStateHolder;
+@interface RNNViewLocation : NSObject
+@property (nonatomic) CGRect fromFrame;
+@property (nonatomic) CGPoint fromCenter;
+@property (nonatomic) CGSize fromSize;
+@property (nonatomic) CGRect toFrame;
+@property (nonatomic) CGPoint toCenter;
+@property (nonatomic) CGSize toSize;
+@property (nonatomic) CGAffineTransform transform;
+@property (nonatomic) CGAffineTransform transformBack;
+
+-(instancetype)initWithTransition:(RNNTransitionStateHolder*)transition andVC:(UIViewController*)vc;
+-(CGRect)frameFromSuperViewController:(UIView*)view andVC:(UIViewController*)vc;
+-(CGPoint)centerFromSuperViewController:(UIView*)view andVC:(UIViewController*)vc;
+@end

lib/ios/RNNViewLocation.m

+#import "RNNViewLocation.h"
+
+@implementation RNNViewLocation
+-(instancetype)initWithTransition:(RNNTransitionStateHolder*)transition andVC:(UIViewController*)vc {
+	self = [super init];
+	self.fromFrame = [self frameFromSuperViewController:[transition.fromElement subviews][0] andVC:vc];
+	CGSize fromSize = self.fromFrame.size;
+	CGPoint fromCenter = [self centerFromSuperViewController:[transition.fromElement subviews][0] andVC:vc];
+	fromCenter.x = fromCenter.x + transition.startX;
+	fromCenter.y = fromCenter.y + transition.startY;
+	self.fromCenter = fromCenter;
+	CGRect toFrame = [self frameFromSuperViewController:[transition.fromElement subviews][0] andVC:vc];
+	CGSize toSize = self.fromFrame.size;
+	CGPoint toCenter = [self centerFromSuperViewController:[transition.fromElement subviews][0] andVC:vc];
+	if (transition.toElement) {
+	   toFrame = [self frameFromSuperViewController:[transition.toElement subviews][0] andVC:vc];
+		toSize = toFrame.size;
+		toCenter = [self centerFromSuperViewController:[transition.toElement subviews][0] andVC:vc];
+	}
+	toCenter.x = toCenter.x + transition.endX;
+	toCenter.y = toCenter.y + transition.endY;
+	
+	CGAffineTransform transform = CGAffineTransformMakeScale(toSize.width/fromSize.width ,toSize.height/fromSize.height);
+	CGAffineTransform transformBack = CGAffineTransformMakeScale(fromSize.width/toSize.width ,fromSize.height/toSize.height);
+	self.toFrame = toFrame;
+	self.fromSize = fromSize;
+	self.toSize = toSize;
+	self.toCenter = toCenter;
+	self.transform = transform;
+	self.transformBack = transformBack;
+	return self;
+}
+
+-(CGRect)frameFromSuperViewController:(UIView*)view andVC:(UIViewController*)vc{
+	CGPoint sharedViewFrameOrigin = [view.superview convertPoint:view.frame.origin toView:vc.view];
+	CGRect originRect = CGRectMake(sharedViewFrameOrigin.x, sharedViewFrameOrigin.y, view.frame.size.width, view.frame.size.height);
+	return originRect;
+}
+
+-(CGPoint)centerFromSuperViewController:(UIView*)view andVC:(UIViewController*)vc{
+	CGPoint sharedViewFrameOrigin = [view.superview convertPoint:view.frame.origin toView:vc.view];
+	CGRect originRect = CGRectMake(sharedViewFrameOrigin.x, sharedViewFrameOrigin.y, view.frame.size.width, view.frame.size.height);
+	CGFloat x = originRect.origin.x + view.frame.size.width/2;
+	CGFloat y = originRect.origin.y + view.frame.size.height/2;
+	CGPoint center = CGPointMake(x, y);
+	return center;
+}
+
+@end

lib/ios/ReactNativeNavigation.m

 	
 	id<RNNRootViewCreator> rootViewCreator = [[RNNReactRootViewCreator alloc] initWithBridge:bridge];
 	RNNControllerFactory *controllerFactory = [[RNNControllerFactory alloc] initWithRootViewCreator:rootViewCreator store:_store eventEmitter:eventEmitter];
-	_commandsHandler = [[RNNCommandsHandler alloc] initWithStore:_store controllerFactory:controllerFactory];
+	_commandsHandler = [[RNNCommandsHandler alloc] initWithStore:_store controllerFactory:controllerFactory andBridge:bridge];
 	RNNBridgeModule *bridgeModule = [[RNNBridgeModule alloc] initWithCommandsHandler:_commandsHandler];
 	
 	return @[bridgeModule,eventEmitter];

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

 		7BEF0D1D1E43771B003E96B0 /* RNNLayoutNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 7BEF0D1B1E43771B003E96B0 /* RNNLayoutNode.m */; };
 		A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */; };
 		A7626C011FC5796200492FB8 /* RNNTabBarOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = A7626C001FC5796200492FB8 /* RNNTabBarOptions.m */; };
-		A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */; };
+		E8367B801F7A8A4700675C05 /* VICMAImageView.h in Headers */ = {isa = PBXBuildFile; fileRef = E8367B7E1F7A8A4700675C05 /* VICMAImageView.h */; };
+		E8367B811F7A8A4700675C05 /* VICMAImageView.m in Sources */ = {isa = PBXBuildFile; fileRef = E8367B7F1F7A8A4700675C05 /* VICMAImageView.m */; };
 		E83BAD681F2734B500A9F3DD /* RNNNavigationOptionsTest.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD671F2734B500A9F3DD /* RNNNavigationOptionsTest.m */; };
 		E83BAD6B1F27363A00A9F3DD /* RNNNavigationOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD6A1F27363A00A9F3DD /* RNNNavigationOptions.m */; };
 		E83BAD791F27416B00A9F3DD /* RNNRootViewControllerTest.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD781F27416B00A9F3DD /* RNNRootViewControllerTest.m */; };
 		E83BAD7C1F27643000A9F3DD /* RNNTestRootViewCreator.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD7B1F27643000A9F3DD /* RNNTestRootViewCreator.m */; };
+		E8A430111F9CB87B00B61A20 /* RNNAnimatedView.h in Headers */ = {isa = PBXBuildFile; fileRef = E8A4300F1F9CB87B00B61A20 /* RNNAnimatedView.h */; };
+		E8A430121F9CB87B00B61A20 /* RNNAnimatedView.m in Sources */ = {isa = PBXBuildFile; fileRef = E8A430101F9CB87B00B61A20 /* RNNAnimatedView.m */; };
+		E8A5CD521F464F0400E89D0D /* RNNAnimator.h in Headers */ = {isa = PBXBuildFile; fileRef = E8A5CD501F464F0400E89D0D /* RNNAnimator.h */; };
+		E8A5CD531F464F0400E89D0D /* RNNAnimator.m in Sources */ = {isa = PBXBuildFile; fileRef = E8A5CD511F464F0400E89D0D /* RNNAnimator.m */; };
+		E8A5CD5A1F48CCC300E89D0D /* RNNNavigationController.h in Headers */ = {isa = PBXBuildFile; fileRef = E8A5CD581F48CCC300E89D0D /* RNNNavigationController.h */; };
+		E8A5CD621F49114F00E89D0D /* RNNElement.h in Headers */ = {isa = PBXBuildFile; fileRef = E8A5CD601F49114F00E89D0D /* RNNElement.h */; };
+		E8A5CD631F49114F00E89D0D /* RNNElement.m in Sources */ = {isa = PBXBuildFile; fileRef = E8A5CD611F49114F00E89D0D /* RNNElement.m */; };
+		E8AEDB3C1F55A1C2000F5A6A /* RNNElementView.h in Headers */ = {isa = PBXBuildFile; fileRef = E8AEDB3A1F55A1C2000F5A6A /* RNNElementView.h */; };
+		E8AEDB3D1F55A1C2000F5A6A /* RNNElementView.m in Sources */ = {isa = PBXBuildFile; fileRef = E8AEDB3B1F55A1C2000F5A6A /* RNNElementView.m */; };
+		E8AEDB4A1F5C0BAF000F5A6A /* RNNInteractivePopAnimator.h in Headers */ = {isa = PBXBuildFile; fileRef = E8AEDB481F5C0BAF000F5A6A /* RNNInteractivePopAnimator.h */; };
+		E8AEDB4B1F5C0BAF000F5A6A /* RNNInteractivePopAnimator.m in Sources */ = {isa = PBXBuildFile; fileRef = E8AEDB491F5C0BAF000F5A6A /* RNNInteractivePopAnimator.m */; };
+		E8DA243D1F973C1900CD552B /* RNNTransitionStateHolderTest.m in Sources */ = {isa = PBXBuildFile; fileRef = E8DA243C1F973C1900CD552B /* RNNTransitionStateHolderTest.m */; };
+		E8DA24401F97459B00CD552B /* RNNElementFinder.h in Headers */ = {isa = PBXBuildFile; fileRef = E8DA243E1F97459B00CD552B /* RNNElementFinder.h */; };
+		E8DA24411F97459B00CD552B /* RNNElementFinder.m in Sources */ = {isa = PBXBuildFile; fileRef = E8DA243F1F97459B00CD552B /* RNNElementFinder.m */; };
+		E8E5182E1F83A48B000467AC /* RNNTransitionStateHolder.h in Headers */ = {isa = PBXBuildFile; fileRef = E8E5182C1F83A48B000467AC /* RNNTransitionStateHolder.h */; };
+		E8E5182F1F83A48B000467AC /* RNNTransitionStateHolder.m in Sources */ = {isa = PBXBuildFile; fileRef = E8E5182D1F83A48B000467AC /* RNNTransitionStateHolder.m */; };
+		E8E518321F83B3E0000467AC /* RNNUtils.h in Headers */ = {isa = PBXBuildFile; fileRef = E8E518301F83B3E0000467AC /* RNNUtils.h */; };
+		E8E518331F83B3E0000467AC /* RNNUtils.m in Sources */ = {isa = PBXBuildFile; fileRef = E8E518311F83B3E0000467AC /* RNNUtils.m */; };
+		E8E518361F83B94A000467AC /* RNNViewLocation.h in Headers */ = {isa = PBXBuildFile; fileRef = E8E518341F83B94A000467AC /* RNNViewLocation.h */; };
+		E8E518371F83B94A000467AC /* RNNViewLocation.m in Sources */ = {isa = PBXBuildFile; fileRef = E8E518351F83B94A000467AC /* RNNViewLocation.m */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
 		A7626BFF1FC578AB00492FB8 /* RNNTabBarOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTabBarOptions.h; sourceTree = "<group>"; };
 		A7626C001FC5796200492FB8 /* RNNTabBarOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNTabBarOptions.m; sourceTree = "<group>"; };
 		D8AFADBD1BEE6F3F00A4592D /* libReactNativeNavigation.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libReactNativeNavigation.a; sourceTree = BUILT_PRODUCTS_DIR; };
+		E8367B7E1F7A8A4700675C05 /* VICMAImageView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = VICMAImageView.h; sourceTree = "<group>"; };
+		E8367B7F1F7A8A4700675C05 /* VICMAImageView.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = VICMAImageView.m; sourceTree = "<group>"; };
 		E83BAD671F2734B500A9F3DD /* RNNNavigationOptionsTest.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNNavigationOptionsTest.m; sourceTree = "<group>"; };
 		E83BAD691F27362500A9F3DD /* RNNNavigationOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNNavigationOptions.h; sourceTree = "<group>"; };
 		E83BAD6A1F27363A00A9F3DD /* RNNNavigationOptions.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNNavigationOptions.m; sourceTree = "<group>"; };
 		E83BAD781F27416B00A9F3DD /* RNNRootViewControllerTest.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNRootViewControllerTest.m; sourceTree = "<group>"; };
 		E83BAD7A1F27643000A9F3DD /* RNNTestRootViewCreator.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNTestRootViewCreator.h; sourceTree = "<group>"; };
 		E83BAD7B1F27643000A9F3DD /* RNNTestRootViewCreator.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNTestRootViewCreator.m; sourceTree = "<group>"; };
+		E8A4300F1F9CB87B00B61A20 /* RNNAnimatedView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNAnimatedView.h; sourceTree = "<group>"; };
+		E8A430101F9CB87B00B61A20 /* RNNAnimatedView.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNAnimatedView.m; sourceTree = "<group>"; };
+		E8A5CD501F464F0400E89D0D /* RNNAnimator.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNAnimator.h; sourceTree = "<group>"; };
+		E8A5CD511F464F0400E89D0D /* RNNAnimator.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNAnimator.m; sourceTree = "<group>"; };
+		E8A5CD581F48CCC300E89D0D /* RNNNavigationController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNNavigationController.h; sourceTree = "<group>"; };
+		E8A5CD601F49114F00E89D0D /* RNNElement.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNElement.h; sourceTree = "<group>"; };
+		E8A5CD611F49114F00E89D0D /* RNNElement.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNElement.m; sourceTree = "<group>"; };
+		E8AEDB3A1F55A1C2000F5A6A /* RNNElementView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNElementView.h; sourceTree = "<group>"; };
+		E8AEDB3B1F55A1C2000F5A6A /* RNNElementView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNElementView.m; sourceTree = "<group>"; };
+		E8AEDB481F5C0BAF000F5A6A /* RNNInteractivePopAnimator.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNInteractivePopAnimator.h; sourceTree = "<group>"; };
+		E8AEDB491F5C0BAF000F5A6A /* RNNInteractivePopAnimator.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNInteractivePopAnimator.m; sourceTree = "<group>"; };
+		E8DA243C1F973C1900CD552B /* RNNTransitionStateHolderTest.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNTransitionStateHolderTest.m; sourceTree = "<group>"; };
+		E8DA243E1F97459B00CD552B /* RNNElementFinder.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNElementFinder.h; sourceTree = "<group>"; };
+		E8DA243F1F97459B00CD552B /* RNNElementFinder.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNElementFinder.m; sourceTree = "<group>"; };
+		E8E5182C1F83A48B000467AC /* RNNTransitionStateHolder.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTransitionStateHolder.h; sourceTree = "<group>"; };
+		E8E5182D1F83A48B000467AC /* RNNTransitionStateHolder.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNTransitionStateHolder.m; sourceTree = "<group>"; };
+		E8E518301F83B3E0000467AC /* RNNUtils.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNUtils.h; sourceTree = "<group>"; };
+		E8E518311F83B3E0000467AC /* RNNUtils.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNUtils.m; sourceTree = "<group>"; };
+		E8E518341F83B94A000467AC /* RNNViewLocation.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNViewLocation.h; sourceTree = "<group>"; };
+		E8E518351F83B94A000467AC /* RNNViewLocation.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNViewLocation.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
 		214545271F4DC7ED006E8DA1 /* Helpers */ = {
 			isa = PBXGroup;
 			children = (
+				E8E518301F83B3E0000467AC /* RNNUtils.h */,
+				E8E518311F83B3E0000467AC /* RNNUtils.m */,
 				214545281F4DC81F006E8DA1 /* RCTHelpers.h */,
 				214545291F4DC85F006E8DA1 /* RCTHelpers.m */,
 			);
 		7B1E4C4B1E2D173700C3A525 /* Controllers */ = {
 			isa = PBXGroup;
 			children = (
+				E8AEDB471F584175000F5A6A /* Components */,
+				E8AEDB461F58414D000F5A6A /* Animations */,
 				261F0E621E6EC94900989DE2 /* RNNModalManager.h */,
 				261F0E631E6EC94900989DE2 /* RNNModalManager.m */,
 				261F0E681E6F028A00989DE2 /* RNNNavigationStackManager.h */,
 				E83BAD781F27416B00A9F3DD /* RNNRootViewControllerTest.m */,
 				E83BAD7A1F27643000A9F3DD /* RNNTestRootViewCreator.h */,
 				E83BAD7B1F27643000A9F3DD /* RNNTestRootViewCreator.m */,
+				E8DA243C1F973C1900CD552B /* RNNTransitionStateHolderTest.m */,
 			);
 			path = ReactNativeNavigationTests;
 			sourceTree = "<group>";
 				7B49FEBC1E95090800DEB3EA /* ReactNativeNavigationTests */,
 				D8AFADBE1BEE6F3F00A4592D /* Products */,
 				7B49FED01E950A7A00DEB3EA /* Frameworks */,
+				E8367B791F77BA1F00675C05 /* Recovered References */,
 			);
 			sourceTree = "<group>";
 			tabWidth = 4;
 			name = Products;
 			sourceTree = "<group>";
 		};
+		E8367B791F77BA1F00675C05 /* Recovered References */ = {
+			isa = PBXGroup;
+			children = (
+				E8A5CD581F48CCC300E89D0D /* RNNNavigationController.h */,
+			);
+			name = "Recovered References";
+			sourceTree = "<group>";
+		};
+		E8AEDB461F58414D000F5A6A /* Animations */ = {
+			isa = PBXGroup;
+			children = (
+				E8A5CD501F464F0400E89D0D /* RNNAnimator.h */,
+				E8A5CD511F464F0400E89D0D /* RNNAnimator.m */,
+				E8AEDB481F5C0BAF000F5A6A /* RNNInteractivePopAnimator.h */,
+				E8AEDB491F5C0BAF000F5A6A /* RNNInteractivePopAnimator.m */,
+				E8E5182C1F83A48B000467AC /* RNNTransitionStateHolder.h */,
+				E8E5182D1F83A48B000467AC /* RNNTransitionStateHolder.m */,
+				E8E518341F83B94A000467AC /* RNNViewLocation.h */,
+				E8E518351F83B94A000467AC /* RNNViewLocation.m */,
+				E8DA243E1F97459B00CD552B /* RNNElementFinder.h */,
+				E8DA243F1F97459B00CD552B /* RNNElementFinder.m */,
+			);
+			name = Animations;
+			sourceTree = "<group>";
+		};
+		E8AEDB471F584175000F5A6A /* Components */ = {
+			isa = PBXGroup;
+			children = (
+				E8A5CD601F49114F00E89D0D /* RNNElement.h */,
+				E8A5CD611F49114F00E89D0D /* RNNElement.m */,
+				E8AEDB3A1F55A1C2000F5A6A /* RNNElementView.h */,
+				E8AEDB3B1F55A1C2000F5A6A /* RNNElementView.m */,
+				E8367B7E1F7A8A4700675C05 /* VICMAImageView.h */,
+				E8367B7F1F7A8A4700675C05 /* VICMAImageView.m */,
+				E8A4300F1F9CB87B00B61A20 /* RNNAnimatedView.h */,
+				E8A430101F9CB87B00B61A20 /* RNNAnimatedView.m */,
+			);
+			name = Components;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXHeadersBuildPhase section */
 				261F0E6A1E6F028A00989DE2 /* RNNNavigationStackManager.h in Headers */,
 				26916C981E4B9E7700D13680 /* RNNReactRootViewCreator.h in Headers */,
 				263905B01E4C6F440023D7D3 /* MMDrawerController+Subclass.h in Headers */,
+				E8AEDB4A1F5C0BAF000F5A6A /* RNNInteractivePopAnimator.h in Headers */,
 				7B1126A41E2D2B6C00F9B03B /* ReactNativeNavigation.h in Headers */,
 				263905B71E4C6F440023D7D3 /* UIViewController+MMDrawerController.h in Headers */,
 				263905BB1E4C6F440023D7D3 /* RCCDrawerHelper.h in Headers */,
 				50F5DFC11F407A8C001A00BC /* RNNTabBarController.h in Headers */,
 				263905BD1E4C6F440023D7D3 /* RCCDrawerProtocol.h in Headers */,
 				263905C21E4C6F440023D7D3 /* SidebarAnimation.h in Headers */,
+				E8E518361F83B94A000467AC /* RNNViewLocation.h in Headers */,
 				263905B51E4C6F440023D7D3 /* MMExampleDrawerVisualStateManager.h in Headers */,
 				263905C61E4C6F440023D7D3 /* SidebarFeedlyAnimation.h in Headers */,
 				7B1126A31E2D2B6C00F9B03B /* RNNSplashScreen.h in Headers */,
 				261F0E641E6EC94900989DE2 /* RNNModalManager.h in Headers */,
 				263905C01E4C6F440023D7D3 /* SidebarAirbnbAnimation.h in Headers */,
+				E8367B801F7A8A4700675C05 /* VICMAImageView.h in Headers */,
 				263905E61E4CAC950023D7D3 /* RNNSideMenuChildVC.h in Headers */,
 				263905C41E4C6F440023D7D3 /* SidebarFacebookAnimation.h in Headers */,
 				50F5DFC51F407AA0001A00BC /* RNNNavigationController.h in Headers */,
 				21B85E5F1F44482A00B314B5 /* RNNNavigationButtons.h in Headers */,
 				7BEF0D181E437684003E96B0 /* RNNRootViewController.h in Headers */,
+				E8A5CD5A1F48CCC300E89D0D /* RNNNavigationController.h in Headers */,
 				7B1126A61E2D2B6C00F9B03B /* RNNBridgeModule.h in Headers */,
+				E8DA24401F97459B00CD552B /* RNNElementFinder.h in Headers */,
 				263905BE1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.h in Headers */,
 				263905CE1E4C6F440023D7D3 /* TheSidebarController.h in Headers */,
 				7B1126A71E2D2B6C00F9B03B /* RNNEventEmitter.h in Headers */,
+				E8A430111F9CB87B00B61A20 /* RNNAnimatedView.h in Headers */,
 				268692821E5054F800E2C612 /* RNNStore.h in Headers */,
+				E8AEDB3C1F55A1C2000F5A6A /* RNNElementView.h in Headers */,
+				E8E518321F83B3E0000467AC /* RNNUtils.h in Headers */,
 				263905CA1E4C6F440023D7D3 /* SidebarLuvocracyAnimation.h in Headers */,
 				263905B11E4C6F440023D7D3 /* MMDrawerController.h in Headers */,
 				263905B91E4C6F440023D7D3 /* RCCDrawerController.h in Headers */,
 				263905B31E4C6F440023D7D3 /* MMDrawerVisualState.h in Headers */,
+				E8A5CD621F49114F00E89D0D /* RNNElement.h in Headers */,
+				E8E5182E1F83A48B000467AC /* RNNTransitionStateHolder.h in Headers */,
 				7B1126A91E2D2B6C00F9B03B /* RNNControllerFactory.h in Headers */,
 				263905D61E4C94970023D7D3 /* RNNSideMenuController.h in Headers */,
 				263905C81E4C6F440023D7D3 /* SidebarFlipboardAnimation.h in Headers */,
 				7BEF0D1C1E43771B003E96B0 /* RNNLayoutNode.h in Headers */,
+				E8A5CD521F464F0400E89D0D /* RNNAnimator.h in Headers */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
 					};
 					D8AFADBC1BEE6F3F00A4592D = {
 						CreatedOnToolsVersion = 7.1;
+						LastSwiftMigration = 0820;
 					};
 				};
 			};
 				7B49FECB1E95098500DEB3EA /* RNNControllerFactoryTest.m in Sources */,
 				7B49FECD1E95098500DEB3EA /* RNNModalManagerTest.m in Sources */,
 				E83BAD791F27416B00A9F3DD /* RNNRootViewControllerTest.m in Sources */,
+				E8DA243D1F973C1900CD552B /* RNNTransitionStateHolderTest.m in Sources */,
 				7B49FECC1E95098500DEB3EA /* RNNStoreTest.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 				263905C51E4C6F440023D7D3 /* SidebarFacebookAnimation.m in Sources */,
 				7BEF0D191E437684003E96B0 /* RNNRootViewController.m in Sources */,
 				263905C31E4C6F440023D7D3 /* SidebarAnimation.m in Sources */,
+				E8A5CD531F464F0400E89D0D /* RNNAnimator.m in Sources */,
 				261F0E6B1E6F028A00989DE2 /* RNNNavigationStackManager.m in Sources */,
+				E8DA24411F97459B00CD552B /* RNNElementFinder.m in Sources */,
 				263905BF1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.m in Sources */,
 				7B1126A01E2D263F00F9B03B /* RNNEventEmitter.m in Sources */,
 				A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */,
 				263905E71E4CAC950023D7D3 /* RNNSideMenuChildVC.m in Sources */,
 				7BA500751E2544B9001B9E1B /* ReactNativeNavigation.m in Sources */,
 				263905B21E4C6F440023D7D3 /* MMDrawerController.m in Sources */,
+				E8AEDB3D1F55A1C2000F5A6A /* RNNElementView.m in Sources */,
 				E83BAD6B1F27363A00A9F3DD /* RNNNavigationOptions.m in Sources */,
 				7BBFE5441E25330E002A6182 /* RNNBridgeModule.m in Sources */,
 				261F0E651E6EC94900989DE2 /* RNNModalManager.m in Sources */,
+				E8A5CD631F49114F00E89D0D /* RNNElement.m in Sources */,
 				7BEF0D1D1E43771B003E96B0 /* RNNLayoutNode.m in Sources */,
 				7BA500781E254908001B9E1B /* RNNSplashScreen.m in Sources */,
 				263905BA1E4C6F440023D7D3 /* RCCDrawerController.m in Sources */,
 				263905B81E4C6F440023D7D3 /* UIViewController+MMDrawerController.m in Sources */,
 				263905CD1E4C6F440023D7D3 /* SidebarWunderlistAnimation.m in Sources */,
 				263905CF1E4C6F440023D7D3 /* TheSidebarController.m in Sources */,
+				E8A430121F9CB87B00B61A20 /* RNNAnimatedView.m in Sources */,
+				E8367B811F7A8A4700675C05 /* VICMAImageView.m in Sources */,
 				A7626C011FC5796200492FB8 /* RNNTabBarOptions.m in Sources */,
 				263905AF1E4C6F440023D7D3 /* MMDrawerBarButtonItem.m in Sources */,
+				E8AEDB4B1F5C0BAF000F5A6A /* RNNInteractivePopAnimator.m in Sources */,
 				7B4928091E70415400555040 /* RNNCommandsHandler.m in Sources */,
 				268692831E5054F800E2C612 /* RNNStore.m in Sources */,
 				7BC9346E1E26886E00EFA125 /* RNNControllerFactory.m in Sources */,
+				E8E5182F1F83A48B000467AC /* RNNTransitionStateHolder.m in Sources */,
 				263905B61E4C6F440023D7D3 /* MMExampleDrawerVisualStateManager.m in Sources */,
+				E8E518331F83B3E0000467AC /* RNNUtils.m in Sources */,
 				50F5DFC61F407AA0001A00BC /* RNNNavigationController.m in Sources */,
 				21B85E5D1F44480200B314B5 /* RNNNavigationButtons.m in Sources */,
+				E8E518371F83B94A000467AC /* RNNViewLocation.m in Sources */,
 				263905C91E4C6F440023D7D3 /* SidebarFlipboardAnimation.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		D8AFADC71BEE6F3F00A4592D /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
+				CLANG_ENABLE_MODULES = YES;
 				GCC_TREAT_WARNINGS_AS_ERRORS = YES;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = ReactNativeNavigation;
 				PUBLIC_HEADERS_FOLDER_PATH = "include/${PRODUCT_NAME}";
 				SKIP_INSTALL = YES;
+				SWIFT_OBJC_BRIDGING_HEADER = "ReactNativeNavigation-Bridging-Header.h";
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 3.0;
 			};
 			name = Debug;
 		};
 		D8AFADC81BEE6F3F00A4592D /* Release */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
+				CLANG_ENABLE_MODULES = YES;
 				GCC_TREAT_WARNINGS_AS_ERRORS = YES;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = ReactNativeNavigation;
 				PUBLIC_HEADERS_FOLDER_PATH = "include/${PRODUCT_NAME}";
 				SKIP_INSTALL = YES;
+				SWIFT_OBJC_BRIDGING_HEADER = "ReactNativeNavigation-Bridging-Header.h";
+				SWIFT_VERSION = 3.0;
 			};
 			name = Release;
 		};

lib/ios/ReactNativeNavigation.xcodeproj/xcshareddata/xcschemes/ReactNativeNavigation.xcscheme

       </BuildActionEntries>
    </BuildAction>
    <TestAction
-      buildConfiguration = "Release"
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      language = ""
       shouldUseLaunchSchemeArgsEnv = "YES">
       <Testables>
          <TestableReference
       buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      language = ""
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
       ignoresPersistentStateOnLaunch = "NO"

lib/ios/ReactNativeNavigationTests/RNNCommandsHandlerTest.m

 
 @property (nonatomic, strong) RNNStore* store;
 @property (nonatomic, strong) RNNCommandsHandler* uut;
+@property (nonatomic, strong) RCTBridge* bridge;
 
 @end
 
 
 - (void)setUp {
 	[super setUp];
+//	[self.store setReadyToReceiveCommands:true];
 	self.store = [[RNNStore alloc] init];
-	self.uut = [[RNNCommandsHandler alloc] initWithStore:self.store controllerFactory:nil];
+	self.bridge = nil;
+	self.uut = [[RNNCommandsHandler alloc] initWithStore:self.store controllerFactory:nil andBridge:self.bridge];
 }
 
 
 - (void)testAssertReadyForEachMethodThrowsExceptoins {
 	NSArray* methods = [self getPublicMethodNamesForObject:self.uut];
-	
+	[self.store setReadyToReceiveCommands:false];
 	for (NSString* methodName in methods) {
 		SEL s = NSSelectorFromString(methodName);
 		NSMethodSignature* signature = [self.uut methodSignatureForSelector:s];
 
 -(NSArray*) getPublicMethodNamesForObject:(NSObject*)obj{
 	NSMutableArray* skipMethods = [NSMutableArray new];
-	[skipMethods addObject:@"initWithStore:controllerFactory:"];
+
+	[skipMethods addObject:@"initWithStore:controllerFactory:andBridge:"];
 	[skipMethods addObject:@"assertReady"];
 	[skipMethods addObject:@".cxx_destruct"];
-	
+
 	NSMutableArray* result = [NSMutableArray new];
-	
+
 	// count and names:
 	int i=0;
 	unsigned int mc = 0;
 	Method * mlist = class_copyMethodList(object_getClass(obj), &mc);
-	
+
 	for(i=0; i<mc; i++) {
 		NSString *methodName = [NSString stringWithUTF8String:sel_getName(method_getName(mlist[i]))];
-		
+
 		// filter skippedMethods
 		if (methodName && ![skipMethods containsObject:methodName]) {
 			[result addObject:methodName];
 		}
 	}
-	
+
 	return result;
 }
 
 	RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:vc];
 	[vc viewWillAppear:false];
 	XCTAssertTrue([vc.navigationItem.title isEqual:@"the title"]);
-	
+
 	[self.store setReadyToReceiveCommands:true];
 	[self.store setContainer:vc containerId:@"containerId"];
 	
 	NSDictionary* dictFromJs = @{@"topBar": @{@"backgroundColor" :@(0xFFFF0000)}};
 	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
-	
+
 	[self.uut setOptions:@"containerId" options:dictFromJs];
-	
+
 	XCTAssertTrue([vc.navigationItem.title isEqual:@"the title"]);
 	XCTAssertTrue([nav.navigationBar.barTintColor isEqual:expectedColor]);
 }

lib/ios/ReactNativeNavigationTests/RNNNavigationStackManagerTest.m

 
 
 - (void)testPop_removeTopVCFromStore {
-	[self.uut pop:@"vc3"];
-	
+	[self.uut pop:@"vc3" withAnimationData:(NSDictionary*)nil];
 	XCTAssertNil([self.store findContainerForId:@"vc3"]);
 	XCTAssertNotNil([self.store findContainerForId:@"vc2"]);
 	XCTAssertNotNil([self.store findContainerForId:@"vc1"]);

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

 	XCTAssertFalse(self.uut.navigationController.navigationBar.translucent);
 }
 
--(void)testTopBarTransparent {
-	NSNumber* topBarTransparentInput = @(0);
-	self.options.topBar.transparent = topBarTransparentInput;
-	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
-	[self.uut viewWillAppear:false];
-	XCTAssertNotNil(self.uut.navigationController.navigationBar.shadowImage);
-	XCTAssertNotNil([self.uut.navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault]);
-	XCTAssertTrue(CGRectEqualToRect(self.uut.navigationController.navigationBar.subviews.firstObject.frame, CGRectZero));
-}
-
 -(void)testTabBadge {
 	NSString* tabBadgeInput = @"5";
 	self.options.tabBar.tabBadge = tabBadgeInput;
 	
 }
 
+-(void)testTopBarTransparent_BOOL_True {
+	NSNumber* topBarTransparentInput = @(1);
+	self.options.topBar.transparent = topBarTransparentInput;
+	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	UIView* transparentView = [self.uut.navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
+	XCTAssertTrue(transparentView);
+	XCTAssertTrue([NSStringFromCGRect(transparentView.frame) isEqual: NSStringFromCGRect(CGRectZero)]);
+}
+
+-(void)testTopBarTransparent_BOOL_false {
+	NSNumber* topBarTransparentInput = @(0);
+	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
+	self.options.topBar.transparent = topBarTransparentInput;
+	[self.uut viewWillAppear:false];
+	UIView* transparentView = [self.uut.navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
+	XCTAssertFalse(transparentView);
+}
+
+
+-(void)testStoreOriginalTopBarImages {
+	
+}
 
 -(void)testTopBarTextFontSize_withoutTextFontFamily_withoutTextColor {
 	NSNumber* topBarTextFontSizeInput = @(15);
 	XCTAssertNil([self.uut.navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]);
 }
 
-
+-(void)testTopBarLargeTitle_default {
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode,  UINavigationItemLargeTitleDisplayModeNever);
+}
+-(void)testTopBarLargeTitle_true {
+	self.options.topBar.largeTitle = @(1);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode, UINavigationItemLargeTitleDisplayModeAlways);
+}
+-(void)testTopBarLargeTitle_false {
+	self.options.tabBar.hidden = @(0);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode, UINavigationItemLargeTitleDisplayModeNever);
+}
 -(void)testTopBarBlur_false {
 	NSNumber* topBarBlurInput = @(0);
 	self.options.topBar.blur = topBarBlurInput;

lib/ios/ReactNativeNavigationTests/RNNTransitionStateHolderTest.m

+#import <XCTest/XCTest.h>
+#import "RNNTransitionStateHolder.h"
+
+@interface RNNTransitionStateHolderTest : XCTestCase
+
+@end
+
+@implementation RNNTransitionStateHolderTest
+
+- (void)testDefaultObjectProperties {
+	RNNTransitionStateHolder* defaultTransitionObject = [[RNNTransitionStateHolder alloc] initWithTransition:@{@"fromId": @"hello"}];
+	XCTAssertEqual(defaultTransitionObject.springDamping,  0.85);
+	XCTAssertEqual(defaultTransitionObject.springVelocity,  0.8);
+	XCTAssertEqual(defaultTransitionObject.startDelay,  0);
+	XCTAssertEqual(defaultTransitionObject.startAlpha,  1);
+	XCTAssertEqual(defaultTransitionObject.endAlpha,  1);
+	XCTAssertEqual(defaultTransitionObject.startX,  0);
+	XCTAssertEqual(defaultTransitionObject.startY,  0);
+	XCTAssertEqual(defaultTransitionObject.endX,  0);
+	XCTAssertEqual(defaultTransitionObject.endY,  0);
+	XCTAssertEqual(defaultTransitionObject.duration,  1);
+	XCTAssertEqual(defaultTransitionObject.interactivePop,  false);
+}
+
+
+@end

lib/ios/VICMAImageView.h

+//
+//  VIAnimatableImageView.h
+//  VIAnimatableImageViewDemo
+//
+//  Created by Vito on 12/30/14.
+//  Copyright (c) 2014 Vito. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+
+/**
+ *  Content mode animatable image view.
+ */
+@interface VICMAImageView : UIView
+
+@property (nonatomic, strong) UIImage *image;
+
+- (instancetype)initWithImage:(UIImage *)image;
+
+// The image presentation size
+- (CGSize)presentationImageSize;
+
+@end

lib/ios/VICMAImageView.m

+//
+//  VIAnimatableImageView.m
+//  VIAnimatableImageViewDemo
+//
+//  Created by Vito on 12/30/14.
+//  Copyright (c) 2014 Vito. All rights reserved.
+// 	project can be found at: https://github.com/vitoziv/VICMAImageView
+
+#import "VICMAImageView.h"
+
+@interface VICMAImageView ()
+
+@property (nonatomic, strong) UIImageView *imageView;
+
+@end
+
+@implementation VICMAImageView
+
+- (void)commonInit
+{
+	self.clipsToBounds = YES;
+	self.contentMode = UIViewContentModeScaleAspectFit;
+	
+	if (!_imageView) {
+		UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.frame];
+		imageView.contentMode = UIViewContentModeScaleToFill;
+		[self addSubview:imageView];
+		_imageView = imageView;
+	}
+}
+
+- (instancetype)initWithImage:(UIImage *)image
+{
+	self = [super init];
+	if (self) {
+		[self commonInit];
+		_imageView.image = image;
+	}
+	
+	return self;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+	self = [super initWithFrame:frame];
+	if (self) {
+		[self commonInit];
+	}
+	
+	return self;
+}
+
+- (instancetype)initWithCoder:(NSCoder *)aDecoder
+{
+	self = [super initWithCoder:aDecoder];
+	if (self) {
+		[self commonInit];
+	}
+	
+	return self;
+}
+
+- (CGSize)presentationImageSize
+{
+	return self.imageView.bounds.size;
+}
+
+- (void)setImage:(UIImage *)image
+{
+	self.imageView.image = image;
+	[self updateView];
+}
+
+- (UIImage *)image
+{
+	return self.imageView.image;
+}
+
+- (void)setFrame:(CGRect)frame
+{
+	[super setFrame:frame];
+	[self updateView];
+}
+
+- (void)setContentMode:(UIViewContentMode)contentMode
+{
+	[super setContentMode:contentMode];
+	[self updateView];
+}
+
+- (void)updateView
+{
+	if (self.bounds.size.width == 0 || self.bounds.size.height == 0 ||
+		self.image.size.width == 0 || self.image.size.height == 0) {
+		return;
+	}
+	
+	switch (self.contentMode) {
+		case UIViewContentModeScaleAspectFit:
+			[self updateViewToAspectFit];
+			break;
+			
+		case UIViewContentModeScaleAspectFill:
+			[self updateViewToAspectFill];
+			break;
+			
+		case UIViewContentModeScaleToFill:
+			[self updateViewToScaleToFill];
+			break;
+			
+		case UIViewContentModeCenter:
+			[self updateViewToCenter];
+			break;
+			
+		case UIViewContentModeBottom:
+			[self updateViewToBottom];
+			break;
+			
+		case UIViewContentModeBottomLeft:
+			[self updateViewToBottomLeft];
+			break;
+			
+		case UIViewContentModeBottomRight:
+			[self updateViewToBottomRight];
+			break;
+			
+		case UIViewContentModeLeft:
+			[self updateViewToLeft];
+			break;
+			
+		case UIViewContentModeRight:
+			[self updateViewToRight];
+			break;
+			
+		case UIViewContentModeTop:
+			[self updateViewToTop];
+			break;
+			
+		case UIViewContentModeTopLeft:
+			[self updateViewToTopLeft];
+			break;
+			
+		case UIViewContentModeTopRight:
+			[self updateViewToTopRight];
+			break;
+			
+		case UIViewContentModeRedraw:
+			[self updateViewToScaleToFill];
+			break;
+			
+		default:
+			break;
+	}
+}
+
+- (void)updateViewToAspectFit
+{
+	CGSize imageSize = CGSizeMake(self.imageView.image.size.width / self.imageView.image.scale,
+								  self.imageView.image.size.height / self.imageView.image.scale);
+	
+	CGFloat widthRatio = imageSize.width / self.bounds.size.width;
+	CGFloat heightRatio = imageSize.height / self.bounds.size.height;
+	
+	if (widthRatio > heightRatio) {
+		imageSize = CGSizeMake(imageSize.width / widthRatio, imageSize.height / widthRatio);
+	} else {
+		imageSize = CGSizeMake(imageSize.width / heightRatio, imageSize.height / heightRatio);
+	}
+	
+	self.imageView.bounds = CGRectMake(0, 0, imageSize.width, imageSize.height);
+	self.imageView.center = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
+}
+
+- (void)updateViewToAspectFill
+{
+	CGSize imageSize = CGSizeMake(self.imageView.image.size.width / self.imageView.image.scale,
+								  self.imageView.image.size.height / self.imageView.image.scale);
+	
+	CGFloat widthRatio = imageSize.width / self.bounds.size.width;
+	CGFloat heightRatio = imageSize.height / self.bounds.size.height;
+	
+	if (widthRatio > heightRatio) {
+		imageSize = CGSizeMake(imageSize.width / heightRatio, imageSize.height / heightRatio);
+	} else {
+		imageSize = CGSizeMake(imageSize.width / widthRatio, imageSize.height / widthRatio);
+	}
+	
+	self.imageView.bounds = CGRectMake(0, 0, imageSize.width, imageSize.height);
+	[self centerImageViewToSuperView];
+}
+
+- (void)updateViewToScaleToFill
+{
+	self.imageView.bounds = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
+	[self centerImageViewToSuperView];
+}
+
+- (void)updateViewToCenter
+{
+	[self fitImageViewSizeToImageSize];
+	[self centerImageViewToSuperView];
+}
+
+- (void)updateViewToBottom
+{
+	[self fitImageViewSizeToImageSize];
+	self.imageView.center = CGPointMake(self.bounds.size.width / 2,
+										self.bounds.size.height - self.image.size.height / 2);
+}
+
+- (void)updateViewToBottomLeft
+{
+	[self fitImageViewSizeToImageSize];
+	
+	self.imageView.center = CGPointMake(self.image.size.width / 2,
+										self.bounds.size.height - self.image.size.height / 2);
+}
+
+- (void)updateViewToBottomRight
+{
+	[self fitImageViewSizeToImageSize];
+	self.imageView.center = CGPointMake(self.bounds.size.width - self.image.size.width / 2,
+										self.bounds.size.height - self.image.size.height / 2);
+}
+
+- (void)updateViewToLeft
+{
+	[self fitImageViewSizeToImageSize];
+	
+	self.imageView.center = CGPointMake(self.image.size.width / 2,
+										self.bounds.size.height / 2);
+}
+
+- (void)updateViewToRight
+{
+	[self fitImageViewSizeToImageSize];
+	
+	self.imageView.center = CGPointMake(self.bounds.size.width - self.image.size.width / 2,
+										self.bounds.size.height / 2);
+}
+
+- (void)updateViewToTop
+{
+	[self fitImageViewSizeToImageSize];
+	
+	self.imageView.center = CGPointMake(self.bounds.size.width / 2,
+										self.image.size.height / 2);
+}
+
+- (void)updateViewToTopLeft
+{
+	[self fitImageViewSizeToImageSize];
+	
+	self.imageView.center = CGPointMake(self.image.size.width / 2,
+										self.image.size.height / 2);
+}
+
+- (void)updateViewToTopRight
+{
+	[self fitImageViewSizeToImageSize];
+	self.imageView.center = CGPointMake(self.bounds.size.width - self.image.size.width / 2,
+										self.image.size.height / 2);
+}
+
+#pragma mark - Helper
+
+- (void)fitImageViewSizeToImageSize
+{
+	CGSize imageSize = CGSizeMake(self.imageView.image.size.width / self.imageView.image.scale,
+								  self.imageView.image.size.height / self.imageView.image.scale);
+	
+	self.imageView.bounds = CGRectMake(0, 0, imageSize.width, imageSize.height);
+}
+
+- (void)centerImageViewToSuperView
+{
+	self.imageView.center = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
+}
+
+@end

lib/src/Navigation.js

 const LayoutTreeCrawler = require('./commands/LayoutTreeCrawler');
 const PrivateEventsListener = require('./events/PrivateEventsListener');
 const PublicEventsRegistry = require('./events/PublicEventsRegistry');
+const Element = require('./adapters/Element');
 
 class Navigation {
   constructor() {
     this.publicEventsRegistry = new PublicEventsRegistry(this.nativeEventsReceiver);
     this.privateEventsListener = new PrivateEventsListener(this.nativeEventsReceiver, this.store);
     this.privateEventsListener.listenAndHandlePrivateEvents();
+    this.Element = Element;
   }
-
   registerContainer(containerName, getContainerFunc) {
     this.containerRegistry.registerContainer(containerName, getContainerFunc);
   }
     return this.commands.push(onContainerId, params);
   }
 
-  pop(containerId) {
-    return this.commands.pop(containerId);
+  pop(containerId, params) {
+    return this.commands.pop(containerId, params);
   }
 
   popTo(containerId) {

lib/src/adapters/Element.js

+import PropTypes from 'prop-types';
+import React from 'react';
+import { requireNativeComponent } from 'react-native';
+
+class Element extends React.Component {
+  render() {
+    return <RNNElement {...this.props} />;
+  }
+}
+
+Element.propTypes = {
+  elementId: PropTypes.string.isRequired,
+  resizeMode: PropTypes.string
+};
+Element.defaultProps = {
+  resizeMode: ''
+};
+const RNNElement = requireNativeComponent('RNNElement', Element);
+
+module.exports = Element;

lib/src/adapters/NativeCommandsSender.js

     return this.nativeCommandsModule.push(onContainerId, layout);
   }
 
-  pop(containerId) {
-    return this.nativeCommandsModule.pop(containerId);
+  pop(containerId, options) {
+    return this.nativeCommandsModule.pop(containerId, options);
   }
 
   popTo(containerId) {

lib/src/commands/Commands.js

     return this.nativeCommandsSender.push(onContainerId, layout);
   }
 
-  pop(containerId) {
-    return this.nativeCommandsSender.pop(containerId);
+  pop(containerId, options) {
+    return this.nativeCommandsSender.pop(containerId, options);
   }
 
   popTo(containerId) {

lib/src/commands/Commands.test.js

     it('pops a container, passing containerId', () => {
       uut.pop('theContainerId');
       expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
-      expect(mockCommandsSender.pop).toHaveBeenCalledWith('theContainerId');
+      expect(mockCommandsSender.pop).toHaveBeenCalledWith('theContainerId', undefined);
+    });
+    it('pops a container, passing containerId and options', () => {
+      const options = {
+        customTransition: {
+          animations: [
+            { type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 }
+          ],
+          duration: 0.8
+        } };
+      uut.pop('theContainerId', options);
+      expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.pop).toHaveBeenCalledWith('theContainerId', options);
     });
 
     it('pop returns a promise that resolves to containerId', async () => {

package-lock.json

     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
     "asn1": {
       "version": "0.2.3",
     "core-js": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
-      "dev": true
+      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
     },
     "core-util-is": {
       "version": "1.0.2",
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "dev": true,
       "requires": {
         "iconv-lite": "0.4.19"
       }
       "version": "0.8.16",
       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
       "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
-      "dev": true,
       "requires": {
         "core-js": "1.2.7",
         "isomorphic-fetch": "2.2.1",
             }
           }
         },
-        "string-width": {
-          "version": "1.0.2",
+        "string_decoder": {
+          "version": "1.0.1",
           "bundled": true,
           "dev": true,
           "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
+            "safe-buffer": "5.0.1"
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
+        "string-width": {
+          "version": "1.0.2",
           "bundled": true,
           "dev": true,
           "requires": {
-            "safe-buffer": "5.0.1"
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
           }
         },
         "stringstream": {
     "iconv-lite": {
       "version": "0.4.19",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
-      "dev": true
+      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
     },
     "ignore": {
       "version": "3.3.7",
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-symbol": {
       "version": "1.0.1",
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "dev": true,
       "requires": {
         "node-fetch": "1.7.3",
         "whatwg-fetch": "2.0.3"
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-types": {
       "version": "1.0.0",
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-      "dev": true,
       "requires": {
         "js-tokens": "3.0.2"
       }
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
       "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "dev": true,
       "requires": {
         "encoding": "0.1.12",
         "is-stream": "1.1.0"
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-keys": {
       "version": "1.0.11",
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
       "requires": {
         "asap": "2.0.6"
       }
       "version": "15.6.0",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
       "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
-      "dev": true,
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-      "dev": true
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "shebang-command": {
       "version": "1.2.0",
         }
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "string-length": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
         "strip-ansi": "3.0.1"
       }
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
     "ua-parser-js": {
       "version": "0.7.17",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz",
-      "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==",
-      "dev": true
+      "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g=="
     },
     "uglify-js": {
       "version": "2.8.29",
     "whatwg-fetch": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz",
-      "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=",
-      "dev": true
+      "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ="
     },
     "whatwg-url": {
       "version": "4.8.0",

package.json

     "react-native": "*"
   },
   "dependencies": {
-    "lodash": "4.x.x"
+    "lodash": "4.x.x",
+    "prop-types": "15.x.x"
   },
   "devDependencies": {
     "xo": "0.18.x",
     "eslint-config-xo": "0.18.x",
-    "eslint-config-xo-react": "0.14.x",
+    "eslint-config-xo-react": "0.13.x",
     "eslint-plugin-react": "7.x.x",
     "detox": "6.x.x",
     "jest": "21.x.x",
-    "mocha": "4.x.x",
+    "mocha": "3.x.x",
     "react": "16.0.0-alpha.6",
     "react-native": "0.44.0",
     "react-test-renderer": "16.0.0-alpha.6",
         }
       ],
       "react/jsx-tag-spacing": 0,
-      "react/jsx-curly-brace-presence": 0,
       "react/jsx-sort-props": 0,
       "react/jsx-boolean-value": 0,
       "react/prop-types": 0,

playground/ios/playground.xcodeproj/project.pbxproj

 			isa = PBXGroup;
 			children = (
 				7B8F2FEB1E840F6700110AEC /* libRCTAnimation.a */,
-				7B8F2FED1E840F6700110AEC /* libRCTAnimation-tvOS.a */,
+				7B8F2FED1E840F6700110AEC /* libRCTAnimation.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
 			remoteRef = 7B8F2FEA1E840F6700110AEC /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		7B8F2FED1E840F6700110AEC /* libRCTAnimation-tvOS.a */ = {
+		7B8F2FED1E840F6700110AEC /* libRCTAnimation.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
-			path = "libRCTAnimation-tvOS.a";
+			path = libRCTAnimation.a;
 			remoteRef = 7B8F2FEC1E840F6700110AEC /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				CODE_SIGN_STYLE = Manual;
 				DEAD_CODE_STRIPPING = NO;
 				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = playground/Info.plist;
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = com.reactnativenavigation.playground;
 				PRODUCT_NAME = playground;
+				PROVISIONING_PROFILE_SPECIFIER = "";
 			};
 			name = Debug;
 		};
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				CODE_SIGN_STYLE = Manual;
 				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = playground/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = com.reactnativenavigation.playground;
 				PRODUCT_NAME = playground;
+				PROVISIONING_PROFILE_SPECIFIER = "";
 			};
 			name = Release;
 		};

playground/ios/playground.xcodeproj/xcshareddata/xcschemes/playground.xcscheme

       buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      language = ""
       shouldUseLaunchSchemeArgsEnv = "NO">
       <Testables>
          <TestableReference
       buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      language = ""
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
       ignoresPersistentStateOnLaunch = "NO"

playground/src/app.js

 
 function start() {
   registerContainers();
-
   Navigation.events().onAppLaunched(() => {
     Navigation.setRoot({
       container: {

playground/src/containers/CustomTransitionDestination.js

+const React = require('react');
+const { Component } = require('react');
+const { View, TouchableOpacity, Image, Text } = require('react-native');
+const Navigation = require('react-native-navigation');
+
+class CustomTransitionDestination extends Component {
+  constructor(props) {
+    super(props);
+    this.pop = this.pop.bind(this);
+    this.push = this.push.bind(this);
+  }
+
+  static get navigationOptions() {
+    return {
+      backButtonTransition: 'custom',
+      topBar: {
+        title: 'ye babyyyyyy',
+        textFontFamily: 'HelveticaNeue-Italic',
+        largeTitle: true
+      }
+    };
+  }
+  push() {
+    Navigation.push(this.props.containerId, {
+      name: 'navigation.playground.OptionsScreen'
+    });
+  }
+  pop() {
+    Navigation.pop(this.props.containerId, { customTransition: {
+      animations: [{ type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
+            { type: 'sharedElement', toId: 'image1', fromId: 'customDestinationImage', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
+            { type: 'sharedElement', toId: 'image2', fromId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
+            { fromId: 'image4', startY: 50, startX: 50, startAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
+            { fromId: 'customDestinationParagraph', endY: 50, endX: 50, endAlpha: 0, startAlpha: 1, startDelay: 0, duration: 0.8 }
+      ],
+      duration: 0.8
+    } });
+  }
+  render() {
+    return (
+      <View style={styles.root}>
+        <View>
+          <Navigation.Element resizeMode={'contain'} elementId={'customDestinationImage'}>
+            <Image resizeMode={'contain'} style={{ width: 300, height: 300 }} source={require('../../img/400.jpeg')} />
+          </Navigation.Element>
+          <Navigation.Element elementId={'customDestinationImage2'}>
+            <Image style={{ width: 100, height: 100 }} source={require('../../img/2048.jpeg')} />
+          </Navigation.Element>
+        </View>
+
+        <TouchableOpacity testID={'shared_image2'} onPress={this.pop}>
+          <Navigation.Element elementId={'title2'}>
+            <Text style={styles.h1}>{`Custom Transition Screen`}</Text>
+          </Navigation.Element>
+        </TouchableOpacity>
+        <Navigation.Element elementId={'customDestinationParagraph'}>
+          <Text style={styles.p}>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+           nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
+           in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+          cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum`}
+          </Text>
+
+        </Navigation.Element>
+      </View>
+    );
+  }
+}
+module.exports = CustomTransitionDestination;
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'left',
+    margin: 10
+  },
+  p: {
+    fontSize: 14,
+    margin: 10,
+    textAlign: 'left'
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+};

playground/src/containers/CustomTransitionOrigin.js

+const React = require('react');
+const { Component } = require('react');
+const { View, Text, Image, TouchableOpacity } = require('react-native');
+const Navigation = require('react-native-navigation');
+
+class CustomTransitionOrigin extends Component {
+  constructor(props) {
+    super(props);
+    this.onClickNavigationIcon = this.onClickNavigationIcon.bind(this);
+  }
+  static get navigationOptions() {
+    return {
+      topBar: {
+        textFontFamily: 'HelveticaNeue-Italic',
+        textFontSize: 16,
+        largeTitle: false
+      }
+    };
+  }
+  render() {
+    return (
+      <View style={styles.root}>
+        <Navigation.Element elementId="title1">
+          <Text style={styles.h1}>Custom Transition Screen</Text>
+        </Navigation.Element>
+        <View style={{ flex: 1, justifyContent: 'flex-start' }}>
+          <TouchableOpacity testID="shared_image1" activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
+            <Navigation.Element resizeMode="cover" elementId="image1">
+              <Image resizeMode="cover" style={styles.gyroImage} source={require('../../img/400.jpeg')} />
+            </Navigation.Element>
+          </TouchableOpacity>
+          <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
+            <Navigation.Element elementId="image2">
+              <Image style={styles.gyroImage} source={require('../../img/2048.jpeg')} />
+            </Navigation.Element>
+          </TouchableOpacity>
+          <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
+            <Navigation.Element elementId="image3">
+              <Image style={styles.gyroImage} source={require('../../img/Icon-87.png')} />
+            </Navigation.Element>
+          </TouchableOpacity>
+          <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
+            <Navigation.Element elementId="image4">
+              <Image style={styles.gyroImage} source={require('../../img/Icon-87.png')} />
+            </Navigation.Element>
+          </TouchableOpacity>
+        </View>
+
+      </View>
+    );
+  }
+  onClickNavigationIcon() {
+    Navigation.push(this.props.containerId, {
+      name: 'navigation.playground.CustomTransitionDestination',
+      customTransition: {
+        animations: [
+              { type: 'sharedElement', fromId: 'title1', toId: 'title2', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
+              { type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9, springDamping: 0.9, duration: 0.8, interactivePop: true },
+              { type: 'sharedElement', fromId: 'image2', toId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
+              { fromId: 'image4', endY: 50, endX: 50, endAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
+              { fromId: 'customDestinationParagraph', startY: 50, startAlpha: 0, endAlpha: 1, startDelay: 0, duration: 0.8 }
+
+        ],
+        duration: 0.8
+      }
+    });
+  }
+}
+module.exports = CustomTransitionOrigin;
+
+const styles = {
+  root: {
+    alignItems: 'center',
+    flexGrow: 1,
+    backgroundColor: '#f5fcff'
+  },
+  h1: {
+
+    fontSize: 24,
+    textAlign: 'center',
+    marginTop: 100
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  },
+  gyroImage: {
+    marginTop: 10,
+    width: 100,
+    height: 100
+  }
+};
+

playground/src/containers/OptionsScreen.js

 const BUTTON_LEFT = 'buttonLeft';
 
 class OptionsScreen extends Component {
-
   static get navigationOptions() {
     return {
       topBar: {
         title: 'Static Title',
         textColor: 'black',
+        largeTitle: false,
+        hidden: false,
         textFontSize: 16,
         textFontFamily: 'HelveticaNeue-Italic'
       },
     this.onClickShowTopBar = this.onClickShowTopBar.bind(this);
     this.onClickHideTopBar = this.onClickHideTopBar.bind(this);
     this.onClickScrollViewScreen = this.onClickScrollViewScreen.bind(this);
+    this.onClickTopBarTransparent = this.onClickTopBarTransparent.bind(this);
+    this.onClickTopBarOpaque = this.onClickTopBarOpaque.bind(this);
+    this.onClickCustomTranstition = this.onClickCustomTranstition.bind(this);
   }
 
   render() {
         <Button title="Dynamic Options" onPress={this.onClickDynamicOptions} />
         <Button title="Show Top Bar" onPress={this.onClickShowTopBar} />
         <Button title="Hide Top Bar" onPress={this.onClickHideTopBar} />
+        <Button title="Top Bar Transparent" onPress={this.onClickTopBarTransparent} />
+        <Button title="Top Bar Opaque" onPress={this.onClickTopBarOpaque} />
         <Button title="scrollView Screen" onPress={this.onClickScrollViewScreen} />
+        <Button title="Custom Transition" onPress={this.onClickCustomTranstition} />
         <Button title="Show custom alert" onPress={this.onClickAlert} />
         <Button title="Show snackbar" onPress={this.onClickSnackbar} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       topBar: {
         title: 'Dynamic Title',
         textColor: '#00FFFF',
+        largeTitle: false,
         buttonColor: 'red',
         textFontSize: 20,
         textFontFamily: 'HelveticaNeue-CondensedBold'
     });
   }
 
+  onClickCustomTranstition() {
+    Navigation.push(this.props.containerId, {
+      name: 'navigation.playground.CustomTransitionOrigin'
+    });
+  }
+
+  onClickTopBarTransparent() {
+    Navigation.setOptions(this.props.containerId, {
+      topBar: {
+        transparent: true
+      }
+    });
+  }
+  onClickTopBarOpaque() {
+    Navigation.setOptions(this.props.containerId, {
+      topBar: {
+        transparent: false
+      }
+    });
+  }
   onClickShowTopBar() {
     Navigation.setOptions(this.props.containerId, {
       topBar: {

playground/src/containers/ScrollViewScreen.js

 
   render() {
     return (
-      <ScrollView testID="scrollView" contentContainerStyle={styles.contentContainer}>
-        <View>
-          <Button title="Toggle Top Bar Hide On Scroll" onPress={this.onClickToggleTopBarHideOnScroll} />
-        </View>
-      </ScrollView>
+      <View>
+        <ScrollView testID="scrollView" contentContainerStyle={styles.contentContainer}>
+          <View>
+            <Button title="Toggle Top Bar Hide On Scroll" onPress={this.onClickToggleTopBarHideOnScroll} />
+          </View>
+        </ScrollView>
+      </View>
     );
   }
 
 
 const styles = StyleSheet.create({
   contentContainer: {
-    paddingVertical: 20,
     alignItems: 'center',
-    height: 1000
+    height: 1200
   }
 });
 

playground/src/containers/WelcomeScreen.js

 const React = require('react');
 const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
-
 const Navigation = require('react-native-navigation');
 
 class WelcomeScreen extends Component {
+  static get navigationOptions() {
+    return {
+      topBar: {
+        largeTitle: false
+      }
+    };
+  }
   constructor(props) {
     super(props);
     this.onClickPush = this.onClickPush.bind(this);

playground/src/containers/index.js

 const OrientationSelectScreen = require('./OrientationSelectScreen');
 const OrientationDetectScreen = require('./OrientationDetectScreen');
 const ScrollViewScreen = require('./ScrollViewScreen');
+const CustomTransitionOrigin = require('./CustomTransitionOrigin');
+const CustomTransitionDestination = require('./CustomTransitionDestination');
 const CustomDialog = require('./CustomDialog');
 const BandHandlerScreen = require('./BackHandlerScreen');
 
 function registerContainers() {
+  Navigation.registerContainer(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
+  Navigation.registerContainer(`navigation.playground.CustomTransitionOrigin`, () => CustomTransitionOrigin);
   Navigation.registerContainer(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
   Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
   Navigation.registerContainer(`navigation.playground.ModalScreen`, () => ModalScreen);