unicorn-demo-app 7.43.0-snapshot.7149 → 7.43.0-snapshot.7157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.43.0-snapshot.7149",
+  "version": "7.43.0-snapshot.7157",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/scripts/releaseDemo.js

@@ -17,8 +17,11 @@ const VERSION_INC = 'patch';
 
 function run() {
   if (!validateEnv()) {
+    console.log('Do not release demo');
     return;
   }
+
+  console.log('Release demo');
   createNpmRc();
   versionTagAndPublish();
 }
@@ -27,7 +30,11 @@ function validateEnv() {
   if (!process.env.CI) {
     throw new Error('releasing is only available from CI');
   }
-  return true;
+  return (
+    process.env.BUILDKITE_BRANCH === 'master' ||
+    process.env.BUILDKITE_BRANCH === 'release' ||
+    process.env.BUILDKITE_MESSAGE === 'snapshot'
+  );
 }
 
 function createNpmRc() {

package/src/index.js

@@ -87,6 +87,15 @@ module.exports = {
       get PageControlScreen() {
         return require('./screens/componentScreens/PageControlScreen').default;
       },
+      get PanDismissibleScreen() {
+        return require('./screens/componentScreens/PanDismissibleScreen').default;
+      },
+      get PanListenerScreen() {
+        return require('./screens/componentScreens/PanListenerScreen').default;
+      },
+      get PanResponderScreen() {
+        return require('./screens/componentScreens/PanResponderScreen').default;
+      },
       get PickerScreen() {
         return require('./screens/componentScreens/PickerScreen').default;
       },
@@ -235,13 +244,16 @@ module.exports = {
       get SortableGridList() {
         return require('./screens/componentScreens/SortableGridListScreen').default;
       },
+      // Incubator
       get PanViewScreen() {
-        return require('./screens/componentScreens/PanViewScreen').default;
+        return require('./screens/incubatorScreens/PanViewScreen').default;
       },
-      // Incubator
       get IncubatorSlider() {
         return require('./screens/incubatorScreens/IncubatorSliderScreen').default;
       },
+      get IncubatorDialog() {
+        return require('./screens/incubatorScreens/IncubatorDialogScreen').default;
+      },
       get IncubatorToast() {
         return require('./screens/incubatorScreens/IncubatorToastScreen').default;
       },

package/src/screens/MenuStructure.js

@@ -183,14 +183,16 @@ export const navigationData = {
     title: 'Animations & Gestures',
     screens: [
       {title: 'Animated Image', tags: 'animated image', screen: 'unicorn.components.AnimatedImageScreen'},
-      {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
       {title: 'Haptic feedback', tags: 'haptic feedback', screen: 'unicorn.components.HapticScreen'},
-      {title: 'PanView', tags: 'pan swipe drag', screen: 'unicorn.components.PanViewScreen'},
       {
         title: 'ProgressiveImage',
         tags: 'progressive image cover overlay',
         screen: 'unicorn.components.ProgressiveImageScreen'
-      }
+      },
+      {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
+      {title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},
+      {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
+      {title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'}
     ]
   },
   Incubator: {
@@ -199,12 +201,14 @@ export const navigationData = {
       {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
       {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
+      {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
       {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {
         title: 'ExpandableOverlay',
         tags: 'text field expandable input picker',
         screen: 'unicorn.components.IncubatorExpandableOverlayScreen'
-      }
+      },
+      {title: 'PanView', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
     ]
   },
   Inspirations: {

package/src/screens/componentScreens/ActionSheetScreen.tsx

@@ -64,6 +64,7 @@ export default class ActionSheetScreen extends Component {
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           useNativeIOS={false}
+          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1')},
             {label: 'option 2', onPress: () => this.pickOption('option 2')},
@@ -79,6 +80,7 @@ export default class ActionSheetScreen extends Component {
           message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
+          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1'), iconSource: collectionsIcon},
             {label: 'option 2', onPress: () => this.pickOption('option 2'), iconSource: shareIcon},

package/src/screens/componentScreens/DateTimePickerScreen.tsx

@@ -62,6 +62,7 @@ export default class DateTimePickerScreen extends Component<{}, State> {
         <View padding-page>
           <Text text40>Date Time Picker</Text>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
@@ -71,6 +72,7 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
+            migrateDialog
             mode={'time'}
             label={'Time'}
             placeholder={'Select time'}
@@ -81,12 +83,14 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             Disabled
           </Text>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginBottom: 20}}
             editable={false}
             label={'Date'}
             placeholder={'Select a date'}
           />
           <DateTimePicker
+            migrateDialog
             editable={false}
             mode={'time'}
             label={'Time'}
@@ -107,6 +111,7 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             </View>
           </View>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginVertical: 20}}
             renderInput={this.renderCustomInput}
             mode={mode}

package/src/screens/componentScreens/DialogScreen.js

@@ -0,0 +1,343 @@
+import React, {Component} from 'react';
+import {FlatList, ScrollView, StyleSheet, Alert} from 'react-native';
+import {
+  Text,
+  View,
+  Button,
+  Dialog,
+  Colors,
+  PanningProvider,
+  RadioGroup,
+  RadioButton,
+  Switch,
+  Constants
+} from 'react-native-ui-lib'; // eslint-disable-line
+
+export default class DialogScreen extends Component {
+  constructor(props) {
+    super(props);
+
+    this.SCROLL_TYPE = {
+      NONE: 'none',
+      VERTICAL: 'vertical',
+      HORIZONTAL: 'horizontal'
+    };
+
+    this.pannableTitle = {title: 'This is a pannable header Dialog'};
+    this.title = 'This is a Dialog';
+    this.supportedOrientations = ['portrait', 'landscape'];
+    this.colors = [
+      {value: Colors.red10, label: 'Red10'},
+      {value: Colors.red30, label: 'Red30'},
+      {value: Colors.red50, label: 'Red50'},
+      {value: Colors.red70, label: 'Red70'},
+      {value: Colors.blue10, label: 'Blue10'},
+      {value: Colors.blue30, label: 'Blue30'},
+      {value: Colors.blue50, label: 'Blue50'},
+      {value: Colors.blue70, label: 'Blue70'},
+      {value: Colors.purple10, label: 'Purple10'},
+      {value: Colors.purple30, label: 'Purple30'},
+      {value: Colors.purple50, label: 'Purple50'},
+      {value: Colors.purple70, label: 'Purple70'},
+      {value: Colors.green10, label: 'Green10'},
+      {value: Colors.green30, label: 'Green30'},
+      {value: Colors.green50, label: 'Green50'},
+      {value: Colors.green70, label: 'Green70'},
+      {value: Colors.yellow10, label: 'Yellow10'},
+      {value: Colors.yellow30, label: 'Yellow30'},
+      {value: Colors.yellow50, label: 'Yellow50'},
+      {value: Colors.yellow70, label: 'Yellow70'}
+    ];
+
+    this.state = {
+      panDirection: Dialog.directions.DOWN,
+      position: 'bottom',
+      scroll: this.SCROLL_TYPE.NONE,
+      showHeader: true,
+      isRounded: true,
+      showDialog: false,
+      ignoreBackgroundPress: false
+    };
+  }
+
+  titlePressed = ({title}) => {
+    Alert.alert('Pressed on', title);
+  };
+
+  setPanDirection = panDirection => {
+    if (panDirection !== this.state.panDirection) {
+      this.setState({panDirection});
+    }
+  };
+
+  setPosition = position => {
+    if (position !== this.state.position) {
+      this.setState({position});
+    }
+  };
+
+  setScroll = scroll => {
+    if (scroll !== this.state.scroll) {
+      this.setState({scroll});
+    }
+  };
+
+  toggleShowHeader = () => {
+    this.setState({
+      showHeader: !this.state.showHeader
+    });
+  };
+
+  toggleIsRounded = () => {
+    this.setState({
+      isRounded: !this.state.isRounded
+    });
+  };
+
+  toggleIgnoreBackgroundPress = () => {
+    this.setState({
+      ignoreBackgroundPress: !this.state.ignoreBackgroundPress
+    });
+  };
+
+  showDialog = () => {
+    this.setState({showDialog: true});
+  };
+
+  hideDialog = () => {
+    this.setState({showDialog: false});
+  };
+
+  getWarning = () => {
+    const {showHeader, scroll, panDirection} = this.state;
+    if (!showHeader && scroll !== this.SCROLL_TYPE.NONE) {
+      return (
+        <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with scrollable content</Text>
+      );
+    } else if (showHeader && panDirection !== Dialog.directions.DOWN) {
+      return <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with direction=down</Text>;
+    }
+  };
+
+  getMessage = () => {
+    const {panDirection, position, scroll} = this.state;
+
+    return `Panning direction: ${panDirection ? panDirection : 'none'}
+Position: ${position ? position : 'center'}
+Scroll: ${scroll}`;
+  };
+
+  renderPannableHeader = props => {
+    const {title} = props;
+    return (
+      <View>
+        <View margin-20>
+          <Text $textDefault>{title}</Text>
+        </View>
+        <View height={2} bg-grey70/>
+      </View>
+    );
+  };
+
+  renderPlainContent = () => {
+    return (
+      <View margin-20 right>
+        <Button text60 label="Done" link onPress={this.hideDialog}/>
+      </View>
+    );
+  };
+
+  keyExtractor = item => {
+    return item.value;
+  };
+
+  renderVerticalItem = ({item: color}) => {
+    return (
+      <Text $textDefault text50 margin-20 color={color.value}>
+        {color.label}
+      </Text>
+    );
+  };
+
+  renderVerticalScroll = () => {
+    return (
+      <FlatList
+        showsVerticalScrollIndicator={false}
+        style={styles.verticalScroll}
+        data={this.colors}
+        renderItem={this.renderVerticalItem}
+        keyExtractor={this.keyExtractor}
+      />
+    );
+  };
+
+  renderHorizontalItem = ({item: color}) => {
+    return <View flex width={100} height={1000} style={{backgroundColor: color.value}}/>;
+  };
+
+  renderHorizontalScroll = () => {
+    return (
+      <View marginT-20 pointerEvents="box-none">
+        <FlatList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          data={this.colors}
+          renderItem={this.renderHorizontalItem}
+          keyExtractor={this.keyExtractor}
+        />
+        <View row pointerEvents="none" style={styles.horizontalTextContainer}>
+          <Text>
+            {'\u25c0'} Scroll me {'\u25b6'}
+          </Text>
+        </View>
+      </View>
+    );
+  };
+
+  renderContent = () => {
+    const {scroll, showHeader} = this.state;
+
+    let content;
+    switch (scroll) {
+      case this.SCROLL_TYPE.VERTICAL:
+        content = this.renderVerticalScroll();
+        break;
+      case this.SCROLL_TYPE.HORIZONTAL:
+        content = this.renderHorizontalScroll();
+        break;
+      case this.SCROLL_TYPE.NONE:
+      default:
+        content = this.renderPlainContent();
+        break;
+    }
+
+    const data = (
+      <View spread flex={scroll !== this.SCROLL_TYPE.NONE}>
+        <View marginT-20 marginH-20>
+          {!showHeader && <Text $textDefault text50>{this.title}</Text>}
+          <Text $textDefault marginT-20={!showHeader}>{this.getMessage()}</Text>
+          {this.getWarning()}
+        </View>
+        {content}
+      </View>
+    );
+
+    return data;
+  };
+
+  getDialogKey = height => {
+    const {position} = this.state;
+    return `dialog-key-${position}-${height}`;
+  };
+
+  renderDialog = () => {
+    const {showDialog, panDirection, position, scroll, showHeader, isRounded, ignoreBackgroundPress} = this.state;
+    const renderPannableHeader = showHeader ? this.renderPannableHeader : undefined;
+    const height = scroll !== this.SCROLL_TYPE.NONE ? '70%' : undefined;
+
+    return (
+      <Dialog
+        useSafeArea
+        key={this.getDialogKey(height)}
+        top={position === 'top'}
+        bottom={position === 'bottom'}
+        height={height}
+        panDirection={panDirection}
+        containerStyle={isRounded ? styles.roundedDialog : styles.dialog}
+        visible={showDialog}
+        onDismiss={this.hideDialog}
+        renderPannableHeader={renderPannableHeader}
+        pannableHeaderProps={this.pannableTitle}
+        supportedOrientations={this.supportedOrientations}
+        ignoreBackgroundPress={ignoreBackgroundPress}
+      >
+        {this.renderContent()}
+      </Dialog>
+    );
+  };
+
+  render() {
+    const {panDirection, position, scroll, showHeader, isRounded, ignoreBackgroundPress} = this.state;
+
+    return (
+      <ScrollView>
+        <View flex padding-12>
+          <Text $textDefault text30 marginB-20>
+            Dialog
+          </Text>
+
+          <RadioGroup marginT-20 initialValue={panDirection} onValueChange={this.setPanDirection}>
+            <Text $textDefault>Panning Direction:</Text>
+            <View row marginV-10>
+              <RadioButton value={null} label={'None'}/>
+              <RadioButton value={Dialog.directions.UP} label={'Up'} marginL-10/>
+              <RadioButton value={Dialog.directions.DOWN} label={'Down'} marginL-10/>
+              <RadioButton value={Dialog.directions.LEFT} label={'Left'} marginL-10/>
+              <RadioButton value={Dialog.directions.RIGHT} label={'Right'} marginL-10/>
+            </View>
+          </RadioGroup>
+
+          <RadioGroup marginT-20 initialValue={position} onValueChange={this.setPosition}>
+            <Text $textDefault>Position:</Text>
+            <View row marginV-10>
+              <RadioButton value={'top'} label={'Top'}/>
+              <RadioButton value={null} label={'Center'} marginL-10/>
+              <RadioButton value={'bottom'} label={'Bottom'} marginL-10/>
+            </View>
+          </RadioGroup>
+
+          <RadioGroup marginT-20 initialValue={scroll} onValueChange={this.setScroll}>
+            <Text $textDefault>Scroll:</Text>
+            <View row marginV-10>
+              <RadioButton value={this.SCROLL_TYPE.NONE} label={'None'}/>
+              <RadioButton value={this.SCROLL_TYPE.VERTICAL} label={'Vertical'} marginL-10/>
+              <RadioButton value={this.SCROLL_TYPE.HORIZONTAL} label={'Horizontal'} marginL-10/>
+            </View>
+          </RadioGroup>
+
+          <View row marginT-20 centerV>
+            <Text $textDefault>Toggle pannable header:</Text>
+            <Switch value={showHeader} onValueChange={this.toggleShowHeader} marginL-10/>
+          </View>
+
+          <View row marginT-20 centerV>
+            <Text $textDefault>Add some style:</Text>
+            <Switch value={isRounded} onValueChange={this.toggleIsRounded} marginL-10/>
+          </View>
+
+          <View row marginT-20 centerV>
+            <Text $textDefault>Ignore Background Press:</Text>
+            <Switch value={ignoreBackgroundPress} onValueChange={this.toggleIgnoreBackgroundPress} marginL-10/>
+          </View>
+
+          <Button marginT-50 label={'Show dialog'} onPress={this.showDialog}/>
+
+          {this.renderDialog()}
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  dialog: {
+    backgroundColor: Colors.$backgroundDefault
+  },
+  roundedDialog: {
+    backgroundColor: Colors.$backgroundDefault,
+    marginBottom: Constants.isIphoneX ? 0 : 20,
+    borderRadius: 12
+  },
+  button: {
+    margin: 5,
+    alignSelf: 'flex-start'
+  },
+  verticalScroll: {
+    marginTop: 20
+  },
+  horizontalTextContainer: {
+    alignSelf: 'center',
+    position: 'absolute',
+    top: 10
+  }
+});

package/src/screens/componentScreens/PanDismissibleScreen.tsx

@@ -0,0 +1,112 @@
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import {
+  Button,
+  View,
+  Text,
+  Switch,
+  Colors,
+  Typography,
+  PanListenerView,
+  PanningProvider,
+  PanDismissibleView
+} from 'react-native-ui-lib';
+
+const PAN_LISTENER_VIEW_HEIGHT = 100;
+
+export default class PanDismissibleScreen extends Component {
+  state = {
+    location: {left: 50, top: 50},
+    isCoupled: true,
+    key: false
+  };
+
+  switchExample = () => {
+    const {isCoupled, location} = this.state;
+    if (isCoupled) {
+      this.setState({
+        isCoupled: false,
+        location: {left: location.left, top: location.top - PAN_LISTENER_VIEW_HEIGHT}
+      });
+    } else {
+      this.setState({
+        isCoupled: true,
+        location: {left: location.left, top: location.top + PAN_LISTENER_VIEW_HEIGHT}
+      });
+    }
+  };
+
+  reset = () => {
+    this.setState({key: !this.state.key});
+  };
+
+  renderPanListener = () => {
+    return (
+      <PanListenerView style={styles.panListener}>
+        <Text style={styles.largeText}>Drag\Swipe here</Text>
+      </PanListenerView>
+    );
+  };
+
+  render() {
+    const {isCoupled, key} = this.state;
+    const panListener = this.renderPanListener();
+
+    return (
+      <View flex bg-grey80>
+        <Text style={styles.largeText}>Pan Dismissible</Text>
+        <View style={styles.container}>
+          <Switch value={isCoupled} onValueChange={this.switchExample} style={styles.switch}/>
+          <Text style={styles.smallText}>{isCoupled ? 'Coupled' : 'Uncoupled'}</Text>
+        </View>
+        <Button label="Reset" size={Button.sizes.medium} outline style={styles.button} onPress={this.reset}/>
+        <View centerH>
+          <PanningProvider>
+            {!isCoupled && panListener}
+            <PanDismissibleView
+              key={key.toString()}
+              style={[styles.panDismissible, {marginTop: isCoupled ? PAN_LISTENER_VIEW_HEIGHT : undefined}]}
+            >
+              {isCoupled && panListener}
+            </PanDismissibleView>
+          </PanningProvider>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  largeText: {
+    ...Typography.text50,
+    margin: 20
+  },
+  container: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    alignSelf: 'center'
+  },
+  panDismissible: {
+    width: 250,
+    height: 250,
+    backgroundColor: Colors.blue30
+  },
+  panListener: {
+    width: '100%',
+    height: PAN_LISTENER_VIEW_HEIGHT,
+    backgroundColor: Colors.blue60,
+    justifyContent: 'center'
+  },
+  smallText: {
+    ...Typography.text70,
+    marginLeft: 20
+  },
+  switch: {
+    marginLeft: 20,
+    alignSelf: 'center'
+  },
+  button: {
+    alignSelf: 'center',
+    marginBottom: 20
+  }
+});

package/src/screens/componentScreens/PanListenerScreen.tsx

@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import {View, Text, PanListenerView, PanDirectionsProps, PanAmountsProps} from 'react-native-ui-lib';
+
+export default class PanListenerScreen extends Component {
+  state = {
+    locationText: '',
+    endType: ''
+  };
+
+  onDrag = ({directions}: ({directions: PanDirectionsProps, deltas: PanAmountsProps})) => {
+    this.setState({locationText: `Dragged: ${directions.x}, ${directions.y}`});
+  };
+
+  onSwipe = ({directions}: ({directions: PanDirectionsProps, velocities: PanAmountsProps})) => {
+    this.setState({locationText: `Swiped: ${directions.x}, ${directions.y}`});
+  };
+
+  onPanStart = () => {
+    this.setState({endType: 'Panning'});
+  };
+
+  onPanRelease = () => {
+    this.setState({endType: 'Released'});
+  };
+
+  onPanTerminated = () => {
+    this.setState({endType: 'Terminated'});
+  };
+
+  render() {
+    const {locationText, endType} = this.state;
+
+    return (
+      <View flex bg-grey80>
+        <Text text50 margin-40>
+          Pan Listener
+        </Text>
+        <PanListenerView
+          bg-grey70
+          centerV
+          height={300}
+          width="100%"
+          //   directions={[PanningProvider.Directions.UP, PanningProvider.Directions.DOWN]}
+          onDrag={this.onDrag}
+          onSwipe={this.onSwipe}
+          onPanStart={this.onPanStart}
+          onPanRelease={this.onPanRelease}
+          onPanTerminated={this.onPanTerminated}
+        >
+          <Text text50 margin-40>
+            Drag\swipe here
+          </Text>
+        </PanListenerView>
+        <Text text50 margin-40>
+          {locationText}
+        </Text>
+        <Text text50 margin-40>
+          {endType}
+        </Text>
+      </View>
+    );
+  }
+}

package/src/screens/componentScreens/PanResponderScreen.tsx

@@ -0,0 +1,99 @@
+import _ from 'lodash';
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import {
+  View,
+  Text,
+  Switch,
+  Colors,
+  Typography,
+  PanListenerView,
+  PanningProvider,
+  PanResponderView
+} from 'react-native-ui-lib';
+
+const PAN_LISTENER_VIEW_HEIGHT = 100;
+
+export default class PanResponderScreen extends Component {
+  state = {
+    location: {left: 50, top: 50},
+    isCoupled: false
+  };
+
+  switchExample = () => {
+    const {isCoupled, location} = this.state;
+    if (isCoupled) {
+      this.setState({
+        isCoupled: false,
+        location: {left: location.left, top: location.top - PAN_LISTENER_VIEW_HEIGHT}
+      });
+    } else {
+      this.setState({
+        isCoupled: true,
+        location: {left: location.left, top: location.top + PAN_LISTENER_VIEW_HEIGHT}
+      });
+    }
+  };
+
+  renderPanListener = () => {
+    return (
+      <PanListenerView style={styles.panListener}>
+        <Text style={styles.largeText}>Drag here</Text>
+      </PanListenerView>
+    );
+  };
+
+  render() {
+    const {isCoupled} = this.state;
+    const panListener = this.renderPanListener();
+
+    return (
+      <View flex bg-grey80>
+        <View style={styles.container}>
+          <Text style={styles.largeText}>Pan Responder</Text>
+          <Switch value={isCoupled} onValueChange={this.switchExample} style={styles.switch} />
+          <Text style={styles.smallText}>{isCoupled ? 'Coupled' : 'Uncoupled'}</Text>
+        </View>
+        <PanningProvider>
+          {!isCoupled && panListener}
+          <PanResponderView
+            style={[styles.panResponder, {marginTop: isCoupled ? PAN_LISTENER_VIEW_HEIGHT : undefined}]}
+          >
+            {isCoupled && panListener}
+          </PanResponderView>
+        </PanningProvider>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 50,
+    alignItems: 'center'
+  },
+  panResponder: {
+    width: 250,
+    height: 250,
+    backgroundColor: Colors.blue30
+  },
+  panListener: {
+    width: '100%',
+    height: PAN_LISTENER_VIEW_HEIGHT,
+    backgroundColor: Colors.blue60,
+    justifyContent: 'center'
+  },
+  largeText: {
+    ...Typography.text50,
+    marginLeft: 40
+  },
+  smallText: {
+    ...Typography.text70,
+    marginLeft: 20
+  },
+  switch: {
+    marginLeft: 20,
+    alignSelf: 'center'
+  }
+});

package/src/screens/componentScreens/PickerScreen.tsx

@@ -5,13 +5,14 @@ import {
   Assets,
   Colors,
   Typography,
-  Dialog,
+  Incubator,
   View,
   Text,
   Button,
   Icon,
   Avatar,
   Picker,
+  PanningProvider,
   PickerProps,
   RenderCustomModalProps,
   PickerMethods,
@@ -129,7 +130,7 @@ export default class PickerScreen extends Component {
   renderDialog: PickerProps['renderOverlay'] = (modalProps: RenderCustomModalProps) => {
     const {visible, children, toggleModal, onDone} = modalProps;
     return (
-      <Dialog
+      <Incubator.Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
@@ -140,11 +141,11 @@ export default class PickerScreen extends Component {
         bottom
         useSafeArea
         containerStyle={{backgroundColor: Colors.$backgroundDefault}}
-        direction={Dialog.directions.DOWN}
+        direction={PanningProvider.Directions.DOWN}
         headerProps={{title: 'Custom modal'}}
       >
         <ScrollView>{children}</ScrollView>
-      </Dialog>
+      </Incubator.Dialog>
     );
   };
 

package/src/screens/componentScreens/WheelPickerScreen.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useCallback, useState} from 'react';
-import {View, Text, Dialog, WheelPicker, WheelPickerAlign, Colors, Typography, Button} from 'react-native-ui-lib';
+import {View, Text, Incubator, WheelPicker, WheelPickerAlign, Colors, Typography, Button} from 'react-native-ui-lib';
 
 const monthItems = _.map([
   'January',
@@ -88,7 +88,7 @@ export default () => {
       <View center marginT-40>
         <Text h3 marginB-20>Days</Text>
         <Button size={Button.sizes.small} label={'Pick Days'} onPress={onPickDaysPress}/>
-        <Dialog
+        <Incubator.Dialog
           width={'90%'}
           bottom
           visible={showDialog}
@@ -96,7 +96,7 @@ export default () => {
           headerProps={{showKnob: false, showDivider: false}}
         >
           <WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
-        </Dialog>
+        </Incubator.Dialog>
       </View>
     </View>
   );

package/src/screens/componentScreens/index.js

@@ -32,8 +32,10 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
   registrar('unicorn.components.NumberInputScreen', () => require('./NumberInputScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
-  registrar('unicorn.components.PanViewScreen', () => require('./PanViewScreen').default);
   registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
+  registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
+  registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
+  registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
   registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);

package/src/screens/{componentScreens/DialogScreen.tsx → incubatorScreens/IncubatorDialogScreen.tsx}

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {View, Text, Card, Button, Dialog, DialogHeaderProps, Colors, Spacings, ModalProps} from 'react-native-ui-lib';
+import {View, Text, Card, Button, Incubator, Colors, Spacings, ModalProps} from 'react-native-ui-lib';
 
 interface Item {
   value: string;
@@ -31,10 +31,10 @@ const colors: Item[] = [
   {value: Colors.yellow70, label: 'Yellow70'}
 ];
 
-export default class DialogScreen extends Component {
+export default class IncubatorDialogScreen extends Component {
   state = {visible: false};
   modalProps: ModalProps = {supportedOrientations: ['portrait', 'landscape']};
-  headerProps: DialogHeaderProps = {title: 'Title (swipe here)'};
+  headerProps: Incubator.DialogHeaderProps = {title: 'Title (swipe here)'};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
@@ -67,13 +67,13 @@ export default class DialogScreen extends Component {
       <View bg-$backgroundNeutralLight flex padding-20>
         <Card height={100} center padding-20>
           <Text $textDefault text50>
-            DialogScreen
+            IncubatorDialogScreen
           </Text>
         </Card>
         <View flex center>
           <Button marginV-s5 label="Open Dialog" onPress={this.openDialog}/>
         </View>
-        <Dialog
+        <Incubator.Dialog
           useSafeArea
           visible={visible}
           onDismiss={this.onDismiss}
@@ -89,7 +89,7 @@ export default class DialogScreen extends Component {
             renderItem={this.renderVerticalItem}
             keyExtractor={this.keyExtractor}
           />
-        </Dialog>
+        </Incubator.Dialog>
       </View>
     );
   }

package/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

@@ -112,6 +112,7 @@ export default class TextFieldScreen extends Component {
           useDialog
           expandableContent={this.renderPickerContent()}
           dialogProps={{bottom: true, onDismiss: () => console.warn('Dialog is dismissed')}}
+          migrateDialog
         >
           {this.renderColorRow(selectedColor)}
         </Incubator.ExpandableOverlay>

package/src/screens/{componentScreens → incubatorScreens}/PanViewScreen.tsx

@@ -6,7 +6,7 @@ import {
   View,
   Text,
   Colors,
-  PanView,
+  Incubator,
   Card,
   Constants,
   Modal,
@@ -14,6 +14,7 @@ import {
   Icon,
   TouchableOpacity
 } from 'react-native-ui-lib';
+const {PanView} = Incubator;
 
 interface Item {
   value: string;

package/src/screens/incubatorScreens/index.js

@@ -1,7 +1,9 @@
 export function registerScreens(registrar) {
   registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
   registrar('unicorn.incubator.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);
+  registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
+  registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
   registrar('unicorn.components.IncubatorSliderScreen', () => require('./IncubatorSliderScreen').default);
 }