unicorn-demo-app 7.46.2 → 7.46.3-snapshot.7341

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.46.2",
+  "version": "7.46.3-snapshot.7341",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-native": "^0.71.2",
+    "react-native": "^0.76.9",
     "react-native-ui-lib": "*",
     "semver": "^5.5.0"
   }

package/src/index.js

@@ -1,8 +1,7 @@
-import {UIManager, I18nManager} from 'react-native';
+import {I18nManager} from 'react-native';
 import {navigationData as menuStructure} from './screens/MenuStructure';
 import {loadDemoConfigurations} from './configurations';
 
-UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); // eslint-disable-line
 I18nManager.allowRTL(true);
 
 module.exports = {
@@ -87,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;
       },
@@ -108,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;
       },
@@ -244,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;
       },
@@ -263,6 +247,9 @@ module.exports = {
       get IncubatorCalendarScreen() {
         return require('./screens/incubatorScreens/IncubatorCalendarScreen').default;
       },
+      get IncubatorGradient() {
+        return require('./screens/incubatorScreens/IncubatorGradientScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

package/src/screens/ExampleScreenPresenter.tsx

@@ -16,12 +16,22 @@ import {
   View
 } from 'react-native-ui-lib';
 
-interface RadioGroupOptions {
+interface StateOptions {
+  state?: string;
+  setState?: React.Dispatch<React.SetStateAction<any /** no suitable solution for enum */>>;
+}
+
+interface RadioGroupBaseOptions {
   isRow?: boolean;
-  afterValueChanged?: () => void;
   useValueAsLabel?: boolean;
 }
 
+type RadioGroupOptions =
+  | (RadioGroupBaseOptions & {
+      afterValueChanged?: () => void;
+    })
+  | (RadioGroupBaseOptions & StateOptions);
+
 interface BooleanGroupOptions {
   spread?: boolean;
   afterValueChanged?: () => void;
@@ -29,11 +39,6 @@ interface BooleanGroupOptions {
   setState?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-interface SegmentsExtraOptions {
-  state?: string;
-  setState?: React.Dispatch<React.SetStateAction<any /** no suitable solution for enum */>>;
-}
-
 export function renderHeader(title: string, others?: TextProps) {
   return (
     <Text text30 $textDefault {...others}>
@@ -103,9 +108,10 @@ export function renderBooleanGroup(title: string, options: string[]) {
 export function renderRadioGroup(title: string,
   key: string,
   options: object,
-  {isRow, afterValueChanged, useValueAsLabel}: RadioGroupOptions = {}) {
   // @ts-ignore
-  const value = this.state[key];
+  {isRow, afterValueChanged, useValueAsLabel, state, setState}: RadioGroupOptions = {}) {
+  // @ts-ignore
+  const value = state ?? this.state[key];
   return (
     <View marginB-s2>
       {!_.isUndefined(title) && (
@@ -118,7 +124,18 @@ export function renderRadioGroup(title: string,
         style={isRow && styles.rowWrap}
         initialValue={value}
         // @ts-ignore
-        onValueChange={value => this.setState({[key]: value}, afterValueChanged)}
+        onValueChange={value => {
+          if (setState) {
+            setState(value);
+            if (afterValueChanged) {
+              // eslint-disable-next-line no-restricted-syntax
+              console.error('afterValueChanged is not supported together with the state option');
+            }
+          } else {
+            // @ts-ignore
+            this.setState({[key]: value}, afterValueChanged);
+          }
+        }}
       >
         {_.map(options, (value, key) => {
           return (
@@ -159,9 +176,25 @@ export function renderColorOption(title: string,
 
 export function renderSliderOption(title: string,
   key: string,
-  {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
+  {
+    min = 0,
+    max = 10,
+    step = 1,
+    initial = 0,
+    sliderText = '',
+    state,
+    setState
+  }: {
+    min?: number;
+    max?: number;
+    step?: number;
+    initial?: number;
+    sliderText?: string;
+    state?: number;
+    setState?: React.Dispatch<React.SetStateAction<number>>;
+  }) {
   // @ts-ignore
-  const value = this.state[key] || initial;
+  const value = state ?? this.state[key] ?? initial;
   return (
     <View marginV-s2>
       <Text marginB-s1 text70M $textDefault>
@@ -177,7 +210,14 @@ export function renderSliderOption(title: string,
           maximumValue={max}
           step={step}
           // @ts-ignore
-          onValueChange={value => this.setState({[key]: value})}
+          onValueChange={value => {
+            if (setState) {
+              setState(value);
+            } else {
+              // @ts-ignore
+              this.setState({[key]: value});
+            }
+          }}
         />
         <Text marginL-s4 text70 $textDefault style={styles.text}>
           {sliderText}
@@ -191,7 +231,7 @@ export function renderSliderOption(title: string,
 export function renderMultipleSegmentOptions(title: string,
   key: string,
   options: (SegmentedControlItemProps & {value: any})[],
-  {state, setState}: SegmentsExtraOptions = {}) {
+  {state, setState}: StateOptions = {}) {
   // @ts-ignore
   const value = state ?? this.state[key];
   const index = _.findIndex(options, {value});

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'}
     ]
@@ -86,7 +81,7 @@ export const navigationData = {
     screens: [
       {title: 'Action Sheet', tags: 'action sheet cross-platform', screen: 'unicorn.components.ActionSheetScreen'},
       {title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
-      {title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
+      {title: 'Feature Highlight', tags: 'native feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
       {title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
       {title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
       {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'}
@@ -122,10 +117,10 @@ export const navigationData = {
       {title: 'LoadingScreen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
-      {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
+      {title: 'TabController', tags: 'tabbar controller', screen: 'unicorn.components.TabControllerScreen'},
       {
         title: 'TabControllerWithStickyHeader',
-        tags: 'tabbar controller native sticky header',
+        tags: 'tabbar controller sticky header',
         screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'
       },
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
@@ -153,28 +148,28 @@ export const navigationData = {
     screens: [
       {
         title: 'KeyboardAwareScrollView',
-        tags: 'KeyboardAwareScrollView',
+        tags: 'native KeyboardAwareScrollView',
         screen: 'unicorn.components.KeyboardAwareScrollViewScreen'
       },
       {
         title: 'Dynamic Fonts',
-        tags: 'dynamic fonts load download',
+        tags: 'native dynamic fonts load download',
         screen: 'unicorn.nativeComponents.DynamicFontsScreen'
       },
       {
         title: 'Highlight Overlay',
-        tags: 'native overlay',
+        tags: 'native native overlay',
         screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
       },
       {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
       {
         title: 'KeyboardTracking (iOS)',
-        tags: 'KeyboardTracking',
+        tags: 'native KeyboardTracking',
         screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'
       },
       {
         title: 'KeyboardAccessoryView',
-        tags: 'KeyboardInput',
+        tags: 'native KeyboardInput',
         screen: 'unicorn.nativeComponents.KeyboardAccessoryViewScreen'
       }
     ]
@@ -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: {
@@ -200,15 +193,14 @@ export const navigationData = {
     screens: [
       {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: 'Native TouchableOpacity', tags: 'native touchable', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {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'}
+      {title: 'Gradient', tags: 'gradient', screen: 'unicorn.components.IncubatorGradientScreen'}
     ]
   },
   Inspirations: {

package/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -1522,16 +1522,38 @@ exports[`TextField Screen renders screen 1`] = `
                   numberOfLines={1}
                   onLayout={[Function]}
                   style={
-                    {
-                      "backgroundColor": "transparent",
-                      "color": "#6E7881",
-                      "fontFamily": "System",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 24,
-                      "opacity": 0,
-                      "writingDirection": "ltr",
-                    }
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "color": "#20303C",
+                        "writingDirection": "ltr",
+                      },
+                      undefined,
+                      {
+                        "color": "#6E7881",
+                      },
+                      undefined,
+                      undefined,
+                      {},
+                      undefined,
+                      undefined,
+                      undefined,
+                      [
+                        {},
+                        [
+                          {},
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "lineHeight": 24,
+                          },
+                        ],
+                        {
+                          "opacity": 0,
+                        },
+                      ],
+                    ]
                   }
                   testID="undefined.floatingPlaceholder"
                 >
@@ -2118,16 +2140,38 @@ exports[`TextField Screen renders screen 1`] = `
                   numberOfLines={1}
                   onLayout={[Function]}
                   style={
-                    {
-                      "backgroundColor": "transparent",
-                      "color": "#20303C",
-                      "fontFamily": "System",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 24,
-                      "opacity": 0,
-                      "writingDirection": "ltr",
-                    }
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "color": "#20303C",
+                        "writingDirection": "ltr",
+                      },
+                      undefined,
+                      {
+                        "color": "#20303C",
+                      },
+                      undefined,
+                      undefined,
+                      {},
+                      undefined,
+                      undefined,
+                      undefined,
+                      [
+                        {},
+                        [
+                          {},
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "lineHeight": 24,
+                          },
+                        ],
+                        {
+                          "opacity": 0,
+                        },
+                      ],
+                    ]
                   }
                   testID="undefined.floatingPlaceholder"
                 >
@@ -2433,16 +2477,38 @@ exports[`TextField Screen renders screen 1`] = `
                   numberOfLines={1}
                   onLayout={[Function]}
                   style={
-                    {
-                      "backgroundColor": "transparent",
-                      "color": "#20303C",
-                      "fontFamily": "System",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 24,
-                      "opacity": 0,
-                      "writingDirection": "ltr",
-                    }
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "color": "#20303C",
+                        "writingDirection": "ltr",
+                      },
+                      undefined,
+                      {
+                        "color": "#20303C",
+                      },
+                      undefined,
+                      undefined,
+                      {},
+                      undefined,
+                      undefined,
+                      undefined,
+                      [
+                        {},
+                        [
+                          {},
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "lineHeight": 24,
+                          },
+                        ],
+                        {
+                          "opacity": 0,
+                        },
+                      ],
+                    ]
                   }
                   testID="undefined.floatingPlaceholder"
                 >

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/AnimatedImageScreen.js

@@ -4,8 +4,8 @@ import _ from 'lodash';
 import {AnimatedImage, Colors} from 'react-native-ui-lib'; //eslint-disable-line
 
 const SampleImages = [
-  'https://static.pexels.com/photos/50721/pencils-crayons-colourful-rainbow-50721.jpeg',
-  'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
+  'https://images.pexels.com/photos/2529146/pexels-photo-2529146.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+  'https://images.pexels.com/photos/2529158/pexels-photo-2529158.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
 ];
 
 export default class AnimatedImageScreen extends Component {

package/src/screens/componentScreens/ButtonsScreen.tsx

@@ -1,6 +1,17 @@
 import React, {Component} from 'react';
-import {ScrollView, StyleSheet, Alert, Image} from 'react-native';
-import {Text, View, Assets, Constants, Button, Colors, Typography, ButtonProps} from 'react-native-ui-lib';
+import {ScrollView, StyleSheet, Alert} from 'react-native';
+import {
+  Text,
+  View,
+  Assets,
+  Constants,
+  Button,
+  Colors,
+  Typography,
+  ButtonProps,
+  Incubator,
+  Image
+} from 'react-native-ui-lib';
 
 const ButtonSpace = 20;
 const plusIcon = Assets.getAssetByPath('icons.demo.plus');
@@ -267,6 +278,34 @@ export default class ButtonsScreen extends Component {
             <Button label="hyperlink button" hyperlink style={{marginBottom: ButtonSpace}}/>
 
             <Button label="Icon on right" iconSource={plusIcon} iconOnRight/>
+
+            <Text style={styles.header}>Custom Backgrounds</Text>
+            <Button
+              label="Gradient Background"
+              customBackground={
+                <Incubator.Gradient
+                  colors={[Colors.$backgroundPrimaryHeavy, Colors.$backgroundPrimaryMedium]}
+                  type="rectangle"
+                  width={200}
+                  height={50}
+                />
+              }
+              style={{marginBottom: ButtonSpace}}
+            />
+            <Button
+              label="Image Background"
+              customBackground={
+                <Image
+                  source={{
+                    uri: 'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
+                  }}
+                  style={{width: 200, height: 50}}
+                  resizeMode="cover"
+                />
+              }
+              style={{marginBottom: ButtonSpace}}
+              $textNeutralHeavy
+            />
           </View>
 
           <View marginT-20>

package/src/screens/componentScreens/CarouselVerticalScreen.tsx

@@ -1,6 +1,6 @@
 import {Carousel, Constants, Text, View, Colors} from 'react-native-ui-lib';
 import React, {Component} from 'react';
-import {StyleSheet, Animated, TextStyle} from 'react-native';
+import {StyleSheet, Animated} from 'react-native';
 import _ from 'lodash';
 import {renderBooleanOption, renderSliderOption} from '../ExampleScreenPresenter';
 
@@ -58,7 +58,7 @@ class CarouselVerticalScreen extends Component<{}, State> {
     return (
       <View absT>
         {_.times(numberOfPagesShown, page => (
-          <Text key={page} h1 animated style={[styles.animatedPageCounter, animatedStyles[page]] as TextStyle}>
+          <Text key={page} h1 animated style={[styles.animatedPageCounter, animatedStyles[page]]}>
             {page}
           </Text>
         ))}

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>
     );
   }