unicorn-demo-app 7.46.3-snapshot.7358 → 7.46.3-snapshot.7367

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.46.3-snapshot.7358",
+  "version": "7.46.3-snapshot.7367",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
@@ -18,12 +18,12 @@
     "light-date": "^1.2.0"
   },
   "devDependencies": {
-    "react-native-ui-lib": "7.46.3-snapshot.7352",
+    "react-native-ui-lib": "7.1.0",
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-native": "^0.77.3",
+    "react": "^18.2.0",
+    "react-native": "^0.71.2",
     "react-native-ui-lib": "*",
     "semver": "^5.5.0"
   }

package/src/index.js

@@ -1,7 +1,8 @@
-import {I18nManager} from 'react-native';
+import {UIManager, 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 = {
@@ -86,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;
       },
@@ -98,6 +108,9 @@ 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;
       },
@@ -231,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

@@ -39,6 +39,11 @@ 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'}
     ]
@@ -81,7 +86,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: 'native feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
+      {title: 'Feature Highlight', tags: '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'}
@@ -117,10 +122,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', screen: 'unicorn.components.TabControllerScreen'},
+      {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
       {
         title: 'TabControllerWithStickyHeader',
-        tags: 'tabbar controller sticky header',
+        tags: 'tabbar controller native sticky header',
         screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'
       },
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
@@ -148,28 +153,28 @@ export const navigationData = {
     screens: [
       {
         title: 'KeyboardAwareScrollView',
-        tags: 'native KeyboardAwareScrollView',
+        tags: 'KeyboardAwareScrollView',
         screen: 'unicorn.components.KeyboardAwareScrollViewScreen'
       },
       {
         title: 'Dynamic Fonts',
-        tags: 'native dynamic fonts load download',
+        tags: 'dynamic fonts load download',
         screen: 'unicorn.nativeComponents.DynamicFontsScreen'
       },
       {
         title: 'Highlight Overlay',
-        tags: 'native native overlay',
+        tags: 'native overlay',
         screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
       },
       {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
       {
         title: 'KeyboardTracking (iOS)',
-        tags: 'native KeyboardTracking',
+        tags: 'KeyboardTracking',
         screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'
       },
       {
         title: 'KeyboardAccessoryView',
-        tags: 'native KeyboardInput',
+        tags: 'KeyboardInput',
         screen: 'unicorn.nativeComponents.KeyboardAccessoryViewScreen'
       }
     ]
@@ -178,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: {
@@ -193,13 +200,15 @@ 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: 'native touchable', screen: 'unicorn.incubator.TouchableOpacityScreen'},
+      {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'},
       {title: 'Gradient', tags: 'gradient', screen: 'unicorn.components.IncubatorGradientScreen'}
     ]
   },

package/src/screens/__tests__/AvatarScreen.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer, {act} from 'react-test-renderer';
+import renderer from 'react-test-renderer';
 
 describe('AvatarScreen', () => {
   let AvatarScreen;
@@ -9,14 +9,7 @@ describe('AvatarScreen', () => {
   });
 
   it('renders screen', () => {
-    let testRenderer;
-    act(() => {
-      testRenderer = renderer.create(<AvatarScreen/>);
-    });
-    const tree = testRenderer.toJSON();
+    const tree = renderer.create(<AvatarScreen/>).toJSON();
     expect(tree).toMatchSnapshot();
-    act(() => {
-      testRenderer.unmount();
-    });
   });
 });

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

@@ -1466,9 +1466,10 @@ exports[`AvatarScreen renders screen 1`] = `
             assetGroup="icons"
             onError={[Function]}
             onLoad={[Function]}
+            onLoadStart={[Function]}
             source={
               {
-                "uri": "https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg",
+                "uri": "https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg",
               }
             }
             style={

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

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

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

@@ -4,8 +4,8 @@ import _ from 'lodash';
 import {AnimatedImage, Colors} from 'react-native-ui-lib'; //eslint-disable-line
 
 const SampleImages = [
-  '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'
+  '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'
 ];
 
 export default class AnimatedImageScreen extends Component {

package/src/screens/componentScreens/AvatarsScreen.tsx

@@ -43,7 +43,7 @@ const examples = [
     size: 60,
     animate: true,
     imageProps: {animationDuration: 1000},
-    source: {uri: 'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'}
+    source: {uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'}
   },
   {
     title: 'Big pimple',

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} from 'react-native';
+import {StyleSheet, Animated, TextStyle} 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]]}>
+          <Text key={page} h1 animated style={[styles.animatedPageCounter, animatedStyles[page]] as TextStyle}>
             {page}
           </Text>
         ))}

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}