unicorn-demo-app 7.43.0-snapshot.7095 → 7.43.0-snapshot.7143

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.43.0-snapshot.7095",
+  "version": "7.43.0-snapshot.7143",
   "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/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 = {
@@ -98,6 +99,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;
       },

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'}
     ]

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

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

package/src/screens/componentScreens/SharedTransitionScreen.js

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

package/src/screens/componentScreens/SortableListScreen.tsx

@@ -129,7 +129,7 @@ export default SortableListScreen;
 const styles = StyleSheet.create({
   itemContainer: {
     height: 52,
-    borderBottomColor: Colors.$outlineDefault,
+    borderColor: 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}
-          backgroundColor={Colors.red70}
+          contentContainerStyle={{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://images.pexels.com/photos/2529159/pexels-photo-2529159.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+                      uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
                     }}
                   />
                   <Text text40 marginL-20>

package/src/screens/componentScreens/index.js

@@ -42,6 +42,7 @@ 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/nativeComponentScreens/HighlightOverlayViewScreen.js

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