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

Author: Inbal-Tish

.gitignore

@@ -66,7 +66,6 @@ dist
 dist-ts
 package-lock.json
 docs/components/**
-scripts/token.js
 
 # Ruby / CocoaPods
 /ios/Pods/

Gemfile.lock

@@ -72,26 +72,28 @@ GEM
     nap (1.1.0)
     netrc (0.11.0)
     public_suffix (4.0.7)
-    rexml (3.2.5)
+    rexml (3.3.6)
+      strscan
     ruby-macho (2.5.1)
+    strscan (3.1.0)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    xcodeproj (1.22.0)
+    xcodeproj (1.25.0)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
-      rexml (~> 3.2.4)
+      rexml (>= 3.3.2, < 4.0)
     zeitwerk (2.6.11)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  cocoapods (~> 1.11, >= 1.11.3)
+  cocoapods (>= 1.11.3)
 
 RUBY VERSION
    ruby 2.7.6p219

demo/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}}

demo/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;

demo/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>

demo/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;

demo/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;

demo/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>

demo/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: {

demo/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';

demo/src/screens/componentScreens/SortableListScreen.tsx

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