unicorn-demo-app 7.43.0-snapshot.7091 → 7.43.0-snapshot.7142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.43.0-snapshot.7091",
+  "version": "7.43.0-snapshot.7142",
   "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.76.9",
+    "react-native": "^0.71.2",
     "react-native-ui-lib": "*",
     "semver": "^5.5.0"
   }

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

@@ -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'}
     ]
@@ -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: {
@@ -194,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/__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/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}