Add peek pop example to playground app

This commit also allows TouchablePreview component to accept any touchable components, not only the ones included in RN.
wix · Mar 14, 2019 · dc1b980 · dc1b980
1 parent eb17eb2
commit dc1b980
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 44 deletions.
diff --git a/lib/src/adapters/TouchablePreview.tsx b/lib/src/adapters/TouchablePreview.tsx
@@ -117,10 +117,9 @@ export class TouchablePreview extends React.PureComponent<Props> {
     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;
+    const Touchable = (Platform.OS === 'ios' && touchableComponent instanceof TouchableNativeFeedback) ?
+      TouchableWithoutFeedback :
+      touchableComponent as typeof React.Component;
 
     // Wrap component with Touchable for handling platform touches
     // and a single react View for detecting force and timing.

diff --git a/playground/src/components/Button.js b/playground/src/components/Button.js
@@ -1,9 +1,16 @@
 const React = require('react');
-const {Button} = require('react-native-ui-lib');
-module.exports = (props) =>
-  <Button
-    {...props}
-    style={{
-      marginBottom: 8,
-    }}
-  />;
+const { Button } = require('react-native-ui-lib');
+class RnnButton extends React.PureComponent {
+  render() {
+    return (
+      <Button
+        {...this.props}
+        style={{
+          marginBottom: 8,
+        }}
+      />
+    )
+  }
+}
+
+module.exports = RnnButton
diff --git a/playground/src/screens/LayoutsScreen.js b/playground/src/screens/LayoutsScreen.js
@@ -68,38 +68,6 @@ class LayoutsScreen extends React.Component {
     }
   });
 
-  onClickShowPreview = async ({reactTag}) => {
-    await Navigation.push(this.props.componentId, {
-      component: {
-        name: 'navigation.playground.PushedScreen',
-        options: {
-          animations: {
-            push: {
-              enabled: false
-            }
-          },
-          preview: reactTag ? {
-            reactTag,
-            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'
-              }]
-            }]
-          } : undefined,
-        }
-      }
-    });
-  }
-
   onClickSplitView = () => {
     Navigation.setRoot({
       root: {

diff --git a/playground/src/screens/NavigationScreen.js b/playground/src/screens/NavigationScreen.js
@@ -36,6 +36,10 @@ class NavigationScreen extends React.Component {
         <Button label='External Component' testID={EXTERNAL_COMP_BTN} onPress={this.externalComponent} />
         <Button label='Static Events' testID={SHOW_STATIC_EVENTS_SCREEN} onPress={this.pushStaticEventsScreen} />
         <Button label='Orientation' testID={SHOW_ORIENTATION_SCREEN} onPress={this.orientation} />
+        <Navigation.TouchablePreview
+          touchableComponent={Button}
+          onPressIn={this.preview}
+          label='Preview' />
       </Root>
     );
   }
@@ -45,6 +49,36 @@ class NavigationScreen extends React.Component {
   externalComponent = () => Navigation.showModal(Screens.ExternalComponent);
   pushStaticEventsScreen = () => Navigation.showModal(Screens.EventsScreen)
   orientation = () => Navigation.showModal(Screens.Orientation);
+  preview = ({ reactTag }) => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: Screens.Pushed,
+        options: {
+          animations: {
+            push: {
+              enabled: false
+            }
+          },
+          preview: {
+            reactTag: reactTag,
+            height: 300,
+            actions: [{
+              id: 'action-cancel',
+              title: 'Cancel'
+            }, {
+              id: 'action-delete',
+              title: 'Delete',
+              actions: [{
+                id: 'action-delete-sure',
+                title: 'Are you sure?',
+                style: 'destructive'
+              }]
+            }]
+          }
+        }
+      }
+    });
+  }
 }
 
 module.exports = NavigationScreen;
diff --git a/playground/src/services/Navigation.js b/playground/src/services/Navigation.js
@@ -48,5 +48,6 @@ module.exports = {
   popTo: Navigation.popTo.bind(Navigation),
   setDefaultOptions: Navigation.setDefaultOptions.bind(Navigation),
   setRoot: Navigation.setRoot.bind(Navigation),
+  TouchablePreview: Navigation.TouchablePreview,
   setStackRoot
 }