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

This reverts commit 4c519acae8.

docs/docs/animations.md

@@ -32,36 +32,4 @@ 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,19 +166,3 @@ 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

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

lib/ios/RNNCommandsHandler.m

@@ -98,26 +98,16 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 	RNNRootViewController *newVc = (RNNRootViewController *)[_controllerFactory createLayoutAndSaveToStore:layout];
 	UIViewController *fromVC = [_store findComponentForId:componentId];
 	
-	if ([newVc.options.preview.reactTag floatValue] > 0) {
+	if (newVc.options.preview.elementId) {
 		UIViewController* vc = [_store findComponentForId:componentId];
 
 		if([vc isKindOfClass:[RNNRootViewController class]]) {
 			RNNRootViewController* rootVc = (RNNRootViewController*)vc;
 			rootVc.previewController = newVc;
-			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];
-				}
-			};
-			
+
+			RNNElementFinder* elementFinder = [[RNNElementFinder alloc] initWithFromVC:vc];
+			RNNElementView* elementView = [elementFinder findElementForId:newVc.options.preview.elementId];
+
 			CGSize size = CGSizeMake(rootVc.view.frame.size.width, rootVc.view.frame.size.height);
 			
 			if (newVc.options.preview.width) {
@@ -132,10 +122,7 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 				newVc.preferredContentSize = size;
 			}
 
-			RCTExecuteOnMainQueue(^{
-				UIView *view = [[ReactNativeNavigation getBridge].uiManager viewForReactTag:newVc.options.preview.reactTag];
-				[rootVc registerForPreviewingWithDelegate:(id)rootVc sourceView:view];
-			});
+			[rootVc registerForPreviewingWithDelegate:(id)rootVc sourceView:elementView];
 		}
 	} else {
 		id animationDelegate = (newVc.options.animations.push.hasCustomAnimation || newVc.isCustomTransitioned) ? newVc : nil;

lib/ios/RNNEventEmitter.h

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

lib/ios/RNNEventEmitter.m

@@ -16,7 +16,6 @@ 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,
@@ -26,8 +25,7 @@ static NSString* const PreviewCompleted         = @"RNN.PreviewCompleted";
 			 ComponentDidDisappear,
 			 NavigationButtonPressed,
 			 SearchBarUpdated,
-			 SearchBarCancelPressed,
-			 PreviewCompleted];
+			 SearchBarCancelPressed];
 }
 
 # pragma mark public
@@ -92,13 +90,6 @@ static NSString* const PreviewCompleted         = @"RNN.PreviewCompleted";
 											}];
 }
 
-- (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) NSNumber* reactTag;
+@property (nonatomic, strong) NSString* elementId;
 @property (nonatomic, strong) NSNumber* width;
 @property (nonatomic, strong) NSNumber* height;
 @property (nonatomic, strong) NSNumber* commit;

lib/ios/RNNRootViewController.h

@@ -7,7 +7,6 @@
 #import "RNNAnimator.h"
 
 typedef void (^RNNReactViewReadyCompletionBlock)(void);
-typedef void (^PreviewCallback)(UIViewController *vc);
 
 @interface RNNRootViewController : UIViewController	<UIViewControllerPreviewingDelegate, UISearchResultsUpdating, UISearchBarDelegate, UINavigationControllerDelegate, UISplitViewControllerDelegate>
 
@@ -17,7 +16,7 @@ typedef void (^PreviewCallback)(UIViewController *vc);
 @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,8 +22,6 @@
 
 @implementation RNNRootViewController
 
-@synthesize previewCallback;
-
 -(instancetype)initWithName:(NSString*)name
 				withOptions:(RNNNavigationOptions*)options
 			withComponentId:(NSString*)componentId
@@ -288,13 +286,28 @@
 }
 
 - (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 {
-	if (self.previewCallback) {
-		self.previewCallback(self);
+	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];
 	}
 }
 

lib/ios/ReactNativeNavigation.h

@@ -1,7 +1,6 @@
 #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,13 +13,9 @@ import { CommandsObserver } from './events/CommandsObserver';
 import { Constants } from './adapters/Constants';
 import { ComponentType } from 'react';
 import { ComponentEventsObserver } from './events/ComponentEventsObserver';
