Merge branch 'master' of https://github.com/wix/react-native-ui-lib into release

Author: Inbal-Tish

.nvmrc

@@ -1 +1 @@
-16
+20

demo/src/assets/Assets.ts

@@ -0,0 +1,25 @@
+import {Assets} from 'react-native-ui-lib';
+Assets.loadAssetsGroup('icons.demo', {
+  chevronDown: require('./icons/chevronDown.png'),
+  chevronRight: require('./icons/chevronRight.png'),
+  add: require('./icons/add.png'),
+  camera: require('./icons/cameraSelected.png'),
+  close: require('./icons/close.png'),
+  dashboard: require('./icons/dashboard.png'),
+  drag: require('./icons/drag.png'),
+  image: require('./icons/image.png'),
+  plus: require('./icons/plus.png'),
+  refresh: require('./icons/refresh.png'),
+  search: require('./icons/search.png'),
+  settings: require('./icons/settings.png'),
+  share: require('./icons/share.png')
+});
+
+Assets.loadAssetsGroup('images.demo', {
+  brokenImage: require('./images/placeholderMissingImage.png')
+});
+
+Assets.loadAssetsGroup('svgs.demo', {
+  logo: require('./svgs/headerLogo.svg').default
+});
+export default Assets as typeof Assets;

demo/src/configurations.js

@@ -1,30 +1,7 @@
-import {Assets, Colors, Typography, Spacings, Incubator} from 'react-native-ui-lib'; // eslint-disable-line
+import {Colors, Typography, Spacings, TextField} from 'react-native-ui-lib'; // eslint-disable-line
 
 export const loadDemoConfigurations = () => {
-  Assets.loadAssetsGroup('icons.demo', {
-    chevronDown: require('./assets/icons/chevronDown.png'),
-    chevronRight: require('./assets/icons/chevronRight.png'),
-    add: require('./assets/icons/add.png'),
-    camera: require('./assets/icons/cameraSelected.png'),
-    close: require('./assets/icons/close.png'),
-    dashboard: require('./assets/icons/dashboard.png'),
-    drag: require('./assets/icons/drag.png'),
-    image: require('./assets/icons/image.png'),
-    plus: require('./assets/icons/plus.png'),
-    refresh: require('./assets/icons/refresh.png'),
-    search: require('./assets/icons/search.png'),
-    settings: require('./assets/icons/settings.png'),
-    share: require('./assets/icons/share.png')
-  });
-
-  Assets.loadAssetsGroup('images.demo', {
-    brokenImage: require('./assets/images/placeholderMissingImage.png')
-  });
-
-  Assets.loadAssetsGroup('svgs.demo', {
-    logo: require('./assets/svgs/headerLogo.svg').default
-  });
-
+  require('./assets/Assets');
   Typography.loadTypographies({
     h1: {...Typography.text40},
     h2: {...Typography.text50},
@@ -56,5 +33,5 @@ export const loadDemoConfigurations = () => {
   });
 
   /* Components */
-  Incubator.TextField.defaultProps = {...Incubator.TextField.defaultProps, preset: 'default'};
+  TextField.defaultProps = {...TextField.defaultProps, preset: TextField.presets.UNDERLINE};
 };

demo/src/screens/componentScreens/DrawerScreen.tsx

@@ -1,8 +1,9 @@
 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 {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 Assets from '../../assets/Assets';
 
 import {renderBooleanOption, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
 

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -1,8 +1,9 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert, ViewStyle} from 'react-native';
-import {Colors, View, Text, Hint, Button, Assets, Incubator} from 'react-native-ui-lib';
+import {Colors, View, Text, Hint, Button, Incubator} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption} from '../ExampleScreenPresenter';
+import Assets from '../../assets/Assets';
 
 const settingsIcon = require('../../assets/icons/settings.png');
 const reactions = ['❤️', '😮', '😔', '😂', '😡'];

demo/src/screens/componentScreens/ImageScreen.tsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Icon, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
+import {View, Text, Icon, Image, Colors, OverlayTypes} from 'react-native-ui-lib';
 import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
+import Assets from '../../assets/Assets';
 
 const IMAGE_URL =
   'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
@@ -69,7 +70,8 @@ class ImageScreen extends Component<{}, State> {
     showErrorImage: false,
     showSvg: false,
     svgType: SvgType.File,
-    sizeType: SizeType.None
+    sizeType: SizeType.None,
+    borderRadius: 0
   };
 
   getSvgSource() {
@@ -112,7 +114,7 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderImage() {
-    const {cover, overlayType, overlayIntensity, margin, showErrorImage} = this.state;
+    const {cover, overlayType, overlayIntensity, margin, showErrorImage, borderRadius} = this.state;
     return (
       <Image
         key={`${overlayType}-${overlayIntensity}`}
@@ -126,6 +128,7 @@ class ImageScreen extends Component<{}, State> {
         height={!cover ? DEFAULT_SIZE : undefined}
         customOverlayContent={this.renderOverlayContent()}
         {...{[`margin-${margin}`]: true}}
+        borderRadius={borderRadius}
       />
     );
   }
@@ -156,6 +159,7 @@ class ImageScreen extends Component<{}, State> {
           {renderRadioGroup.call(this, 'Overlay Intensity', 'overlayIntensity', Image.overlayIntensityType)}
         </View>
         {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
+        {renderSliderOption.call(this, 'Border Radius', 'borderRadius', {step: 5, min: 0, max: 100})}
       </>
     );
   }

demo/src/screens/componentScreens/ModalScreen.tsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet} from 'react-native';
 import {Navigation} from 'react-native-navigation';
-import {Colors, Carousel, PageControl, Modal, View, Text, Assets} from 'react-native-ui-lib'; // eslint-disable-line
+import {Colors, Carousel, PageControl, Modal, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
+import Assets from '../../assets/Assets';
 
 const BUTTONS_HIT_SLOP = {right: 5, left: 5, top: 10, bottom: 10};
 interface ModalScreenProps {

demo/src/screens/componentScreens/SortableGridListScreen.tsx

@@ -100,6 +100,7 @@ class SortableGridListScreen extends Component {
         </View>
         <View flex>
           <SortableGridList
+            flexMigration
             data={items}
             renderItem={this.renderItem}
             // numColumns={2}

demo/src/screens/componentScreens/SortableListScreen.tsx

@@ -8,10 +8,10 @@ import {
   TouchableOpacity,
   Text,
   Icon,
-  Assets,
   Colors,
   Button
 } from 'react-native-ui-lib';
+import Assets from '../../assets/Assets';
 import {renderHeader} from '../ExampleScreenPresenter';
 
 interface Item extends SortableListItemProps {
@@ -112,6 +112,7 @@ const SortableListScreen = () => {
       </View>
       <View flex useSafeArea>
         <SortableList
+          flexMigration
           data={items}
           renderItem={renderItem}
           keyExtractor={keyExtractor}

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

@@ -2,7 +2,6 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {
-  Assets,
   TabController,
   Colors,
   View,
@@ -12,6 +11,7 @@ import {
   TabControllerImperativeMethods
 } from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
+import Assets from '../../../assets/Assets';
 
 import Tab1 from './tab1';
 import Tab2 from './tab2';