[v2] Refactor peek and pop [ready to merge] (#3620)

* Refactor peek and pop

* Rollback some XCode stuff

* Added tests for touchablePreview event

* Also fixing searchbarcancelpressed event

docs/docs/animations.md

@@ -32,4 +32,36 @@ Navigation.push(this.props.componentId, {
     }
   }
 });
+```
+
+## Peek and Pop (iOS 11.4+)
+
+react-native-navigation supports the [Peek and pop](
+https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/#//apple_ref/doc/uid/TP40016543-CH1-SW3) feature in iOS 11.4 and newer.
+
+This works by passing a ref a componentent you would want to transform into a peek view. We have included a handly component to handle all the touches and ref for you.
+
+```jsx
+const handlePress ({ reactTag }) => {
+  Navigation.push(this.props.componentId, {
+    component {
+      name: 'previewed.screen',
+      options: {
+        preview: {
+          reactTag,
+        },
+      },
+    },
+  });
+};
+
+const Button = (
+  <Navigation.TouchablePreview
+    touchableComponent={TouchableHighlight}
+    onPress={handlePress}
+    onPressIn={handlePress}
+  >
+    <Text>My button</Text>
+  </Navigation.TouchablePreview>
+);
 ```

docs/docs/events.md

@@ -166,3 +166,19 @@ class MyComponent extends Component {
   }
 }
 ```
+
+## previewCompleted (iOS 11.4+ only)
+Called when preview peek is completed
+
+```js
+class MyComponent extends Component {
+  constructor(props) {
+    super(props);
+    Navigation.events().bindComponent(this);
+  }
+
+  previewCompleted({ previewComponentId }) {
+
+  }
+}
+```

docs/docs/styling.md

@@ -149,7 +149,7 @@ Navigation.mergeOptions(this.props.componentId, {
     interceptTouchOutside: true
   },
   preview: {
-    elementId: 'PreviewId',
+    reactTag: 0, // result from findNodeHandle(ref)
     width: 100,
     height: 100,
     commit: false,

lib/ios/RNNCommandsHandler.m

@@ -98,16 +98,26 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 	RNNRootViewController *newVc = (RNNRootViewController *)[_controllerFactory createLayoutAndSaveToStore:layout];
 	UIViewController *fromVC = [_store findComponentForId:componentId];
 	
-	if (newVc.options.preview.elementId) {
+	if ([newVc.options.preview.reactTag floatValue] > 0) {
 		UIViewController* vc = [_store findComponentForId:componentId];
 
 		if([vc isKindOfClass:[RNNRootViewController class]]) {
 			RNNRootViewController* rootVc = (RNNRootViewController*)vc;
 			rootVc.previewController = newVc;
-
-			RNNElementFinder* elementFinder = [[RNNElementFinder alloc] initWithFromVC:vc];
-			RNNElementView* elementView = [elementFinder findElementForId:newVc.options.preview.elementId];
-
+			rootVc.previewCallback = ^(UIViewController *vcc) {
+				RNNRootViewController* rvc  = (RNNRootViewController*)vcc;
+				[self->_eventEmitter sendOnPreviewCompleted:componentId previewComponentId:newVc.componentId];
+				if ([newVc.options.preview.commit floatValue] > 0) {
+					[CATransaction begin];
+					[CATransaction setCompletionBlock:^{
+						[self->_eventEmitter sendOnNavigationCommandCompletion:push params:@{@"componentId": componentId}];
+						completion();
+					}];
+					[rvc.navigationController pushViewController:newVc animated:YES];
+					[CATransaction commit];
+				}
+			};
+			
 			CGSize size = CGSizeMake(rootVc.view.frame.size.width, rootVc.view.frame.size.height);
 			
 			if (newVc.options.preview.width) {
@@ -122,7 +132,10 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 				newVc.preferredContentSize = size;
 			}
 
-			[rootVc registerForPreviewingWithDelegate:(id)rootVc sourceView:elementView];
+			RCTExecuteOnMainQueue(^{
+				UIView *view = [[ReactNativeNavigation getBridge].uiManager viewForReactTag:newVc.options.preview.reactTag];
+				[rootVc registerForPreviewingWithDelegate:(id)rootVc sourceView:view];
+			});
 		}
 	} else {
 		id animationDelegate = (newVc.options.animations.push.hasCustomAnimation || newVc.isCustomTransitioned) ? newVc : nil;

lib/ios/RNNEventEmitter.h

@@ -22,4 +22,6 @@
 
 -(void)sendOnSearchBarCancelPressed:(NSString *)componentId;
 
+-(void)sendOnPreviewCompleted:(NSString *)componentId previewComponentId:(NSString *)previewComponentId;
+
 @end

lib/ios/RNNEventEmitter.m

@@ -16,6 +16,7 @@ static NSString* const ComponentDidDisappear	= @"RNN.ComponentDidDisappear";
 static NSString* const NavigationButtonPressed	= @"RNN.NavigationButtonPressed";
 static NSString* const SearchBarUpdated 		= @"RNN.SearchBarUpdated";
 static NSString* const SearchBarCancelPressed 	= @"RNN.SearchBarCancelPressed";
+static NSString* const PreviewCompleted         = @"RNN.PreviewCompleted";
 
 -(NSArray<NSString *> *)supportedEvents {
 	return @[AppLaunched,
@@ -25,7 +26,8 @@ static NSString* const SearchBarCancelPressed 	= @"RNN.SearchBarCancelPressed";
 			 ComponentDidDisappear,
 			 NavigationButtonPressed,
 			 SearchBarUpdated,
-			 SearchBarCancelPressed];
+			 SearchBarCancelPressed,
+			 PreviewCompleted];
 }
 
 # pragma mark public
@@ -90,6 +92,13 @@ static NSString* const SearchBarCancelPressed 	= @"RNN.SearchBarCancelPressed";
 											}];
 }
 