-import { LayoutRoot, Layout } from './interfaces/Layout';
-import { Options } from './interfaces/Options';
-// 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;
@@ -34,7 +30,6 @@ 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,8 +5,7 @@ import {
   ComponentDidDisappearEvent,
   NavigationButtonPressedEvent,
   SearchBarUpdatedEvent,
-  SearchBarCancelPressedEvent,
-  PreviewCompletedEvent
+  SearchBarCancelPressedEvent
 } from '../interfaces/ComponentEvents';
 import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
@@ -50,10 +49,6 @@ 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

@@ -1,144 +0,0 @@
-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,7 +13,6 @@ 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> {
@@ -56,10 +55,6 @@ describe('ComponentEventsObserver', () => {
       searchBarCancelPressedFn(event);
     }
 
-    previewCompleted(event) {
-      previewCompletedFn(event);
-    }
-
     render() {
       return 'Hello';
     }
@@ -98,10 +93,6 @@ 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);
   });
@@ -177,7 +168,6 @@ 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();
@@ -187,6 +177,5 @@ 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,8 +6,7 @@ import {
   NavigationButtonPressedEvent,
   SearchBarUpdatedEvent,
   SearchBarCancelPressedEvent,
-  ComponentEvent,
-  PreviewCompletedEvent
+  ComponentEvent
 } from '../interfaces/ComponentEvents';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
 
@@ -21,7 +20,6 @@ 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() {
@@ -32,7 +30,6 @@ 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 {
@@ -73,10 +70,6 @@ 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,13 +74,6 @@ 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,8 +7,7 @@ import {
   ComponentDidDisappearEvent,
   NavigationButtonPressedEvent,
   SearchBarUpdatedEvent,
-  SearchBarCancelPressedEvent,
-  PreviewCompletedEvent
+  SearchBarCancelPressedEvent
 } from '../interfaces/ComponentEvents';
 import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
@@ -47,10 +46,6 @@ 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,8 +22,3 @@ 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,7 +2,6 @@ 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 {
 
@@ -48,13 +47,8 @@ class Button extends Component {
 
     const formattedTitle =
       Platform.OS === 'android' ? title.toUpperCase() : title;
-    let Touchable =
+    const Touchable =
       Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
-
-    if (typeof onPressIn === 'function') {
-      Touchable = Navigation.TouchablePreview;
-    }
-
     return (
       <Touchable
         accessibilityComponentType='button'

playground/src/screens/PushedScreen.js

@@ -79,7 +79,11 @@ 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' && <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />}
+        {Platform.OS === 'ios' && (
+          <Navigation.Element elementId='PreviewElement'>
+            <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />
+          </Navigation.Element>
+        )}
         <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} />
@@ -91,7 +95,7 @@ class PushedScreen extends Component {
     );
   }
 
-  onClickShowPreview = async ({ reactTag }) => {
+  onClickShowPreview = async () => {
     await Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.PushedScreen',
@@ -111,7 +115,7 @@ class PushedScreen extends Component {
             }
           },
           preview: {
-            reactTag,
+            elementId: 'PreviewElement',
             height: 400,
             commit: true,
             actions: [{

playground/src/screens/WelcomeScreen.js

@@ -41,7 +41,11 @@ 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' && <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />}
+          {Platform.OS === 'ios' && (
+            <Navigation.Element elementId='PreviewElement'>
+              <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPressIn={this.onClickShowPreview} title='Push Preview' />
+            </Navigation.Element>
+          )}
           <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} />}
@@ -330,7 +334,7 @@ class WelcomeScreen extends Component {
     undefined();
   }
 
-  onClickShowPreview = async ({ reactTag }) => {
+  onClickShowPreview = async () => {
     await Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.PushedScreen',
@@ -340,8 +344,8 @@ class WelcomeScreen extends Component {
               enable: false
             }
           },
-          preview: reactTag ? {
-            reactTag,
+          preview: {
+            elementId: 'PreviewElement',
             height: 300,
             commit: true,
             actions: [{
@@ -356,7 +360,7 @@ class WelcomeScreen extends Component {
                 style: 'destructive'
               }]
             }]
-          } : undefined,
+          }
         }
       }
     });