unicorn-demo-app 7.30.0 → 7.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.30.0",
+  "version": "7.31.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/screens/ExampleScreenPresenter.tsx

@@ -169,6 +169,7 @@ export function renderSliderOption(title: string,
       </Text>
       <View row centerV>
         <Slider
+          migrate
           testID={key}
           value={initial}
           containerStyle={{flex: 1}}

package/src/screens/MainScreen.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native';
 import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import {Navigation} from 'react-native-navigation';
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {
   Assets,
   Colors,
@@ -462,4 +461,4 @@ const styles = StyleSheet.create({
   searchResultsContainer: {paddingTop: 20}
 });
 
-export default gestureHandlerRootHOC(MainScreen);
+export default MainScreen;

package/src/screens/componentScreens/ColorSwatchScreen.tsx

@@ -60,22 +60,26 @@ export default class ColorSwatchScreen extends Component {
 
     return (
       <ScrollView>
-        <View flex center useSafeArea>
+        <View flex center paddingT-s5>
           <Text margin-5 text60>
             Single ColorSwatch
           </Text>
-          <View row>
+          <View row spread gap-15>
             <View>
               <ColorSwatch selected={selected} onPress={this.onPress}/>
             </View>
-            <View>
-              <ColorSwatch color={Colors.$backgroundMajorLight}/>
-              <Text text90R>Disabled</Text>
-            </View>
             <View>
               <ColorSwatch unavailable onPress={this.unavailableOnPress} color={Colors.yellow10}/>
               <Text text90R>Unavailable</Text>
             </View>
+            <View>
+              <ColorSwatch transparent/>
+              <Text text90R>Transparent</Text>
+            </View>
+            <View center>
+              <ColorSwatch style={{borderRadius: 0}} transparent/>
+              <Text text90R>Square</Text>
+            </View>
           </View>
 
           <Text marginT-20 text60>

package/src/screens/componentScreens/ConversationListScreen.js

@@ -2,11 +2,9 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, {Component, PureComponent} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line
 import conversations from '../../data/conversations';
 
-
 const collectionsIcon = require('../../assets/icons/collections.png');
 const starIcon = require('../../assets/icons/star.png');
 const shareIcon = require('../../assets/icons/share.png');
@@ -47,7 +45,7 @@ class ConversationListScreen extends Component {
           icon: collectionsIcon,
           background: Colors.blue30,
           onPress: () => Alert.alert(`Archive button pressed for item #${item.name}`)
-        },
+        }
       ];
       const leftButton = {
         text: 'Read',
@@ -94,19 +92,19 @@ class ConversationListScreen extends Component {
 
   addRef = (ref, index) => {
     this.refArray[index] = ref;
-  }
+  };
 
   onEndReached = () => {
     this.getNewItems();
-  }
+  };
 
   onSwipeableWillOpen = (props) => {
     this.closeLast(props.index);
-  }
+  };
 
   renderItem = ({item, index}) => {
-    return <ContactItem item={item} index={index} addRef={this.addRef} onSwipeableWillOpen={this.onSwipeableWillOpen}/>
-  }
+    return <ContactItem item={item} index={index} addRef={this.addRef} onSwipeableWillOpen={this.onSwipeableWillOpen}/>;
+  };
 
   keyExtractor = (item, index) => `${item.name}-${index}`;
 