+- (void)sendOnPreviewCompleted:(NSString *)componentId previewComponentId:(NSString *)previewComponentId {
+	[self send:PreviewCompleted body:@{
+											 @"componentId": componentId,
+											 @"previewComponentId": previewComponentId
+											 }];
+}
+
 - (void)addListener:(NSString *)eventName {
 	[super addListener:eventName];
 	if ([eventName isEqualToString:AppLaunched]) {

lib/ios/RNNPreviewOptions.h

@@ -2,7 +2,7 @@
 
 @interface RNNPreviewOptions : RNNOptions
 
-@property (nonatomic, strong) NSString* elementId;
+@property (nonatomic, strong) NSNumber* reactTag;
 @property (nonatomic, strong) NSNumber* width;
 @property (nonatomic, strong) NSNumber* height;
 @property (nonatomic, strong) NSNumber* commit;

lib/ios/RNNRootViewController.h

@@ -7,6 +7,7 @@
 #import "RNNAnimator.h"
 
 typedef void (^RNNReactViewReadyCompletionBlock)(void);
+typedef void (^PreviewCallback)(UIViewController *vc);
 
 @interface RNNRootViewController : UIViewController	<UIViewControllerPreviewingDelegate, UISearchResultsUpdating, UISearchBarDelegate, UINavigationControllerDelegate, UISplitViewControllerDelegate>
 
@@ -16,7 +17,7 @@ typedef void (^RNNReactViewReadyCompletionBlock)(void);
 @property (nonatomic) id<RNNRootViewCreator> creator;
 @property (nonatomic, strong) RNNAnimator* animator;
 @property (nonatomic, strong) UIViewController* previewController;
-
+@property (nonatomic, copy) PreviewCallback previewCallback;
 
 - (instancetype)initWithName:(NSString*)name
 				withOptions:(RNNNavigationOptions*)options

lib/ios/RNNRootViewController.m

@@ -22,6 +22,8 @@
 
 @implementation RNNRootViewController
 
+@synthesize previewCallback;
+
 -(instancetype)initWithName:(NSString*)name
 				withOptions:(RNNNavigationOptions*)options
 			withComponentId:(NSString*)componentId
@@ -286,28 +288,13 @@
 }
 
 - (UIViewController *)previewingContext:(id<UIViewControllerPreviewing>)previewingContext viewControllerForLocation:(CGPoint)location{
-	if (self.previewController) {
-//		RNNRootViewController * vc = (RNNRootViewController*) self.previewController;
-//		[_eventEmitter sendOnNavigationEvent:@"previewContext" params:@{
-//																		@"previewComponentId": vc.componentId,
-//																		@"componentId": self.componentId
-//																		}];
-	}
 	return self.previewController;
 }
 
 
 - (void)previewingContext:(id<UIViewControllerPreviewing>)previewingContext commitViewController:(UIViewController *)viewControllerToCommit {
-	RNNRootViewController * vc = (RNNRootViewController*) self.previewController;
-//	NSDictionary * params = @{
-//							  @"previewComponentId": vc.componentId,
-//							  @"componentId": self.componentId
-//							  };
-	if (vc.options.preview.commit) {
-//		[_eventEmitter sendOnNavigationEvent:@"previewCommit" params:params];
-		[self.navigationController pushViewController:vc animated:false];
-	} else {
-//		[_eventEmitter sendOnNavigationEvent:@"previewDismissed" params:params];
+	if (self.previewCallback) {
+		self.previewCallback(self);
 	}
 }
 

lib/ios/ReactNativeNavigation.h

@@ -1,6 +1,7 @@
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
 #import <React/RCTBridge.h>
+#import <React/RCTUIManager.h>
 #import "RNNBridgeManagerDelegate.h"
 
 typedef UIViewController * (^RNNExternalViewCreator)(NSDictionary* props, RCTBridge* bridge);

lib/src/Navigation.ts

@@ -13,9 +13,11 @@ import { CommandsObserver } from './events/CommandsObserver';
 import { Constants } from './adapters/Constants';
 import { ComponentType } from 'react';
 import { ComponentEventsObserver } from './events/ComponentEventsObserver';
+import { TouchablePreview, Props as TouchablePreviewProps } from './adapters/TouchablePreview';
 
 export class Navigation {
   public readonly Element: React.ComponentType<{ elementId: any; resizeMode?: any; }>;
+  public readonly TouchablePreview: React.ComponentType<TouchablePreviewProps>;
   public readonly store: Store;
   private readonly nativeEventsReceiver: NativeEventsReceiver;
   private readonly uniqueIdProvider: UniqueIdProvider;
@@ -30,6 +32,7 @@ export class Navigation {
 
   constructor() {
     this.Element = Element;
+    this.TouchablePreview = TouchablePreview;
     this.store = new Store();
     this.nativeEventsReceiver = new NativeEventsReceiver();
     this.uniqueIdProvider = new UniqueIdProvider();

lib/src/adapters/NativeEventsReceiver.ts

@@ -5,7 +5,8 @@ import {
   ComponentDidDisappearEvent,
   NavigationButtonPressedEvent,
   SearchBarUpdatedEvent,
-  SearchBarCancelPressedEvent
+  SearchBarCancelPressedEvent,
+  PreviewCompletedEvent
 } from '../interfaces/ComponentEvents';
 import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
@@ -49,6 +50,10 @@ export class NativeEventsReceiver {
     return this.emitter.addListener('RNN.SearchBarCancelPressed', callback);
   }
 
+  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EventSubscription {
+    return this.emitter.addListener('RNN.PreviewCompleted', callback);
+  }
+
   public registerCommandCompletedListener(callback: (data: CommandCompletedEvent) => void): EventSubscription {
     return this.emitter.addListener('RNN.CommandCompleted', callback);
   }

lib/src/adapters/TouchablePreview.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {
+  View,
+  Platform,
+  findNodeHandle,
+  TouchableOpacity,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableWithoutFeedback,
+  GestureResponderEvent,
+  NativeTouchEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+
+// Polyfill GestureResponderEvent type with additional `force` property (iOS)
+interface NativeTouchEventWithForce extends NativeTouchEvent { force: number; }
+interface GestureResponderEventWithForce extends NativeSyntheticEvent<NativeTouchEventWithForce> {}
+
+export interface Props {
+  children: React.ReactNode;
+  touchableComponent?: TouchableHighlight | TouchableOpacity | TouchableNativeFeedback | TouchableWithoutFeedback | React.ReactNode;
+  onPress?: () => void;
+  onPressIn?: (reactTag?) => void;
+  onPeekIn?: () => void;
+  onPeekOut?: () => void;
+}
+
+const PREVIEW_DELAY = 350;
+const PREVIEW_MIN_FORCE = 0.1;
+const PREVIEW_TIMEOUT = 1250;
+
+export class TouchablePreview extends React.PureComponent<Props, any> {
+
+  static propTypes = {
+    children: PropTypes.node,
+    touchableComponent: PropTypes.func,
+    onPress: PropTypes.func,
+    onPressIn: PropTypes.func,
+    onPeekIn: PropTypes.func,
+    onPeekOut: PropTypes.func,
+  };
+
+  static defaultProps = {
+    touchableComponent: TouchableWithoutFeedback,
+  };
+
+  static peeking = false;
+
+  private ref: React.Component<any> | null = null;
+  private timeout: number | undefined;
+  private ts: number = 0;
+
+  onRef = (ref: React.Component<any>) => {
+    this.ref = ref;
+  }
+
+  onPress = () => {
+    const { onPress } = this.props;
+
+    if (typeof onPress !== 'function' || TouchablePreview.peeking) {
+      return;
+    }
+
+    return onPress();
+  }
+
+  onPressIn = () => {
+    if (Platform.OS === 'ios') {
+      const { onPressIn } = this.props;
+
+      if (!onPressIn) {
+        return;
+      }
+
+      const reactTag = findNodeHandle(this.ref);
+
+      return onPressIn({ reactTag });
+    }
+
+    // Other platforms don't support 3D Touch Preview API
+    return null;
+  }
+
+  onTouchStart = (event: GestureResponderEvent) => {
+    // Store a timstamp of the initial touch start
+    this.ts = event.nativeEvent.timestamp;
+  }
+
+  onTouchMove = (event: GestureResponderEventWithForce) => {
+    clearTimeout(this.timeout);
+    const { force, timestamp } = event.nativeEvent;
+    const diff = (timestamp - this.ts);
+
+    if (force > PREVIEW_MIN_FORCE && diff > PREVIEW_DELAY) {
+      TouchablePreview.peeking = true;
+
+      if (typeof this.props.onPeekIn === 'function') {
+        this.props.onPeekIn();
+      }
+    }
+
+    this.timeout = setTimeout(this.onTouchEnd, PREVIEW_TIMEOUT);
+  }
+
+  onTouchEnd = () => {
+    clearTimeout(this.timeout);
+    TouchablePreview.peeking = false;
+
+    if (typeof this.props.onPeekOut === 'function') {
+      this.props.onPeekOut();
+    }
+  }
+
+  render() {
+    const { children, touchableComponent, onPress, onPressIn, ...props } = this.props;
+
+    // Default to TouchableWithoutFeedback for iOS if set to TouchableNativeFeedback
+    const Touchable = (
+      Platform.OS === 'ios' && touchableComponent instanceof TouchableNativeFeedback
+        ? TouchableWithoutFeedback
+        : touchableComponent
+    ) as typeof TouchableWithoutFeedback;
+
+    // Wrap component with Touchable for handling platform touches
+    // and a single react View for detecting force and timing.
+    return (
+      <Touchable
+        ref={this.onRef}
+        onPress={this.onPress}
+        onPressIn={this.onPressIn}
+        {...props}
+      >
+        <View
+          onTouchStart={this.onTouchStart}
+          onTouchMove={this.onTouchMove as (event: GestureResponderEvent) => void}
+          onTouchEnd={this.onTouchEnd}
+        >
+          {children}
+        </View>
+      </Touchable>
+    );
+  }
+}

lib/src/events/ComponentEventsObserver.test.tsx

@@ -13,6 +13,7 @@ describe('ComponentEventsObserver', () => {
   const navigationButtonPressedFn = jest.fn();
   const searchBarUpdatedFn = jest.fn();
   const searchBarCancelPressedFn = jest.fn();
+  const previewCompletedFn = jest.fn();
   let subscription;
 
   class SimpleScreen extends React.Component<any, any> {
@@ -55,6 +56,10 @@ describe('ComponentEventsObserver', () => {
       searchBarCancelPressedFn(event);
     }
 
+    previewCompleted(event) {
+      previewCompletedFn(event);
+    }
+
     render() {
       return 'Hello';
     }
@@ -93,6 +98,10 @@ describe('ComponentEventsObserver', () => {
     expect(searchBarCancelPressedFn).toHaveBeenCalledTimes(1);
     expect(searchBarCancelPressedFn).toHaveBeenCalledWith({ componentId: 'myCompId' });
 
+    uut.notifyPreviewCompleted({ componentId: 'myCompId' });
+    expect(previewCompletedFn).toHaveBeenCalledTimes(1);
+    expect(previewCompletedFn).toHaveBeenCalledWith({ componentId: 'myCompId' });
+
     tree.unmount();
     expect(willUnmountFn).toHaveBeenCalledTimes(1);
   });
@@ -168,6 +177,7 @@ describe('ComponentEventsObserver', () => {
     expect(mockEventsReceiver.registerNavigationButtonPressedListener).not.toHaveBeenCalled();
     expect(mockEventsReceiver.registerSearchBarUpdatedListener).not.toHaveBeenCalled();
     expect(mockEventsReceiver.registerSearchBarCancelPressedListener).not.toHaveBeenCalled();
+    expect(mockEventsReceiver.registerPreviewCompletedListener).not.toHaveBeenCalled();
     uut.registerOnceForAllComponentEvents();
     uut.registerOnceForAllComponentEvents();
     uut.registerOnceForAllComponentEvents();
@@ -177,5 +187,6 @@ describe('ComponentEventsObserver', () => {
     expect(mockEventsReceiver.registerNavigationButtonPressedListener).toHaveBeenCalledTimes(1);
     expect(mockEventsReceiver.registerSearchBarUpdatedListener).toHaveBeenCalledTimes(1);
     expect(mockEventsReceiver.registerSearchBarCancelPressedListener).toHaveBeenCalledTimes(1);
+    expect(mockEventsReceiver.registerPreviewCompletedListener).toHaveBeenCalledTimes(1);
   });
 });

lib/src/events/ComponentEventsObserver.ts

@@ -6,7 +6,8 @@ import {
   NavigationButtonPressedEvent,
   SearchBarUpdatedEvent,
   SearchBarCancelPressedEvent,
-  ComponentEvent
+  ComponentEvent,
+  PreviewCompletedEvent
 } from '../interfaces/ComponentEvents';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
 
@@ -20,6 +21,7 @@ export class ComponentEventsObserver {
     this.notifyNavigationButtonPressed = this.notifyNavigationButtonPressed.bind(this);
     this.notifySearchBarUpdated = this.notifySearchBarUpdated.bind(this);
     this.notifySearchBarCancelPressed = this.notifySearchBarCancelPressed.bind(this);
+    this.notifyPreviewCompleted = this.notifyPreviewCompleted.bind(this);
   }
 
   public registerOnceForAllComponentEvents() {
@@ -30,6 +32,7 @@ export class ComponentEventsObserver {
     this.nativeEventsReceiver.registerNavigationButtonPressedListener(this.notifyNavigationButtonPressed);
     this.nativeEventsReceiver.registerSearchBarUpdatedListener(this.notifySearchBarUpdated);
     this.nativeEventsReceiver.registerSearchBarCancelPressedListener(this.notifySearchBarCancelPressed);
+    this.nativeEventsReceiver.registerPreviewCompletedListener(this.notifyPreviewCompleted);
   }
 
   public bindComponent(component: React.Component<any>): EventSubscription {
@@ -70,6 +73,10 @@ export class ComponentEventsObserver {
     this.triggerOnAllListenersByComponentId(event, 'searchBarCancelPressed');
   }
 
+  notifyPreviewCompleted(event: PreviewCompletedEvent) {
+    this.triggerOnAllListenersByComponentId(event, 'previewCompleted');
+  }
+
   private triggerOnAllListenersByComponentId(event: ComponentEvent, method: string) {
     _.forEach(this.listeners[event.componentId], (component) => {
       if (_.isObject(component) && _.isFunction(component[method])) {

lib/src/events/EventsRegistry.test.tsx

@@ -74,6 +74,13 @@ describe('EventsRegistry', () => {
     expect(mockNativeEventsReceiver.registerSearchBarCancelPressedListener).toHaveBeenCalledWith(cb);
   });
 
+  it('delegates previewCompleted to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerPreviewCompletedListener(cb);
+    expect(mockNativeEventsReceiver.registerPreviewCompletedListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerPreviewCompletedListener).toHaveBeenCalledWith(cb);
+  });
+
   it('delegates registerCommandListener to commandObserver', () => {
     const cb = jest.fn();
     const result = uut.registerCommandListener(cb);

lib/src/events/EventsRegistry.ts

@@ -7,7 +7,8 @@ import {
   ComponentDidDisappearEvent,
   NavigationButtonPressedEvent,
   SearchBarUpdatedEvent,
-  SearchBarCancelPressedEvent
+  SearchBarCancelPressedEvent,
+  PreviewCompletedEvent
 } from '../interfaces/ComponentEvents';
 import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
@@ -46,6 +47,10 @@ export class EventsRegistry {
     return this.nativeEventsReceiver.registerSearchBarCancelPressedListener(callback);
   }
 
+  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerPreviewCompletedListener(callback);
+  }
+
   public registerCommandListener(callback: (name: string, params: any) => void): EventSubscription {
     return this.commandsObserver.register(callback);
   }

lib/src/interfaces/ComponentEvents.ts

@@ -22,3 +22,8 @@ export interface SearchBarUpdatedEvent extends ComponentEvent {
 export interface SearchBarCancelPressedEvent extends ComponentEvent {
   componentName?: string;
 }
+
+export interface PreviewCompletedEvent extends ComponentEvent {
+  componentName?: string;
+  previewComponentId?: string;
+}

playground/src/screens/Button.js

@@ -2,6 +2,7 @@ const React = require('react');
 const { Component } = require('react');
 const PropTypes = require('prop-types');
 const { Platform, ColorPropType, StyleSheet, TouchableNativeFeedback, TouchableOpacity, View, Text } = require('react-native');
+const { Navigation } = require('react-native-navigation');
 
 class Button extends Component {
 
@@ -47,8 +48,13 @@ class Button extends Component {
 
     const formattedTitle =
       Platform.OS === 'android' ? title.toUpperCase() : title;
-    const Touchable =
+    let Touchable =
       Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+    if (typeof onPressIn === 'function') {
+      Touchable = Navigation.TouchablePreview;
+    }
+
     return (
       <Touchable
         accessibilityComponentType='button'

playground/src/screens/PushedScreen.js

@@ -79,11 +79,7 @@ class PushedScreen extends Component {
         <Text testID={testIDs.PUSHED_SCREEN_HEADER} style={styles.h1}>{`Pushed Screen`}</Text>
         <Text style={styles.h2}>{`Stack Position: ${stackPosition}`}</Text>
         <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
-        {Platform.OS === 'ios' && (
-          <Navigation.Element elementId='PreviewElement'>
-            <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />
-          </Navigation.Element>
-        )}
+        {Platform.OS === 'ios' && <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />}
         <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
         <Button title='Pop Previous' testID={testIDs.POP_PREVIOUS_BUTTON} onPress={this.onClickPopPrevious} />
         <Button title='Pop To Root' testID={testIDs.POP_TO_ROOT} onPress={this.onClickPopToRoot} />
@@ -95,7 +91,7 @@ class PushedScreen extends Component {
     );
   }
 
-  onClickShowPreview = async () => {
+  onClickShowPreview = async ({ reactTag }) => {
     await Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.PushedScreen',
@@ -115,7 +111,7 @@ class PushedScreen extends Component {
             }
           },
           preview: {
-            elementId: 'PreviewElement',
+            reactTag,
             height: 400,
             commit: true,
             actions: [{

playground/src/screens/WelcomeScreen.js

@@ -41,11 +41,7 @@ class WelcomeScreen extends Component {
           <Button title='Push Lifecycle Screen' testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
           <Button title='Static Lifecycle Events' testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
           <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
-          {Platform.OS === 'ios' && (
-            <Navigation.Element elementId='PreviewElement'>
-              <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPressIn={this.onClickShowPreview} title='Push Preview' />
-            </Navigation.Element>
-          )}
+          {Platform.OS === 'ios' && <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />}
           <Button title='Push Options Screen' testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
           <Button title='Push External Component' testID={testIDs.PUSH_EXTERNAL_COMPONENT_BUTTON} onPress={this.onClickPushExternalComponent} />
           {Platform.OS === 'android' && <Button title='Push Top Tabs screen' testID={testIDs.PUSH_TOP_TABS_BUTTON} onPress={this.onClickPushTopTabsScreen} />}
@@ -334,7 +330,7 @@ class WelcomeScreen extends Component {
     undefined();
   }
 
-  onClickShowPreview = async () => {
+  onClickShowPreview = async ({ reactTag }) => {
     await Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.PushedScreen',
@@ -344,8 +340,8 @@ class WelcomeScreen extends Component {
               enable: false
             }
           },
-          preview: {
-            elementId: 'PreviewElement',
+          preview: reactTag ? {
+            reactTag,
             height: 300,
             commit: true,
             actions: [{
@@ -360,7 +356,7 @@ class WelcomeScreen extends Component {
                 style: 'destructive'
               }]
             }]
-          }
+          } : undefined,
         }
       }
     });