Merge branch 'master' into release

Author: ethanshar

README.md

@@ -19,8 +19,10 @@ Check out our [Docs](https://wix.github.io/react-native-ui-lib/). <br>
 Our [Discord Channel](https://discord.gg/2eW4g6Z)
 
 Download our Expo demo app <br>
-<img height="120" src="https://user-images.githubusercontent.com/1780255/76164023-f2171400-6153-11ea-962d-d57b64a08a80.png"> <br>
+<img height="120" src="https://qr.expo.dev/expo-go?owner=vn.chemgio&slug=rnuilib&releaseChannel=default&host=exp.host"> <br>
 (You will need the Expo App)
+or open link in your devices
+[expo ] [exp://exp.host/@vn.chemgio/rnuilib?release-channel=default](exp://exp.host/@vn.chemgio/rnuilib?release-channel=default)
 
 ## Installing
 

demo/package.json

@@ -16,7 +16,7 @@
     "demoRelease": "node ./scripts/demoRelease.js"
   },
   "devDependencies": {
-    "react-native-ui-lib": "*",
+    "react-native-ui-lib": "7.1.0",
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {

demo/src/index.js

@@ -198,6 +198,9 @@ module.exports = {
       get ColorsScreen() {
         return require('./screens/foundationScreens/ColorsScreen').default;
       },
+      get DarkMode() {
+        return require('./screens/foundationScreens/DarkModeScreen').default;
+      },
       get TypographyScreen() {
         return require('./screens/foundationScreens/TypographyScreen').default;
       },
@@ -214,10 +217,40 @@ module.exports = {
       get ProgressBarScreen() {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },
+      get ScrollBar() {
+        return require('./screens/componentScreens/ScrollBarScreen').default;
+      },
+      get Marquee() {
+        return require('./screens/componentScreens/MarqueeScreen').default;
+      },
+      get NumberInput() {
+        return require('./screens/componentScreens/NumberInputScreen').default;
+      },
+      get WheelPicker() {
+        return require('./screens/componentScreens/WheelPickerScreen').default;
+      },
+      get GridList() {
+        return require('./screens/componentScreens/GridListScreen').default;
+      },
+      get SortableGridList() {
+        return require('./screens/componentScreens/SortableGridListScreen').default;
+      },
       // Incubator
       get PanViewScreen() {
         return require('./screens/incubatorScreens/PanViewScreen').default;
       },
+      get IncubatorSlider() {
+        return require('./screens/incubatorScreens/IncubatorSliderScreen').default;
+      },
+      get IncubatorDialog() {
+        return require('./screens/incubatorScreens/IncubatorDialogScreen').default;
+      },
+      get IncubatorToast() {
+        return require('./screens/incubatorScreens/IncubatorToastScreen').default;
+      },
+      get IncubatorExpandableOverlay() {
+        return require('./screens/incubatorScreens/IncubatorExpandableOverlayScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;
@@ -237,6 +270,30 @@ module.exports = {
       // wrapperScreens
       get TouchableOpacityScreen() {
         return require('./screens/componentScreens/TouchableOpacityScreen').default;
+      },
+      get Modal() {
+        return require('./screens/componentScreens/ModalScreen').default;
+      },
+      get Timeline() {
+        return require('./screens/componentScreens/TimelineScreen').default;
+      },
+      get WithScrollEnabler() {
+        return require('./screens/componentScreens/WithScrollEnablerScreen').default;
+      },
+      get WithScrollReached() {
+        return require('./screens/componentScreens/WithScrollReachedScreen').default;
+      },
+      get Fader() {
+        return require('./screens/componentScreens/FaderScreen').default;
+      },
+      get GridView() {
+        return require('./screens/componentScreens/GridViewScreen').default;
+      },
+      get Playground() {
+        return require('./screens/PlaygroundScreen').default;
+      },
+      get KeyboardAwareScrollView() {
+        return require('./screens/componentScreens/KeyboardAwareScrollViewScreen').default;
       }
     };
   },

demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -6,9 +6,9 @@ import {renderBooleanOption} from '../ExampleScreenPresenter';
 const VALUE = 20;
 const NEGATIVE_VALUE = -30;
 const MIN = 0;
-const MAX = 100;
-const INITIAL_MIN = 10;
-const INITIAL_MAX = 70;
+const MAX = Constants.screenWidth - 40; // horizontal margins 20
+const INITIAL_MIN = 30;
+const INITIAL_MAX = 270;
 
 const IncubatorSliderScreen = () => {
   const [disableRTL, setDisableRTL] = useState<boolean>(false);
@@ -161,7 +161,6 @@ const IncubatorSliderScreen = () => {
           <Incubator.Slider
             ref={rangeSlider}
             useRange
-            useGap
             onRangeChange={onRangeChange}
             minimumValue={MIN}
             maximumValue={MAX}

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

@@ -77,13 +77,12 @@ class Product extends Component {
               migrate
               value={selectedColor}
               onChange={(value: string) => this.setState({selectedColor: value})}
-              rightIconSource={{}}
-              rightIconStyle={{
+              trailingAccessory={<Icon {...{
                 width: 24,
                 height: 24,
                 backgroundColor: colorOptions[selectedColor].color,
                 borderRadius: 12
-              }}
+              }} />}
             >
               {_.map(colorOptions, (colorOption, colorKey) => {
                 return <Picker.Item key={colorKey} value={colorKey} label={colorOption.name}/>;

docs/foundation/colors.md

@@ -49,7 +49,7 @@ All the design tokens and their mapping in light mode can be found [here](https:
 Adding or overriding your own design tokens can be done by using the [loadSchemes](https://wix.github.io/react-native-ui-lib/docs/foundation/colors#loadschemes) method.
 To generate the design tokens, based on your app primary color and load them automatically into the `Colors` object, use:
 ```javascript
-Colros.loadDesignTokens({primaryColor: <your primary color>});
+Colors.loadDesignTokens({primaryColor: <your primary color>});
 ```
 This method will update all the `primary` tokens to be based on your app primary color, both in light and dark mode.
 

expoDemo/app.json

@@ -7,7 +7,7 @@
     "privacy": "public",
     "description": "Demo project show case for react-native-ui-lib components",
     "githubUrl": "https://github.com/wix/react-native-ui-lib",
-    "version": "2.0.0",
+    "version": "7.1.0",
     "orientation": "portrait",
     "icon": "https://user-images.githubusercontent.com/1780255/107911939-34e98a80-6f66-11eb-91a6-1eb1b384e429.png",
     "splash": {

expoDemo/metro.config.js

@@ -0,0 +1,28 @@
+const {getDefaultConfig} = require('@expo/metro-config');
+
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+module.exports = (async () => {
+  const {
+    resolver: {sourceExts, assetExts}
+  } = await getDefaultConfig(__dirname);
+  return {
+    transformer: {
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false
+        }
+      }),
+      babelTransformerPath: require.resolve('react-native-svg-transformer')
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg']
+    }
+  };
+})();

expoDemo/package.json

@@ -1,5 +1,4 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -8,30 +7,35 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native/normalize-color": "^2.0.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/stack": "^6.0.13",
-    "expo": "^46.0.0",
-    "expo-status-bar": "~1.4.0",
+    "@expo/metro-config": "^0.7.1",
+    "@react-native/normalize-color": "^2.1.0",
+    "@react-navigation/native": "^6.1.5",
+    "@react-navigation/stack": "^6.3.15",
+    "expo": "^48.0.4",
+    "expo-status-bar": "~1.4.4",
     "fuzzysearch": "^1.0.3",
     "lodash": "^4.17.21",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.6",
-    "react-native-gesture-handler": "~2.5.0",
-    "react-native-reanimated": "~2.9.1",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-screens": "~3.15.0",
-    "react-native-svg": "12.3.0",
-    "react-native-ui-lib": "snapshot",
-    "react-native-web": "~0.18.7",
-    "unicorn-demo-app": "snapshot"
-  },  
+    "metro-config": "^0.75.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.3",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-haptic-feedback": "^1.14.0",
+    "react-native-navigation": "^7.32.1",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
+    "react-native-svg": "13.4.0",
+    "react-native-svg-transformer": "^1.0.0",
+    "react-native-ui-lib": "^7.1.0",
+    "react-native-web": "~0.18.12",
+    "unicorn-demo-app": "^7.1.0"
+  },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@types/react": "~18.0.0",
-    "@types/react-native": "~0.69.1",
-    "typescript": "^4.6.3"
+    "@babel/core": "^7.21.0",
+    "@types/react": "~18.0.28",
+    "@types/react-native": "~0.71.3",
+    "typescript": "^4.9.5"
   },
   "private": true
 }

src/components/skeletonView/index.tsx

@@ -324,12 +324,12 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
   };
 
   renderAdvanced = () => {
-    const {children, renderContent, showContent, style, ...others} = this.props;
+    const {children, renderContent, showContent, style, testID, ...others} = this.props;
     const data = showContent && _.isFunction(renderContent) ? renderContent(this.props) : children;
 
     return (
-      <View style={style} {...this.contentAccessibilityProps} {...others}>
-        <ShimmerPlaceholder {...this.getDefaultSkeletonProps()} {...others}>
+      <View style={style} {...this.contentAccessibilityProps} testID={testID} {...others}>
+        <ShimmerPlaceholder {...this.getDefaultSkeletonProps()} testID={`${testID}.shimmer`} {...others}>
           {showContent && data}
         </ShimmerPlaceholder>
       </View>

src/incubator/Slider/Thumb.tsx

@@ -23,6 +23,7 @@ export interface Props extends ViewProps {
   shouldBounceToStep: boolean;
   stepInterpolatedValue: SharedValue<number>;
   gap?: number;
+  secondary?: boolean;
 }
 
 const SHADOW_RADIUS = 4;
@@ -43,17 +44,18 @@ const Thumb = (props: Props) => {
     shouldDisableRTL,
     shouldBounceToStep,
     stepInterpolatedValue,
-    gap = 0
+    gap = 0,
+    secondary
   } = props;
 
   const rtlFix = Constants.isRTL ? -1 : 1;
-  const isPressedDefault = useSharedValue(false);
+  const isPressed = useSharedValue(false);
   const thumbSize = useSharedValue({width: THUMB_SIZE, height: THUMB_SIZE});
   const lastOffset = useSharedValue(0);
 
   const gesture = Gesture.Pan()
     .onBegin(() => {
-      isPressedDefault.value = true;
+      isPressed.value = true;
       lastOffset.value = offset.value;
     })
     .onUpdate(e => {
@@ -67,28 +69,30 @@ const Thumb = (props: Props) => {
         // adjust end edge
         newX = end.value;
       }
-      if (newX < end.value - gap && newX > start.value + gap) {
+      if (!secondary && newX < gap || 
+        secondary && newX > end.value - gap || 
+        newX < end.value - gap && newX > start.value + gap) {
         offset.value = newX;
       }
     })
     .onEnd(() => {
       onSeekEnd?.();
     })
     .onFinalize(() => {
-      isPressedDefault.value = false;
+      isPressed.value = false;
       if (shouldBounceToStep) {
         offset.value = Math.round(offset.value / stepInterpolatedValue.value) * stepInterpolatedValue.value;
       }
     });
   gesture.enabled(!disabled);
 
   const animatedStyle = useAnimatedStyle(() => {
-    const customStyle = isPressedDefault.value ? activeStyle?.value : defaultStyle?.value;
+    const customStyle = isPressed.value ? activeStyle?.value : defaultStyle?.value;
     return {
       ...customStyle,
       transform: [
         {translateX: (offset.value - thumbSize.value.width / 2) * rtlFix},
-        {scale: withSpring(!disableActiveStyling && isPressedDefault.value ? 1.3 : 1)}
+        {scale: withSpring(!disableActiveStyling && isPressed.value ? 1.3 : 1)}
       ]
     };
   });

src/incubator/Slider/index.tsx

@@ -59,7 +59,7 @@ const Slider = React.memo((props: Props) => {
     thumbHitSlop,
     disableActiveStyling,
     disabled,
-    useGap,
+    useGap = true,
     accessible,
     testID
   } = props;
@@ -214,7 +214,7 @@ const Slider = React.memo((props: Props) => {
     if (useRange) {
       return {
         transform: [{translateX: withTiming(defaultThumbOffset.value * rtlFix, {duration: 10})}],
-        width: withTiming(rangeThumbOffset.value - defaultThumbOffset.value, {duration: 10})
+        width: withTiming(Math.abs(rangeThumbOffset.value - defaultThumbOffset.value), {duration: 10})
       };
     } else {
       return {
@@ -232,6 +232,7 @@ const Slider = React.memo((props: Props) => {
         end={type === ThumbType.DEFAULT ? rangeThumbOffset : end}
         offset={type === ThumbType.DEFAULT ? defaultThumbOffset : rangeThumbOffset}
         gap={rangeGap}
+        secondary={type !== ThumbType.DEFAULT}
         onSeekStart={onSeekStart}
         onSeekEnd={onSeekEnd}
         shouldDisableRTL={shouldDisableRTL}

src/style/colors.ts

@@ -273,10 +273,10 @@ export class Colors {
     return _.inRange(hue, 51, 184);
   }
 
-  isDark(colorValue: string | OpaqueColorValue) {
+  isDark(colorValue: string | OpaqueColorValue, darkThreshold = 0.55) {
     const color = colorValue === null ? undefined : colorStringValue(colorValue);
     const lum = tinycolor(color).getLuminance();
-    return lum < 0.55;
+    return lum < darkThreshold;
   }
   isValidHex(string: string) {
     return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string);