[v2] Preview peek and pop (iOS) (#3273)

* V2: Peek and pop

* Add event when preview is dismissed in non commit mode

* tslint

* Refactor playground. Document preview api

* Added width prop

* Implement hybrid push/preview button

* Fixing small linting errors

docs/README.md

@@ -61,7 +61,7 @@ v2 is written in Test Driven Development. We have a test for every feature inclu
 | sideMenu             |    ✅  |    ✅ |
 | tabs            |    ✅  |    ✅ |
 | External Component       |   ✅  |   ✅ |
-| splitView           |   [Contribute](/docs/WorkingLocally.md)   |   [Contribute](/docs/WorkingLocally.md) |
+| splitView           |   ✅   |   [Contribute](/docs/WorkingLocally.md) |
 
 ### Screen API
 
@@ -79,6 +79,7 @@ v2 is written in Test Driven Development. We have a test for every feature inclu
 | customTransition            |✅|✅|
 | Screen Visibility        | ✅     |✅|
 | async commands (await push)     |  ✅        |✅   |
+| preview              |   ✅       |	:x:		|
 
 ### Navigation Options
 
@@ -212,4 +213,4 @@ Note:  v1 properties with names beginning with 'navBar' are replaced in v2 with
 | switchToTab         |    ✅    |       ✅   |✅|
 | topBar react component        |   ✅     |✅|✅|
 |Shared Element Transition|     :x:  |✅| [Contribute](/docs/WorkingLocally.md)|
-| splitViewScreen       |     :x:  |    [Contribute](/docs/WorkingLocally.md)      | [Contribute](/docs/WorkingLocally.md)|
+| splitViewScreen       |     :x:  |    ✅      | [Contribute](/docs/WorkingLocally.md)|

docs/docs/styling.md

@@ -132,6 +132,18 @@ Navigation.mergeOptions(this.props.componentId, {
   },
   overlay: {
     interceptTouchOutside: true
+  },
+  preview: {
+    elementId: 'PreviewId',
+    width: 100,
+    height: 100,
+    commit: false,
+    actions: [{
+      id: 'ActionId1',
+      title: 'Action title',
+      style: 'selected', // default, selected, destructive,
+      actions: [/* ... */]
+    }]
   }  
 }
 ```

lib/ios/RNNCommandsHandler.m

@@ -5,11 +5,14 @@
 #import "RNNNavigationOptions.h"
 #import "RNNRootViewController.h"
 #import "RNNSplitViewController.h"
+#import "RNNElementFinder.h"
 #import "React/RCTUIManager.h"
 
+
 static NSString* const setRoot	= @"setRoot";
 static NSString* const setStackRoot	= @"setStackRoot";
 static NSString* const push	= @"push";
+static NSString* const preview	= @"preview";
 static NSString* const pop	= @"pop";
 static NSString* const popTo	= @"popTo";
 static NSString* const popToRoot	= @"popToRoot";
@@ -93,11 +96,41 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 
 -(void)push:(NSString*)componentId layout:(NSDictionary*)layout completion:(RNNTransitionCompletionBlock)completion rejection:(RCTPromiseRejectBlock)rejection {
 	[self assertReady];
-	[_eventEmitter sendOnNavigationCommand:push params:@{@"componentId": componentId}];
-	UIViewController<RNNRootViewProtocol> *newVc = [_controllerFactory createLayoutAndSaveToStore:layout];
-	[_navigationStackManager push:newVc onTop:componentId completion:^{
-		completion();
-	} rejection:rejection];
+
+	UIViewController<RNNRootViewProtocol, UIViewControllerPreviewingDelegate> *newVc = [_controllerFactory createLayoutAndSaveToStore:layout];
+
+	if (newVc.options.preview.elementId) {
+		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];
+
+			CGSize size = CGSizeMake(rootVc.view.frame.size.width, rootVc.view.frame.size.height);
+			
+			if (newVc.options.preview.width) {
+				size.width = [newVc.options.preview.width floatValue];
+			}
+
+			if (newVc.options.preview.height) {
+				size.height = [newVc.options.preview.height floatValue];
+			}
+
+			if (newVc.options.preview.width || newVc.options.preview.height) {
+				newVc.preferredContentSize = size;
+			}
+
+			[rootVc registerForPreviewingWithDelegate:(id)rootVc sourceView:elementView];
+		}
+	} else {
+		[_eventEmitter sendOnNavigationCommand:push params:@{@"componentId": componentId}];
+		[_navigationStackManager push:newVc onTop:componentId completion:^{
+			completion();
+		} rejection:rejection];
+	}
 }
 
 -(void)setStackRoot:(NSString*)componentId layout:(NSDictionary*)layout completion:(RNNTransitionCompletionBlock)completion rejection:(RCTPromiseRejectBlock)rejection {

lib/ios/RNNControllerFactory.h

@@ -13,7 +13,7 @@
 						  eventEmitter:(RNNEventEmitter*)eventEmitter
 							 andBridge:(RCTBridge*)bridge;
 
--(UIViewController<RNNRootViewProtocol> *)createLayoutAndSaveToStore:(NSDictionary*)layout;
+-(UIViewController<RNNRootViewProtocol, UIViewControllerPreviewingDelegate> *)createLayoutAndSaveToStore:(NSDictionary*)layout;
 
 - (UIViewController<RNNRootViewProtocol> *)createOverlay:(NSDictionary*)layout;
 

lib/ios/RNNElementFinder.h

@@ -4,6 +4,7 @@
 @interface RNNElementFinder : NSObject
 
 - (instancetype)initWithToVC:(UIViewController *)toVC andfromVC:(UIViewController *)fromVC;
+- (instancetype)initWithFromVC:(UIViewController *)fromVC;
 
 - (RNNElementView *)findElementForId:(NSString *)elementId;
 

lib/ios/RNNElementFinder.m

@@ -18,6 +18,14 @@
 	return self;
 }
 
+- (instancetype)initWithFromVC:(UIViewController *)fromVC {
+	self = [super init];
+
+	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]){

lib/ios/RNNNavigationOptions.h

@@ -9,6 +9,7 @@
 #import "RNNAnimationOptions.h"
 #import "RNNTransitionsOptions.h"
 #import "RNNStatusBarOptions.h"
+#import "RNNPreviewOptions.h"
 #import "RNNLayoutOptions.h"
 
 extern const NSInteger BLUR_TOPBAR_TAG;
@@ -26,6 +27,7 @@ extern const NSInteger TOP_BAR_TRANSPARENT_TAG;
 @property (nonatomic, strong) RNNAnimationOptions* customTransition;
 @property (nonatomic, strong) RNNTransitionsOptions* animations;
 @property (nonatomic, strong) RNNStatusBarOptions* statusBar;
+@property (nonatomic, strong) RNNPreviewOptions* preview;
 @property (nonatomic, strong) RNNLayoutOptions* layout;
 
 @property (nonatomic, strong) NSMutableDictionary* originalTopBarImages;

lib/ios/RNNPreviewOptions.h

@@ -0,0 +1,11 @@
+#import "RNNOptions.h"
+
+@interface RNNPreviewOptions : RNNOptions
+
+@property (nonatomic, strong) NSString* elementId;
+@property (nonatomic, strong) NSNumber* width;
+@property (nonatomic, strong) NSNumber* height;
+@property (nonatomic, strong) NSNumber* commit;
+@property (nonatomic, strong) NSArray* actions;
+
+@end

lib/ios/RNNPreviewOptions.m

@@ -0,0 +1,12 @@
+#import "RNNPreviewOptions.h"
+
+@implementation RNNPreviewOptions
+
+- (instancetype)initWithDict:(NSDictionary *)dict {
+
+	self = [super initWithDict:dict];
+
+	return self;
+}
+
+@end

lib/ios/RNNRootViewController.h

@@ -9,7 +9,7 @@
 #import "RNNTopTabsViewController.h"
 #import "RNNRootViewProtocol.h"
 
-@interface RNNRootViewController : UIViewController	<RNNRootViewProtocol>
+@interface RNNRootViewController : UIViewController	<RNNRootViewProtocol, UIViewControllerPreviewingDelegate>
 
 @property (nonatomic, strong) RNNNavigationOptions* options;
 @property (nonatomic, strong) RNNEventEmitter *eventEmitter;
@@ -17,6 +17,8 @@
 @property (nonatomic, strong) RNNTopTabsViewController* topTabsViewController;
 @property (nonatomic) id<RNNRootViewCreator> creator;
 @property (nonatomic, strong) RNNAnimator* animator;
+@property (nonatomic, strong) UIViewController* previewController;
+
 
 -(instancetype)initWithName:(NSString*)name
 				withOptions:(RNNNavigationOptions*)options

lib/ios/RNNRootViewController.m

@@ -238,6 +238,70 @@
 	}
 }
 
+- (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];
+	}
+}
+
+- (void)onActionPress:(NSString *)id {
+	[_eventEmitter sendOnNavigationButtonPressed:self.componentId buttonId:id];
+}
+
+- (UIPreviewAction *) convertAction:(NSDictionary *)action {
+	NSString *actionId = action[@"id"];
+	NSString *actionTitle = action[@"title"];
+	UIPreviewActionStyle actionStyle = UIPreviewActionStyleDefault;
+	if ([action[@"style"] isEqualToString:@"selected"]) {
+	   	actionStyle = UIPreviewActionStyleSelected;
+	} else if ([action[@"style"] isEqualToString:@"destructive"]) {
+		actionStyle = UIPreviewActionStyleDestructive;
+	}
+	
+	return [UIPreviewAction actionWithTitle:actionTitle style:actionStyle handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) {
+		[self onActionPress:actionId];
+	}];
+}
+
+- (NSArray<id<UIPreviewActionItem>> *)previewActionItems {
+	NSMutableArray *actions = [[NSMutableArray alloc] init];
+	for (NSDictionary *previewAction in self.options.preview.actions) {
+		UIPreviewAction *action = [self convertAction:previewAction];
+		NSDictionary *actionActions = previewAction[@"actions"];
+	    if (actionActions.count > 0) {
+			NSMutableArray *group = [[NSMutableArray alloc] init];
+	     	for (NSDictionary *previewGroupAction in actionActions) {
+	        	[group addObject:[self convertAction:previewGroupAction]];
+	      	}
+	      	UIPreviewActionGroup *actionGroup = [UIPreviewActionGroup actionGroupWithTitle:action.title style:UIPreviewActionStyleDefault actions:group];
+	      	[actions addObject:actionGroup];
+		} else {
+	    	[actions addObject:action];
+	    }
+	}
+	return actions;
+}
+
 /**
  *	fix for #877, #878
  */

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -156,9 +156,9 @@
 		A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */; };
 		A7626C011FC5796200492FB8 /* RNNBottomTabsOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = A7626C001FC5796200492FB8 /* RNNBottomTabsOptions.m */; };
 		E33AC20020B5BA0B0090DB8A /* RNNSplitViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = E33AC1FF20B5BA0B0090DB8A /* RNNSplitViewController.m */; };
-		E33AC20420B5C3890090DB8A /* RNNStatusBarOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = E33AC20220B5C3880090DB8A /* RNNStatusBarOptions.h */; };
 		E33AC20520B5C3890090DB8A /* RNNStatusBarOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = E33AC20320B5C3890090DB8A /* RNNStatusBarOptions.m */; };
 		E33AC20820B5C4F90090DB8A /* RNNSplitViewOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = E33AC20720B5C4F90090DB8A /* RNNSplitViewOptions.m */; };
+		E3458D3E20BD9CE40023149B /* RNNPreviewOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = E3458D3D20BD9CE40023149B /* RNNPreviewOptions.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 */; };
@@ -369,6 +369,8 @@
 		E33AC20320B5C3890090DB8A /* RNNStatusBarOptions.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNStatusBarOptions.m; sourceTree = "<group>"; };
 		E33AC20620B5C49E0090DB8A /* RNNSplitViewOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSplitViewOptions.h; sourceTree = "<group>"; };
 		E33AC20720B5C4F90090DB8A /* RNNSplitViewOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSplitViewOptions.m; sourceTree = "<group>"; };
+		E3458D3C20BD9CA10023149B /* RNNPreviewOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNPreviewOptions.h; sourceTree = "<group>"; };
+		E3458D3D20BD9CE40023149B /* RNNPreviewOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNPreviewOptions.m; sourceTree = "<group>"; };
 		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>"; };
@@ -557,6 +559,8 @@
 				50415CB920553B8E00BB682E /* RNNScreenTransition.m */,
 				E33AC20620B5C49E0090DB8A /* RNNSplitViewOptions.h */,
 				E33AC20720B5C4F90090DB8A /* RNNSplitViewOptions.m */,
+				E3458D3C20BD9CA10023149B /* RNNPreviewOptions.h */,
+				E3458D3D20BD9CE40023149B /* RNNPreviewOptions.m */,
 			);
 			name = Options;
 			sourceTree = "<group>";
@@ -1025,6 +1029,7 @@
 				50F5DFC61F407AA0001A00BC /* RNNNavigationController.m in Sources */,
 				21B85E5D1F44480200B314B5 /* RNNNavigationButtons.m in Sources */,
 				E8E518371F83B94A000467AC /* RNNViewLocation.m in Sources */,
+				E3458D3E20BD9CE40023149B /* RNNPreviewOptions.m in Sources */,
 				263905C91E4C6F440023D7D3 /* SidebarFlipboardAnimation.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

playground/src/screens/Button.js

@@ -0,0 +1,112 @@
+const React = require('react');
+const { Component } = require('react');
+const PropTypes = require('prop-types');
+const { Platform, ColorPropType, StyleSheet, TouchableNativeFeedback, TouchableOpacity, View, Text } = require('react-native');
+
+class Button extends Component {
+
+    static propTypes = {
+    title: PropTypes.string.isRequired,
+    accessibilityLabel: PropTypes.string,
+    color: ColorPropType,
+    disabled: PropTypes.bool,
+    hasTVPreferredFocus: PropTypes.bool,
+    onPress: PropTypes.func,
+    onPressIn: PropTypes.func,
+    testID: PropTypes.string,
+  };
+
+  render() {
+    const {
+      accessibilityLabel,
+      color,
+      onPress,
+      onPressIn,
+      title,
+      hasTVPreferredFocus,
+      disabled,
+      testID,
+    } = this.props;
+    const buttonStyles = [styles.button];
+    const textStyles = [styles.text];
+
+    if (color) {
+      if (Platform.OS === 'ios') {
+        textStyles.push({color: color});
+      } else {
+        buttonStyles.push({backgroundColor: color});
+      }
+    }
+
+    const accessibilityTraits = ['button'];
+    if (disabled) {
+      buttonStyles.push(styles.buttonDisabled);
+      textStyles.push(styles.textDisabled);
+      accessibilityTraits.push('disabled');
+    }
+
+    const formattedTitle =
+      Platform.OS === 'android' ? title.toUpperCase() : title;
+    const Touchable =
+      Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+    return (
+      <Touchable
+        accessibilityComponentType='button'
+        accessibilityLabel={accessibilityLabel}
+        accessibilityTraits={accessibilityTraits}
+        hasTVPreferredFocus={hasTVPreferredFocus}
+        testID={testID}
+        disabled={disabled}
+        onPress={onPress}
+        onPressIn={onPressIn}>
+        <View style={buttonStyles}>
+          <Text style={textStyles} disabled={disabled}>
+            {formattedTitle}
+          </Text>
+        </View>
+      </Touchable>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: Platform.select({
+    ios: {},
+    android: {
+      elevation: 4,
+      backgroundColor: '#2196F3',
+      borderRadius: 2,
+    },
+  }),
+  text: Platform.select({
+    ios: {
+      color: '#007AFF',
+      textAlign: 'center',
+      padding: 8,
+      fontSize: 18,
+    },
+    android: {
+      color: 'white',
+      textAlign: 'center',
+      padding: 8,
+      fontWeight: '500',
+    },
+  }),
+  buttonDisabled: Platform.select({
+    ios: {},
+    android: {
+      elevation: 0,
+      backgroundColor: '#dfdfdf',
+    },
+  }),
+  textDisabled: Platform.select({
+    ios: {
+      color: '#cdcdcd',
+    },
+    android: {
+      color: '#a1a1a1',
+    },
+  }),
+});
+
+module.exports = Button;

playground/src/screens/PushedScreen.js

@@ -3,9 +3,10 @@ const _ = require('lodash');
 const React = require('react');
 const { Component } = require('react');
 
-const { View, Text, Button } = require('react-native');
+const { View, Text, Platform } = require('react-native');
 
 const { Navigation } = require('react-native-navigation');
+const Button = require('./Button');
 const testIDs = require('../testIDs');
 
 class PushedScreen extends Component {
@@ -29,6 +30,34 @@ class PushedScreen extends Component {
     this.onClickPopToFirstPosition = this.onClickPopToFirstPosition.bind(this);
     this.onClickPopToRoot = this.onClickPopToRoot.bind(this);
     this.onClickSetStackRoot = this.onClickSetStackRoot.bind(this);
+    this.state = { disabled: false };
+  }
+
+  listeners = [];
+
+  componentWillMount() {
+    this.listeners.push(
+      Navigation.events().registerNativeEventListener((name, params) => {
+        if (name === 'previewContext') {
+          const { previewComponentId } = params;
+          this.setState({ previewComponentId });
+        }
+      }),
+      Navigation.events().registerComponentDidAppearListener((componentId, componentName) => {
+        if (this.state.previewComponentId === componentId) {
+          this.setState({ disabled: true });
+        }
+      }),
+      Navigation.events().registerComponentDidDisappearListener((componentId, componentName) => {
+        if (this.state.previewComponentId === componentId) {
+          this.setState({ disabled: false });
+        }
+      })
+    );
+  }
+
+  componentWillUnmount() {
+    this.listeners.forEach(listener => listener.remove && listener.remove());
   }
 
   render() {
@@ -38,6 +67,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' && (
+            <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} />
@@ -48,7 +82,44 @@ class PushedScreen extends Component {
     );
   }
 
+  onClickShowPreview = async () => {
+    await Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.PushedScreen',
+        passProps: {
+          stackPosition: this.getStackPosition() + 1,
+          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
+        },
+        options: {
+          topBar: {
+            title: {
+              text: `Pushed ${this.getStackPosition() + 1}`
+            }
+          },
+          animations: {
+            push: {
+              enable: false
+            }
+          },
+          preview: {
+            elementId: 'PreviewElement',
+            height: 400,
+            commit: true,
+            actions: [{
+              id: 'action-cancel',
+              title: 'Cancel'
+            }]
+          }
+        }
+      }
+    });
+  }
+
   async onClickPush() {
+    if (this.state.disabled) {
+      return;
+    }
+
     await Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.PushedScreen',

playground/src/screens/WelcomeScreen.js

@@ -1,8 +1,9 @@
 const React = require('react');
 const { Component } = require('react');
-const { View, Text, Button, Platform } = require('react-native');
+const { View, Text, Platform, TouchableHighlight } = require('react-native');
 
 const testIDs = require('../testIDs');
+const Button = require('./Button');
 
 const { Navigation } = require('react-native-navigation');
 
@@ -38,6 +39,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' && (
+            <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} />}
@@ -312,6 +318,38 @@ class WelcomeScreen extends Component {
     undefined();
   }
 
+  onClickShowPreview = async () => {
+    await Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.PushedScreen',
+        options: {
+          animations: {
+            push: {
+              enable: false
+            }
+          },
+          preview: {
+            elementId: 'PreviewElement',
+            height: 300,
+            commit: true,
+            actions: [{
+              id: 'action-cancel',
+              title: 'Cancel'
+            }, {
+              id: 'action-delete',
+              title: 'Delete',
+              actions: [{
+                id: 'action-delete-sure',
+                title: 'Are you sure?',
+                style: 'destructive'
+              }]
+            }]
+          }
+        }
+      }
+    });
+  }
+
   onClickPushOptionsScreen = () => {
     Navigation.push(this.props.componentId, {
       component: {

playground/src/testIDs.js

@@ -61,6 +61,7 @@ module.exports = {
   SET_STACK_ROOT_BUTTON: `SET_STACK_ROOT_BUTTON`,
   MODAL_LIFECYCLE_BUTTON: `MODAL_LIFECYCLE_BUTTON`,
   SPLIT_VIEW_BUTTON: `SPLIT_VIEW_BUTTON`,
+  SHOW_PREVIEW_BUTTON: `SHOW_PREVIEW_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,