@@ -128,7 +126,7 @@ class ContactItem extends PureComponent {
     index: PropTypes.number,
     addRef: PropTypes.func,
     onSwipeableWillOpen: PropTypes.func
-  }
+  };
 
   render() {
     const {item, index, addRef, onSwipeableWillOpen} = this.props;
@@ -192,4 +190,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default gestureHandlerRootHOC(ConversationListScreen);
+export default ConversationListScreen;

package/src/screens/componentScreens/DrawerScreen.tsx

@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
 import {Assets, Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib';
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import conversations from '../../data/conversations';
 
 import {renderBooleanOption, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
@@ -325,4 +324,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default gestureHandlerRootHOC(DrawerScreen);
+export default DrawerScreen;

package/src/screens/componentScreens/IconScreen.tsx

@@ -38,7 +38,7 @@ const IconScreen = () => {
       </View>
 
       {renderBooleanOption('Custom Size', 'customSize', {spread: false, state: customSize, setState: setCustomSize})}
-      <Slider maximumValue={100} value={24} step={1} onValueChange={setSize}/>
+      <Slider migrate maximumValue={100} value={24} step={1} onValueChange={setSize}/>
       <Text marginB-50 marginT-s2>
         Custom size: {size}
       </Text>
@@ -48,7 +48,7 @@ const IconScreen = () => {
         state: customBadgeSize,
         setState: setCustomBadgeSize
       })}
-      <Slider maximumValue={100} value={20} step={1} onValueChange={setBadgeSize}/>
+      <Slider migrate maximumValue={100} value={20} step={1} onValueChange={setBadgeSize}/>
       <Text marginB-50 marginT-s2>
         Custom badge size: {badgeSize}
       </Text>

package/src/screens/componentScreens/NumberInputScreen.tsx

@@ -1,6 +1,5 @@
 import React, {useState, useCallback, useRef, useMemo} from 'react';
 import {StyleSheet, TouchableWithoutFeedback, Keyboard as RNKeyboard} from 'react-native';
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {
   Text,
   Spacings,
@@ -200,7 +199,7 @@ const NumberInputScreen = () => {
   );
 };
 
-export default gestureHandlerRootHOC(NumberInputScreen);
+export default NumberInputScreen;
 
 const styles = StyleSheet.create({
   containerStyle: {

package/src/screens/componentScreens/PickerScreen.tsx

@@ -1,21 +1,21 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {ScrollView} from 'react-native-gesture-handler';
+import {ScrollView} from 'react-native';
 import {
-  View,
+  Assets,
   Colors,
-  Icon,
+  Typography,
   Incubator,
+  View,
   Text,
-  Picker,
+  Button,
+  Icon,
   Avatar,
-  Assets,
+  Picker,
   PanningProvider,
-  Typography,
   PickerProps,
   RenderCustomModalProps,
-  PickerMethods,
-  Button
+  PickerMethods
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import {longOptions} from './PickerScreenLongOptions';

package/src/screens/componentScreens/SortableListScreen.tsx

@@ -114,6 +114,7 @@ const SortableListScreen = () => {
         <SortableList
           flexMigration
           data={items}
+          // itemProps={{backgroundColor: 'transparent'}}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           onOrderChange={onOrderChange}

package/src/screens/componentScreens/StepperScreen.tsx

@@ -1,9 +1,15 @@
 import React, {Component} from 'react';
-import {View, Text, Stepper} from 'react-native-ui-lib'; //eslint-disable-line
+import {ScrollView} from 'react-native';
+import {View, Text, Stepper, type StepperType, Image} from 'react-native-ui-lib'; //eslint-disable-line
+import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
+
+const IMAGE_URL =
+  'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600&&dpr=1';
 
 export default class StepperScreen extends Component {
   state = {
-    stepperValue: 1
+    stepperValue: 1,
+    stepperType: 'default' as StepperType
   };
 
   stepperProps = {
@@ -17,73 +23,96 @@ export default class StepperScreen extends Component {
   };
 
   render() {
-    const {stepperValue} = this.state;
+    const {stepperValue, stepperType} = this.state;
 
     return (
-      <View padding-page>
-        <Text text40 $textDefault marginB-20>
-          Stepper
-        </Text>
+      <ScrollView>
+        <View padding-page>
+          <Text text40 $textDefault>
+            Stepper
+          </Text>
 
-        <View centerV>
-          <View row spread centerV>
-            <Text text70 $textDefault>
-              Default
-            </Text>
-            <Stepper/>
-          </View>
+          {renderMultipleSegmentOptions.call(this, 'Stepper Type', 'stepperType', [
+            {label: 'Default', value: 'default'},
+            {label: 'Floating', value: 'floating'}
+          ])}
 
-          <View row spread centerV marginT-30>
-            <Text text70 $textDefault>
-              Disabled
-            </Text>
-            <Stepper disabled/>
-          </View>
-
-          <View row spread marginT-30>
-            <Text text70 $textDefault>
-              Step (0.5)
-            </Text>
-            <Stepper step={0.5}/>
-          </View>
-
-          <View row spread marginT-30>
-            <Text text70 $textDefault>
-              Small
-            </Text>
-            <Stepper small/>
-          </View>
-
-          <View marginT-30>
+          <View centerV marginT-s3>
             <View row spread centerV>
               <Text text70 $textDefault>
-                Custom
+                Default
               </Text>
-              <Stepper
-                onValueChange={this.onValueChange}
-                maxValue={this.stepperProps.maxValue}
-                minValue={this.stepperProps.minValue}
-                value={stepperValue}
-                testID={'Stepper1'}
-              />
+              <Stepper type={stepperType}/>
             </View>
-            <View padding-5>
-              <Text text80M $textDefault>
-                Stepper value: {stepperValue}
-              </Text>
-              <Text $textDefault marginT-3>
-                Initial value: {this.stepperProps.value}
+
+            <View row spread centerV marginT-30>
+              <Text text70 $textDefault>
+                Disabled
               </Text>
-              <Text $textDefault marginT-3>
-                Min value: {this.stepperProps.minValue}
+              <Stepper disabled type={stepperType}/>
+            </View>
+
+            <View row spread marginT-30>
+              <Text text70 $textDefault>
+                Step (0.5)
               </Text>
-              <Text $textDefault marginT-3>
-                Max value: {this.stepperProps.maxValue}
+              <Stepper step={0.5} type={stepperType}/>
+            </View>
+
+            <View row spread marginT-30>
+              <Text text70 $textDefault>
+                Small
               </Text>
+              <Stepper small type={stepperType}/>
+            </View>
+
+            <View marginT-30>
+              <View row spread centerV>
+                <Text text70 $textDefault>
+                  Custom
+                </Text>
+                <Stepper
+                  type={stepperType}
+                  onValueChange={this.onValueChange}
+                  maxValue={this.stepperProps.maxValue}
+                  minValue={this.stepperProps.minValue}
+                  value={stepperValue}
+                  testID={'Stepper1'}
+                />
+              </View>
+              <View padding-5>
+                <Text text80M $textDefault>
+                  Stepper value: {stepperValue}
+                </Text>
+                <Text $textDefault marginT-3>
+                  Initial value: {this.stepperProps.value}
+                </Text>
+                <Text $textDefault marginT-3>
+                  Min value: {this.stepperProps.minValue}
+                </Text>
+                <Text $textDefault marginT-3>
+                  Max value: {this.stepperProps.maxValue}
+                </Text>
+              </View>
             </View>
           </View>
+
+          <View marginT-s5 centerH>
+            <Text text70BO marginB-s2>
+              Floating Stepper
+            </Text>
+            <Image
+              source={{uri: IMAGE_URL}}
+              style={{width: 200, height: 200, borderRadius: 8, overflow: 'hidden'}}
+              customOverlayContent={
+                <View style={{position: 'absolute', top: 8, right: 8}}>
+                  <Stepper type="floating"/>
+                </View>
+              }
+            />
+          </View>
         </View>
-      </View>
+      </ScrollView>
     );
   }
 }

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

@@ -11,7 +11,6 @@ import {
   TabControllerItemProps,
   TabControllerImperativeMethods
 } from 'react-native-ui-lib';
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 import Tab1 from './tab1';
 import Tab2 from './tab2';
@@ -224,7 +223,7 @@ class TabControllerScreen extends Component<{}, State> {
   }
 }
 
-export default gestureHandlerRootHOC(TabControllerScreen);
+export default TabControllerScreen;
 
 const styles = StyleSheet.create({
   labelStyle: {

package/src/screens/componentScreens/index.js

@@ -1,7 +1,4 @@
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-
 export function registerScreens(registrar) {
-
   registrar('unicorn.components.ActionSheetScreen', () => require('./ActionSheetScreen').default);
   registrar('unicorn.components.ActionBarScreen', () => require('./ActionBarScreen').default);
   registrar('unicorn.components.AvatarsScreen', () => require('./AvatarsScreen').default);
@@ -15,7 +12,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
   registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
   registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
-  registrar('unicorn.components.ColorPickerScreen', () => gestureHandlerRootHOC(require('./ColorPickerScreen').default));
+  registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
   registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
   registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
@@ -28,7 +25,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.GridListScreen', () => require('./GridListScreen').default);
-  registrar('unicorn.components.GridViewScreen', () => gestureHandlerRootHOC(require('./GridViewScreen').default));
+  registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
   registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
@@ -38,12 +35,12 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
   registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
   registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
-  registrar('unicorn.components.PickerScreen', () => gestureHandlerRootHOC(require('./PickerScreen').default));
+  registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
   registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
   registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
-  registrar('unicorn.components.SectionsWheelPickerScreen', () => gestureHandlerRootHOC(require('./SectionsWheelPickerScreen').default));
+  registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
@@ -55,7 +52,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
   registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
-  registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => gestureHandlerRootHOC(require('./TabControllerWithStickyHeaderScreen').default));
+  registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => require('./TabControllerWithStickyHeaderScreen').default);
   registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
   registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
   registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
@@ -63,7 +60,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.TourScreen', () => require('./TourScreen').default);
   registrar('unicorn.components.ViewScreen', () => require('./ViewScreen').default);
   registrar('unicorn.components.WizardScreen', () => require('./WizardScreen').default);
-  registrar('unicorn.components.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
+  registrar('unicorn.components.WheelPickerScreen', () => require('./WheelPickerScreen').default);
   // List Components
   registrar('unicorn.lists.BasicListScreen', () => require('./BasicListScreen').default);
   registrar('unicorn.lists.ContactsListScreen', () => require('./ContactsListScreen').default);
@@ -78,4 +75,3 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.WithScrollEnablerScreen', () => require('./WithScrollEnablerScreen').default);
   registrar('unicorn.components.WithScrollReachedScreen', () => require('./WithScrollReachedScreen').default);
 }
-

package/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
 import {Assets, Colors, View, Button, Text, Incubator} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter';
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 const {Toast} = Incubator;
 
@@ -180,7 +179,7 @@ class ToastsScreen extends Component {
   }
 }
 
-export default gestureHandlerRootHOC(ToastsScreen);
+export default ToastsScreen;
 
 const styles = StyleSheet.create({
   scrollView: {

package/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {GestureHandlerRootView, FlatList} from 'react-native-gesture-handler';
+import {FlatList} from 'react-native-gesture-handler';
 import {
   Assets,
   View,
@@ -147,7 +147,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>
@@ -163,7 +163,7 @@ class PanViewScreen extends Component {
         </ScrollView>
         {showToast && this.renderToast()}
         {showDialog && this.renderDialog()}
-      </GestureHandlerRootView>
+      </View>
     );
   }
 }

package/src/screens/incubatorScreens/index.js

@@ -1,12 +1,9 @@
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-
 export function registerScreens(registrar) {
   registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
-  registrar('unicorn.incubator.TouchableOpacityScreen', () =>
-    gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
+  registrar('unicorn.incubator.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);
   registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
-  registrar('unicorn.components.IncubatorSliderScreen', () => gestureHandlerRootHOC(require('./IncubatorSliderScreen').default));
+  registrar('unicorn.components.IncubatorSliderScreen', () => require('./IncubatorSliderScreen').default);
 }

package/src/screens/index.js

@@ -1,5 +1,3 @@
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-
 export function registerScreens(registrar) {
   // load demo app presets
   require('../configurations').loadDemoConfigurations();
@@ -11,7 +9,7 @@ export function registerScreens(registrar) {
   require('./incubatorScreens').registerScreens(registrar);
 
   registrar('unicorn.MainScreen', () => require('./MainScreen').default);
-  registrar('unicorn.PlaygroundScreen', () => gestureHandlerRootHOC(require('./PlaygroundScreen').default));
+  registrar('unicorn.PlaygroundScreen', () => require('./PlaygroundScreen').default);
   registrar('unicorn.Settings', () => require('./SettingsScreen').default);
 
 }

package/src/screens/realExamples/Pinterest/index.tsx

@@ -93,7 +93,7 @@ class Pinterest extends Component<{}, State> {
         activeScale={0.98}
         activeOpacity={1}
       >
-        <Image style={[styles.image, {aspectRatio: image.aspectRatio}]} source={{uri: image.uri}} width={COLUMN_SIZE}/>
+        <Image style={[styles.image, {aspectRatio: image?.aspectRatio}]} source={{uri: image.uri}} width={COLUMN_SIZE}/>
         <View absF bottom right pointerEvents="none" padding-s2>
           <Button
             iconSource={Assets.icons.demo.plus}

package/src/screens/realExamples/index.js

@@ -1,11 +1,7 @@
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-
 export function registerScreens(registrar) {
   registrar('unicorn.examples.AppleMusic', () => require('./AppleMusic').default);
-  registrar('unicorn.examples.Pinterest', () =>
-    gestureHandlerRootHOC(require('./Pinterest').default));
-  registrar('unicorn.examples.ListActionsScreen',
-    () => require('./ListActions/ListActionsScreen').default);
+  registrar('unicorn.examples.Pinterest', () => require('./Pinterest').default);
+  registrar('unicorn.examples.ListActionsScreen', () => require('./ListActions/ListActionsScreen').default);
   registrar('unicorn.examples.ProductPage', () => require('./ProductPage').default);
   registrar('unicorn.examples.Twitter', () => require('./Twitter').default);
 }