unicorn-demo-app 6.1.2 → 6.2.0

package/package.json

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

package/src/index.js

@@ -66,6 +66,9 @@ module.exports = {
       get HintsScreen() {
         return require('./screens/componentScreens/HintsScreen').default;
       },
+      get IconScreen() {
+        return require('./screens/componentScreens/IconScreen').default;
+      },
       get ImageScreen() {
         return require('./screens/componentScreens/ImageScreen').default;
       },
@@ -235,10 +238,10 @@ module.exports = {
         return require('./screens/realExamples/ListActions/ListActionsScreen').default;
       },
       get ProductPage() {
-        return require('./screens/realExamples/ProductPage');
+        return require('./screens/realExamples/ProductPage').default;
       },
       get Twitter() {
-        return require('./screens/realExamples/Twitter');
+        return require('./screens/realExamples/Twitter').default;
       },
       // wrapperScreens
       get TouchableOpacityScreen() {

package/src/screens/MenuStructure.js

@@ -33,6 +33,7 @@ export const navigationData = {
       {title: 'Connection Status Bar', tags: 'connection status bar', screen: 'unicorn.components.ConnectionStatusBar'},
       {title: 'Chip', tags: 'chip', screen: 'unicorn.components.ChipScreen'},
       {title: 'ExpandableSection', tags: 'expandable section', screen: 'unicorn.components.ExpandableSectionScreen'},
+      {title: 'Icon', tags: 'image icon assets', screen: 'unicorn.components.IconScreen'},
       // {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
       {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},

package/src/screens/componentScreens/CarouselScreen.tsx

@@ -36,6 +36,7 @@ interface State {
 
 class CarouselScreen extends Component<Props, State> {
   carousel = React.createRef<typeof Carousel>();
+  private dimensionsChangeListener: any;
 
   constructor(props: Props) {
     super(props);
@@ -51,11 +52,11 @@ class CarouselScreen extends Component<Props, State> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChange);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChange);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChange);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChange);
   }
 
   onOrientationChange = () => {
@@ -116,7 +117,6 @@ class CarouselScreen extends Component<Props, State> {
           pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
           // showCounter
           allowAccessibleLayout
-          loop
         >
           {_.map([...Array(numberOfPagesShown)], (item, index) => (
             <Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>

package/src/screens/componentScreens/IconScreen.tsx

@@ -0,0 +1,43 @@
+import React, {useState} from 'react';
+import {Assets, View, Icon, Text, Slider, Switch, GradientSlider} from 'react-native-ui-lib';
+
+const IconScreen = () => {
+  const [size, setSize] = useState(24);
+  const [customSize, setCustomSize] = useState(false);
+  const [color, setColor] = useState<string | number>();
+  const [customColor, setCustomColor] = useState(false);
+
+  return (
+    <View padding-page>
+      <Text h1 marginB-s4>
+        Icon Screen
+      </Text>
+      <View center>
+        <Icon
+          margin-30
+          size={customSize ? size : undefined}
+          tintColor={customColor ? color as string : undefined}
+          source={Assets.icons.search}
+        />
+      </View>
+
+      <View marginB-s3 row>
+        <Text marginR-s2>Custom Size</Text>
+        <Switch value={customSize} onValueChange={setCustomSize}/>
+      </View>
+      <Slider maximumValue={100} value={24} step={1} onValueChange={setSize}/>
+      <Text marginB-50 marginT-s2>
+        Custom size: {size}
+      </Text>
+
+      <View marginB-s3 row>
+        <Text marginR-s2>Custom Color</Text>
+        <Switch value={customColor} onValueChange={setCustomColor}/>
+      </View>
+      <GradientSlider type={GradientSlider.types.HUE} color={color as string} onValueChange={setColor}/>
+      <Text marginT-s2>Custom color: {color || '#000000'}</Text>
+    </View>
+  );
+};
+
+export default IconScreen;

package/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -102,6 +102,7 @@ const SectionsWheelPickerScreen = () => {
         <SegmentedControl
           segments={[{label: '1 section'}, {label: '2 sections'}, {label: '3 sections'}]}
           onChangeIndex={onChangeIndex}
+          throttleTime={400}
         />
         <Text text50 marginV-20>
           Pick a duration

package/src/screens/componentScreens/index.js

@@ -20,6 +20,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
   registrar('unicorn.components.HapticScreen', () => require('./HapticScreen').default);
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
+  registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);

package/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -80,7 +80,7 @@ class PanViewScreen extends Component {
           <PanView
             directions={[PanView.directions.DOWN]}
             dismissible
-            springBack
+            animateToOrigin
             // threshold={{y: 10}}
             containerStyle={styles.panView}
             onDismiss={this.onDialogDismissed}
@@ -113,7 +113,7 @@ class PanViewScreen extends Component {
       <PanView
         directions={[PanView.directions.LEFT, PanView.directions.DOWN, PanView.directions.RIGHT]}
         dismissible
-        springBack
+        animateToOrigin
         directionLock
         threshold={{y: 10}}
         containerStyle={styles.panView}