unicorn-demo-app 7.43.0 → 7.44.0-snapshot.7204

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.43.0",
+  "version": "7.44.0-snapshot.7204",
   "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/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,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 = {

package/src/screens/MenuStructure.js

@@ -86,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: '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 +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 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 +153,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'
       }
     ]
@@ -200,8 +200,7 @@ 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',

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/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/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/SortableListScreen.tsx

@@ -129,7 +129,7 @@ export default SortableListScreen;
 const styles = StyleSheet.create({
   itemContainer: {
     height: 52,
-    borderColor: Colors.$outlineDefault,
+    borderBottomColor: Colors.$outlineDefault,
     borderBottomWidth: 1
   },
   selectedItemContainer: {

package/src/screens/componentScreens/StackAggregatorScreen.tsx

@@ -68,7 +68,7 @@ export default class StackAggregatorScreen extends Component {
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}
           collapsed={false}
-          contentContainerStyle={{backgroundColor: Colors.red70}}
+          backgroundColor={Colors.red70}
           // itemBorderRadius={10}
           // buttonProps={{color: Colors.green30, labelStyle: {...Typography.text80, fontWeight: '500'}}}
         >

package/src/screens/componentScreens/TabControllerScreen/tab3.tsx

@@ -62,7 +62,7 @@ class Tab2 extends Component {
                   <Avatar
                     size={50}
                     source={{
-                      uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
+                      uri: 'https://images.pexels.com/photos/2529159/pexels-photo-2529159.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
                     }}
                   />
                   <Text text40 marginL-20>

package/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {FlatList} from 'react-native-gesture-handler';
+import {FlatList, GestureHandlerRootView} from 'react-native-gesture-handler';
 import {
   Assets,
   View,
@@ -147,7 +147,7 @@ class PanViewScreen extends Component {
   render() {
     const {showToast, showDialog} = this.state;
     return (
-      <View style={styles.root}>
+      <GestureHandlerRootView style={styles.root}>
         <View marginL-page height={50} centerV>
           <Text text50>New Pan View</Text>
         </View>
@@ -163,7 +163,7 @@ class PanViewScreen extends Component {
         </ScrollView>
         {showToast && this.renderToast()}
         {showDialog && this.renderDialog()}
-      </View>
+      </GestureHandlerRootView>
     );
   }
 }

package/src/screens/nativeComponentScreens/HighlightOverlayViewScreen.js

@@ -16,7 +16,10 @@ export default class HighlightOverlayViewScreen extends PureComponent {
   }
 
   componentDidMount() {
-    this.setState({showFTE: true});
+    // setting timeout to allow Android's transition animation to complete
+    setTimeout(() => {
+      this.setState({showFTE: true});
+    }, 1000);
   }
 
   onRefUpdated(ref) {

package/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx

@@ -23,6 +23,7 @@ export default class SafeAreaSpacerViewScreen extends PureComponent {
               <Text red50> SafeAreaSpacerView </Text>
               {'can be used as a BOTTOM or TOP spacer and will get the height of the safe area insets'}
             </Text>
+            <SafeAreaSpacerView style={{width: 100, backgroundColor: 'red'}}/>
           </View>
         </ScrollView>
         <View style={styles.topView}>