unicorn-demo-app 7.44.0-snapshot.7216 → 7.44.0-snapshot.7228

package/package.json

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

package/src/index.js

@@ -86,15 +86,6 @@ 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;
       },
@@ -107,9 +98,6 @@ module.exports = {
       get SegmentedControlScreen() {
         return require('./screens/componentScreens/SegmentedControlScreen').default;
       },
-      get SharedTransitionScreen() {
-        return require('./screens/componentScreens/SharedTransitionScreen').default;
-      },
       get SkeletonViewScreen() {
         return require('./screens/componentScreens/SkeletonViewScreen').default;
       },
@@ -243,16 +231,13 @@ module.exports = {
       get SortableGridList() {
         return require('./screens/componentScreens/SortableGridListScreen').default;
       },
-      // Incubator
       get PanViewScreen() {
-        return require('./screens/incubatorScreens/PanViewScreen').default;
+        return require('./screens/componentScreens/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

@@ -39,11 +39,6 @@ export const navigationData = {
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
       {title: 'ScrollBar', tags: 'scroll bar gradient', screen: 'unicorn.components.ScrollBarScreen'},
       {title: 'SearchInputScreen', tags: 'search input', screen: 'unicorn.components.SearchInputScreen'},
-      {
-        title: 'Shared Transition',
-        tags: 'shared transition element',
-        screen: 'unicorn.components.SharedTransitionScreen'
-      },
       {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
       {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
     ]
@@ -183,16 +178,14 @@ 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: {
@@ -206,8 +199,7 @@ export const navigationData = {
         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/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -728,7 +728,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -1269,7 +1269,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -1657,7 +1657,7 @@ exports[`TextField Screen renders screen 1`] = `
                     },
                     undefined,
                     {
-                      "color": "#FC3D2F",
+                      "color": "#D52712",
                     },
                     undefined,
                     undefined,
@@ -1888,7 +1888,7 @@ exports[`TextField Screen renders screen 1`] = `
                     },
                     undefined,
                     {
-                      "color": "#FC3D2F",
+                      "color": "#D52712",
                     },
                     undefined,
                     undefined,
@@ -2275,7 +2275,7 @@ exports[`TextField Screen renders screen 1`] = `
                     },
                     undefined,
                     {
-                      "color": "#FC3D2F",
+                      "color": "#D52712",
                     },
                     undefined,
                     undefined,
@@ -3192,7 +3192,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -4089,7 +4089,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -4792,7 +4792,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -5052,7 +5052,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -5342,7 +5342,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -6083,7 +6083,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -6384,7 +6384,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -6713,7 +6713,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -7089,7 +7089,7 @@ exports[`TextField Screen renders screen 1`] = `
                   },
                   undefined,
                   {
-                    "color": "#FC3D2F",
+                    "color": "#D52712",
                   },
                   undefined,
                   undefined,
@@ -7365,7 +7365,7 @@ exports[`TextField Screen renders screen 1`] = `
                     },
                     undefined,
                     {
-                      "color": "#FC3D2F",
+                      "color": "#D52712",
                     },
                     undefined,
                     undefined,
@@ -7620,7 +7620,7 @@ exports[`TextField Screen renders screen 1`] = `
                     },
                     undefined,
                     {
-                      "color": "#FC3D2F",
+                      "color": "#D52712",
                     },
                     undefined,
                     undefined,
@@ -7910,7 +7910,7 @@ exports[`TextField Screen renders screen 1`] = `
                     },
                     undefined,
                     {
-                      "color": "#FC3D2F",
+                      "color": "#D52712",
                     },
                     undefined,
                     undefined,

package/src/screens/componentScreens/ActionSheetScreen.tsx

@@ -64,7 +64,6 @@ 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')},
@@ -80,7 +79,6 @@ 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,7 +62,6 @@ 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'}
@@ -72,7 +71,6 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
-            migrateDialog
             mode={'time'}
             label={'Time'}
             placeholder={'Select time'}
@@ -83,14 +81,12 @@ 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'}
@@ -111,7 +107,6 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             </View>
           </View>
           <DateTimePicker
-            migrateDialog
             containerStyle={{marginVertical: 20}}
             renderInput={this.renderCustomInput}
             mode={mode}

package/src/screens/{incubatorScreens/IncubatorDialogScreen.tsx → componentScreens/DialogScreen.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, Incubator, Colors, Spacings, ModalProps} from 'react-native-ui-lib';
+import {View, Text, Card, Button, Dialog, DialogHeaderProps, 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 IncubatorDialogScreen extends Component {
+export default class DialogScreen extends Component {
   state = {visible: false};
   modalProps: ModalProps = {supportedOrientations: ['portrait', 'landscape']};
-  headerProps: Incubator.DialogHeaderProps = {title: 'Title (swipe here)'};
+  headerProps: DialogHeaderProps = {title: 'Title (swipe here)'};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
@@ -67,13 +67,13 @@ export default class IncubatorDialogScreen extends Component {
       <View bg-$backgroundNeutralLight flex padding-20>
         <Card height={100} center padding-20>
           <Text $textDefault text50>
-            IncubatorDialogScreen
+            DialogScreen
           </Text>
         </Card>
         <View flex center>
           <Button marginV-s5 label="Open Dialog" onPress={this.openDialog}/>
         </View>
-        <Incubator.Dialog
+        <Dialog
           useSafeArea
           visible={visible}
           onDismiss={this.onDismiss}
@@ -89,7 +89,7 @@ export default class IncubatorDialogScreen extends Component {
             renderItem={this.renderVerticalItem}
             keyExtractor={this.keyExtractor}
           />
-        </Incubator.Dialog>
+        </Dialog>
       </View>
     );
   }

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

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

package/src/screens/componentScreens/PickerScreen.tsx

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

package/src/screens/componentScreens/WheelPickerScreen.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useCallback, useState} from 'react';
-import {View, Text, Incubator, WheelPicker, WheelPickerAlign, Colors, Typography, Button} from 'react-native-ui-lib';
+import {View, Text, Dialog, 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}/>
-        <Incubator.Dialog
+        <Dialog
           width={'90%'}
           bottom
           visible={showDialog}
@@ -96,7 +96,7 @@ export default () => {
           headerProps={{showKnob: false, showDivider: false}}
         >
           <WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
-        </Incubator.Dialog>
+        </Dialog>
       </View>
     </View>
   );

package/src/screens/componentScreens/index.js

@@ -32,10 +32,8 @@ 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);
@@ -44,7 +42,6 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
   registrar('unicorn.components.SearchInputScreen', () => require('./SearchInputScreen').default);
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
-  registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
   registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
   registrar('unicorn.components.SortableGridListScreen', () => require('./SortableGridListScreen').default);

package/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

@@ -112,7 +112,6 @@ 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/incubatorScreens/index.js

@@ -1,9 +1,7 @@
 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);
 }

package/src/screens/componentScreens/DialogScreen.js

@@ -1,343 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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/SharedTransitionScreen.js

@@ -1,143 +0,0 @@
-import React, {Component} from 'react';
-import {LayoutAnimation, FlatList} from 'react-native';
-import {Colors, View, Image, TouchableOpacity, SharedTransition, Card, Button, Text, Modal} from 'react-native-ui-lib'; //eslint-disable-line
-
-const DATA = [
-  {
-    id: '12',
-    title: 'white pendant lamp',
-    location: 'Paris, France',
-    views: 1224,
-    image:
-      'https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
-  },
-  {
-    id: '13',
-    title: 'black floor lamp at the corner',
-    location: 'Paris, France',
-    views: 302,
-    image:
-      'https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1494&q=80',
-  },
-  {
-    id: '14',
-    title: 'gray desk lamp near white wall',
-    location: 'Paris, France',
-    views: 554,
-    image:
-      'https://images.unsplash.com/photo-1507473885765-e6ed057f782c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80',
-  },
-  {
-    id: '15',
-    title: 'round white and yellow bowl illustration',
-    location: 'Paris, France',
-    views: 1999,
-    image:
-      'https://images.unsplash.com/photo-1526308430620-59f514ed2152?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
-  },
-  {
-    id: '16',
-    title: 'black and orange polka dot print textile',
-    location: 'Paris, France',
-    views: 2014,
-    image:
-      'https://images.unsplash.com/photo-1544070643-24128d1f6033?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80',
-  },
-];
-
-export default class SharedTransitionScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.cards = [];
-  }
-
-  state = {
-    showDetails: false,
-  };
-
-  renderItem = ({item}) => {
-    return (
-      <View marginB-20 padding-20 row height={280}>
-        <Card padding-20 marginV-20 width={'60%'} style={{zIndex: 10}} spread>
-          <View>
-            <Text text70 grey10>
-              {item.title}
-            </Text>
-            <Text text80 grey30>
-              {item.location}
-            </Text>
-          </View>
-          <View>
-            <Text text70 grey30>
-              <Text text50 purple30>
-                {item.views}
-              </Text>
-              {' Views'}
-            </Text>
-          </View>
-        </Card>
-        <SharedTransition.Source
-          id={item.id}
-          data={item}
-          style={[
-            {overflow: 'hidden', position: 'absolute', right: 20, top: 20, bottom: 20, width: '45%', height: 200},
-          ]}
-        >
-          {this.renderSharedElement(item)}
-        </SharedTransition.Source>
-      </View>
-    );
-  };
-
-  renderList() {
-    return <FlatList data={DATA} renderItem={this.renderItem} keyExtractor={item => item.title} />;
-  }
-
-  renderSharedElement(item = {}) {
-    return (
-      <View flex>
-        <Image
-          style={{width: '100%', height: '100%', borderRadius: 10}}
-          source={{
-            uri: item.image,
-          }}
-        />
-      </View>
-    );
-  }
-
-  renderDetails = (data = {}) => {
-    return (
-      <View flex pointerEvents="box-none" padding-20 paddingT-50>
-        <View row>
-          <SharedTransition.Target style={{width: 200, height: 280, marginLeft: -30}}>
-            {data && this.renderSharedElement(data, true)}
-          </SharedTransition.Target>
-          <View flex paddingL-20>
-            <Text text50>{data.title}</Text>
-            <Text text90 purple30 marginT-10>
-              {data.views} Views
-            </Text>
-          </View>
-        </View>
-        <View left marginT-20>
-          <Text text60>{data.location}</Text>
-          <Text>
-            when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
-            not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
-          </Text>
-          <Button link marginT-20 grey10 label="Learn More" size="small" />
-        </View>
-      </View>
-    );
-  };
-
-  render() {
-    return (
-      <View flex grey80>
-        <SharedTransition.Area renderDetails={this.renderDetails}>{this.renderList()}</SharedTransition.Area>
-      </View>
-    );
-  }
-}