unicorn-demo-app 6.7.1 → 6.8.1

package/package.json

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

package/src/screens/MainScreen.js

@@ -11,7 +11,7 @@ import {
   View,
   Text,
   TouchableOpacity,
-  Image,
+  Icon,
   Button,
   TabController,
   Incubator
@@ -180,7 +180,7 @@ class MainScreen extends Component {
           filterText ? (
             <Button link iconSource={Assets.icons.demo.close} grey10 onPress={this.clearSearch}/>
           ) : (
-            <Image source={Assets.icons.demo.search}/>
+            <Icon source={Assets.icons.demo.search}/>
           )
         }
       />
@@ -210,7 +210,7 @@ class MainScreen extends Component {
           <Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>
             {item.title}
           </Text>
-          <Image source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
+          <Icon source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
         </TouchableOpacity>
       );
     } else {

package/src/screens/MenuStructure.js

@@ -153,11 +153,11 @@ export const navigationData = {
   Incubator: {
     title: 'Incubator (Experimental)',
     screens: [
-      {title: '(New) ChipsInput', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
+      {title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
-      {title: '(New) Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
-      {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
-      {title: '(New) Toast', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
+      {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
+      {title: 'TextField (New)', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
+      {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {title: 'ExpandableOverlay', tags: 'text field expandable input picker', screen: 'unicorn.components.IncubatorExpandableOverlayScreen'},
       {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},
       {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'},

package/src/screens/componentScreens/ImageScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
+import {View, Text, Icon, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
 import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
 
 const IMAGE_URL =
@@ -94,7 +94,7 @@ class ImageScreen extends Component<{}, State> {
         return (
           <View padding-20 flex bottom={overlayType === Image.overlayTypes.BOTTOM}>
             <View row centerV>
-              <Image
+              <Icon
                 style={{margin: 5, marginRight: 10}}
                 source={Assets.icons.demo.camera}
                 tintColor={overlayType !== 'none' ? Colors.white : undefined}
@@ -106,7 +106,7 @@ class ImageScreen extends Component<{}, State> {
           </View>
         );
       } else {
-        return <Image style={{margin: 5}} source={Assets.icons.demo.camera}/>;
+        return <Icon style={{margin: 5}} source={Assets.icons.demo.camera}/>;
       }
     }
   }

package/src/screens/componentScreens/PickerScreen.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {ScrollView, Image} from 'react-native';
-import {View, Colors, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
+import {ScrollView} from 'react-native';
+import {View, Colors, Icon, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import tagIcon from '../../assets/icons/tags.png';
 import dropdown from '../../assets/icons/chevronDown.png';
@@ -172,7 +172,7 @@ export default class PickerScreen extends Component {
             renderPicker={({label}) => {
               return (
                 <View row>
-                  <Image style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
+                  <Icon style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
                   <Text grey10 text80>
                     {label} Posts
                   </Text>
@@ -225,7 +225,7 @@ export default class PickerScreen extends Component {
                         {item.name}
                       </Text>
                     </View>
-                    {props.isSelected && <Image source={Assets.icons.check}/>}
+                    {props.isSelected && <Icon source={Assets.icons.check}/>}
                   </View>
                 )}
                 getItemLabel={item => item.name}

package/src/screens/componentScreens/SliderScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Text, Image, Slider, GradientSlider, ColorSliderGroup} from 'react-native-ui-lib';
+import {Colors, View, Text, Icon, Slider, GradientSlider, ColorSliderGroup, Constants} from 'react-native-ui-lib';
 
 const INITIAL_VALUE = 0;
 const COLOR = Colors.blue30;
@@ -28,15 +28,15 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
 
   onSliderValueChange = (value: number) => {
     this.setState({sliderValue: value});
-  }
+  };
 
   onGradientValueChange = (value: string, alpha: number) => {
     this.setState({color: value, alpha});
-  }
+  };
 
   onGroupValueChange = (value: string) => {
     console.warn('onGroupValueChange: ', value);
-  }
+  };
 
   render() {
     const {color, alpha, sliderValue} = this.state;
@@ -44,56 +44,61 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
     return (
       <ScrollView showsVerticalScrollIndicator={false}>
         <View flex padding-20>
-          <Text titleHuge marginB-20>Sliders</Text>
-          
-          <View row centerV>
-            <Image assetName={'megaphone'} style={styles.image}/>
-            <Slider 
-              onValueChange={this.onSliderValueChange} 
+          <Text titleHuge marginB-20>
+            Sliders
+          </Text>
+
+          <View row centerV style={Constants.isRTL && styles.ltr}>
+            <Icon assetName={'search'} style={styles.image}/>
+            <Slider
+              onValueChange={this.onSliderValueChange}
               value={INITIAL_VALUE}
-              minimumValue={0} 
-              maximumValue={100} 
-              step={1} 
+              minimumValue={0}
+              maximumValue={100}
+              step={1}
               containerStyle={styles.sliderContainer}
+              disableRTL
             />
-            <Text bodySmall grey30 style={styles.text}>{sliderValue}%</Text>
+            <Text bodySmall grey30 style={styles.text}>
+              {sliderValue}%
+            </Text>
           </View>
-          
+
           <Text marginT-30>Negatives</Text>
-          <Slider 
-            minimumValue={-100} 
-            maximumValue={100} 
-            value={-30} 
+          <Slider
+            minimumValue={-100}
+            maximumValue={100}
+            value={-30}
             minimumTrackTintColor={Colors.red30}
             thumbTintColor={Colors.red50}
             containerStyle={styles.slider}
           />
-          <Slider 
-            minimumValue={-300} 
-            maximumValue={-100} 
-            value={-130} 
+          <Slider
+            minimumValue={-300}
+            maximumValue={-100}
+            value={-130}
             minimumTrackTintColor={Colors.red30}
             thumbTintColor={Colors.red50}
             containerStyle={styles.slider}
           />
 
           <Text marginT-20>Disabled</Text>
-          <Slider 
-            minimumValue={100} 
-            maximumValue={200} 
-            value={120} 
+          <Slider
+            minimumValue={100}
+            maximumValue={200}
+            value={120}
             minimumTrackTintColor={Colors.red30}
             thumbTintColor={Colors.green30}
             containerStyle={styles.slider}
             disabled
           />
-          
+
           <Text marginT-15>Custom with Steps</Text>
-          <Slider 
-            value={50} 
-            minimumValue={0} 
-            maximumValue={100} 
-            step={25} 
+          <Slider
+            value={50}
+            minimumValue={0}
+            maximumValue={100}
+            step={25}
             containerStyle={styles.slider}
             trackStyle={styles.track}
             thumbStyle={styles.thumb}
@@ -105,10 +110,12 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
 
           <Text marginT-15>Gradient Sliders</Text>
           <View row centerV>
-            <Text text90 grey30>DEFAULT</Text>
-            <GradientSlider 
-              color={color} 
-              containerStyle={styles.gradientSliderContainer} 
+            <Text text90 grey30>
+              DEFAULT
+            </Text>
+            <GradientSlider
+              color={color}
+              containerStyle={styles.gradientSliderContainer}
               onValueChange={this.onGradientValueChange}
             />
             <View style={styles.box}>
@@ -116,25 +123,29 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
             </View>
           </View>
           <View row centerV>
-            <Text text90 grey30>HUE</Text>
-            <GradientSlider 
-              type={GradientSlider.types.HUE} 
-              color={COLOR} 
-              containerStyle={styles.gradientSliderContainer} 
+            <Text text90 grey30>
+              HUE
+            </Text>
+            <GradientSlider
+              type={GradientSlider.types.HUE}
+              color={COLOR}
+              containerStyle={styles.gradientSliderContainer}
               onValueChange={this.onGradientValueChange}
             />
             <View style={styles.box}>
               <View style={{flex: 1, backgroundColor: color}}/>
             </View>
           </View>
-        
-          <Text marginT-25 marginB-20>Color Slider Group</Text>
-          <ColorSliderGroup 
-            initialColor={color} 
+
+          <Text marginT-25 marginB-20>
+            Color Slider Group
+          </Text>
+          <ColorSliderGroup
+            initialColor={color}
             sliderContainerStyle={styles.slider}
             containerStyle={styles.group}
             showLabels
-            // onValueChange={this.onGroupValueChange} 
+            // onValueChange={this.onGroupValueChange}
           />
         </View>
       </ScrollView>
@@ -143,6 +154,9 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
 }
 
 const styles = StyleSheet.create({
+  ltr: {
+    flexDirection: 'row-reverse'
+  },
   image: {
     tintColor: Colors.grey30
   },
@@ -165,23 +179,23 @@ const styles = StyleSheet.create({
     height: 2
   },
   thumb: {
-    width: 26, 
-    height: 26, 
-    borderRadius: 13, 
-    borderColor: Colors.violet40, 
-    borderWidth: 1, 
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    borderColor: Colors.violet40,
+    borderWidth: 1,
     shadowColor: Colors.white
   },
   activeThumb: {
-    width: 40, 
-    height: 40, 
+    width: 40,
+    height: 40,
     borderRadius: 20
   },
   box: {
-    width: 20, 
+    width: 20,
     height: 20,
     borderRadius: 4,
-    borderWidth: 1, 
+    borderWidth: 1,
     borderColor: Colors.grey60
   },
   group: {

package/src/screens/componentScreens/ToastsScreen.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Assets, Colors, View, Button, Text, Image, TouchableOpacity, Toast} from 'react-native-ui-lib';
+import {Assets, Colors, View, Button, Text, Icon, TouchableOpacity, Toast} from 'react-native-ui-lib';
 
 
 const colors = [Colors.green30, Colors.red30, Colors.violet30];
@@ -34,7 +34,7 @@ export default class ToastsScreen extends Component {
           return (
             <TouchableOpacity key={color} onPress={() => this.setState({selectedColor: color})}>
               <View center style={[styles.color, {backgroundColor}, isSelected && styles.selected]}>
-                {color === 'none' && <Image source={plusIcon} tintColor={Colors.black}/>}
+                {color === 'none' && <Icon source={plusIcon} tintColor={Colors.black}/>}
               </View>
             </TouchableOpacity>
           );

package/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -11,7 +11,7 @@ import {
   Constants,
   Modal,
   BorderRadiuses,
-  Image,
+  Icon,
   TouchableOpacity
 } from 'react-native-ui-lib';
 const {PanView} = Incubator;
@@ -157,7 +157,7 @@ class PanViewScreen extends Component {
             <Text text50 marginB-s2>
               Scrollable
             </Text>
-            <Image source={Assets.icons.demo.chevronDown}/>
+            <Icon source={Assets.icons.demo.chevronDown}/>
           </View>
         </ScrollView>
         {showToast && this.renderToast()}

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

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {Assets, View, Text, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
+import {Assets, View, Text, Icon, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
 import _ from 'lodash';
 
 const colorOptions: {[key: string]: {name: string; color: string}} = {
@@ -40,7 +40,7 @@ class Product extends Component {
     return (
       <ScrollView>
         <View>
-          <Image
+          <Icon
             style={{position: 'absolute', top: 10, right: 10, zIndex: 100, tintColor: Colors.white}}
             source={Assets.icons.demo.share}
           />