react-native-ui-lib 7.43.0-snapshot.7190 → 7.43.0-snapshot.7192

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7190",
+  "version": "5.0.0-snapshot.7192",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.43.0-snapshot.7190",
+  "version": "7.43.0-snapshot.7192",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -117,11 +117,12 @@
     "react-native": "0.77.2",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.22.1",
-    "react-native-gradients": "2.1.1",
     "react-native-haptic-feedback": "^1.11.0",
+    "react-native-linear-gradient": "3.0.0-alpha.1",
     "react-native-mmkv": "3.2.0",
     "react-native-navigation": "8.1.0-rc02",
     "react-native-reanimated": "3.16.7",
+    "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "15.11.2",
     "react-native-svg-transformer": "1.5.0",
     "react-test-renderer": "18.3.1",
@@ -130,9 +131,6 @@
     "shell-utils": "^1.0.10",
     "typescript": "5.0.4"
   },
-  "resolutions": {
-    "react-native-svg": "15.11.2"
-  },
   "peerDependencies": {
     "react": ">=17.0.1",
     "react-native": ">=0.76.0",
@@ -162,6 +160,9 @@
       "legacyFakeTimers": true
     }
   },
+  "resolutions": {
+    "react-native-linear-gradient": "patch:react-native-linear-gradient@npm%3A3.0.0-alpha.1#./.yarn/patches/react-native-linear-gradient-3.0.0-alpha.1.patch"
+  },
   "engines": {
     "node": ">=18"
   },

package/src/components/marquee/types.js

@@ -1,10 +1,7 @@
 export let MarqueeDirections = /*#__PURE__*/function (MarqueeDirections) {
   MarqueeDirections["RIGHT"] = "RIGHT";
-  //LTR
   MarqueeDirections["LEFT"] = "LEFT";
-  //RTL
   MarqueeDirections["UP"] = "UP";
-  //Bottom Up
-  MarqueeDirections["DOWN"] = "DOWN"; //Up To Bottom
+  MarqueeDirections["DOWN"] = "DOWN";
   return MarqueeDirections;
 }({});

package/src/components/skeletonView/index.d.ts

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Animated, StyleProp, ViewStyle, AccessibilityProps } from 'react-native';
-import { ShimmerPlaceholderProps } from './ShimmerPlaceholder';
 import { AlignmentModifiers, PaddingModifiers, MarginModifiers } from '../../commons/new';
 export declare enum Template {
     LIST_ITEM = "listItem",
@@ -38,7 +37,7 @@ export interface SkeletonListProps {
      */
     renderEndContent?: () => React.ReactElement | undefined;
 }
-export interface SkeletonViewProps extends ShimmerPlaceholderProps, AccessibilityProps, AlignmentModifiers, PaddingModifiers, MarginModifiers {
+export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifiers, PaddingModifiers, MarginModifiers {
     /**
      * The content has been loaded, start fading out the skeleton and fading in the content
      */
@@ -73,6 +72,19 @@ export interface SkeletonViewProps extends ShimmerPlaceholderProps, Accessibilit
      * This is needed because the `key` prop is not accessible.
      */
     timesKey?: string;
+    /**
+     * The height of the skeleton view
+     */
+    height?: number;
+    /**
+     * The width of the skeleton view
+     */
+    width?: number;
+    /**
+     * The colors of the skeleton view, the array length has to be >=2
+     * default: [Colors.grey70, Colors.grey60, Colors.grey70]
+     */
+    colors?: string[];
     /**
      * The border radius of the skeleton view
      */
@@ -81,6 +93,14 @@ export interface SkeletonViewProps extends ShimmerPlaceholderProps, Accessibilit
      * Whether the skeleton is a circle (will override the borderRadius)
      */
     circle?: boolean;
+    /**
+     * Additional style to the skeleton view
+     */
+    shimmerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Override container styles
+     */
+    style?: StyleProp<ViewStyle>;
     /**
      * Used to locate this view in end-to-end tests
      */
@@ -95,7 +115,7 @@ interface SkeletonState {
  * @description: Allows showing a temporary skeleton view while your real view is loading.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SkeletonViewScreen.tsx
  * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Skeleton/Skeleton.gif?raw=true
- * @notes: View requires installing the 'react-native-gradients' library
+ * @notes: View requires installing the 'react-native-shimmer-placeholder' and 'react-native-linear-gradient' library
  */
 declare class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
     static displayName: string;
@@ -119,7 +139,8 @@ declare class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
         circleOverride: boolean;
         style: StyleProp<ViewStyle>;
     }) => {
-        colors: string[] | undefined;
+        shimmerColors: string[];
+        isReversed: boolean;
         style: StyleProp<ViewStyle>[];
         width: number | undefined;
         height: number;

package/src/components/skeletonView/index.js

@@ -5,11 +5,12 @@ import _isUndefined from "lodash/isUndefined";
 import React, { Component } from 'react';
 import { StyleSheet, Animated, Easing } from 'react-native';
 import memoize from 'memoize-one';
-import { LinearGradientPackage } from "../../optionalDependencies";
-import ShimmerPlaceholderTemp from "./ShimmerPlaceholder";
-import { BorderRadiuses, Dividers, Spacings } from "../../style";
+import { BorderRadiuses, Colors, Dividers, Spacings } from "../../style";
+import { createShimmerPlaceholder, LinearGradientPackage } from "../../optionalDependencies";
 import View from "../view";
+import { Constants } from "../../commons/new";
 import { LogService } from "../../services";
+const LinearGradient = LinearGradientPackage?.default;
 let ShimmerPlaceholder;
 const ANIMATION_DURATION = 400;
 export let Template = /*#__PURE__*/function (Template) {
@@ -31,7 +32,7 @@ export let ContentType = /*#__PURE__*/function (ContentType) {
  * @description: Allows showing a temporary skeleton view while your real view is loading.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SkeletonViewScreen.tsx
  * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Skeleton/Skeleton.gif?raw=true
- * @notes: View requires installing the 'react-native-gradients' library
+ * @notes: View requires installing the 'react-native-shimmer-placeholder' and 'react-native-linear-gradient' library
  */
 class SkeletonView extends Component {
   static displayName = 'SkeletonView';
@@ -61,10 +62,12 @@ class SkeletonView extends Component {
       isAnimating: props.showContent === false,
       opacity: new Animated.Value(0)
     };
-    if (_isUndefined(LinearGradientPackage)) {
-      LogService.error(`RNUILib SkeletonView's requires installing "react-native-gradients" dependency`);
+    if (_isUndefined(LinearGradientPackage?.default)) {
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
+    } else if (_isUndefined(createShimmerPlaceholder)) {
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
     } else if (ShimmerPlaceholder === undefined) {
-      ShimmerPlaceholder = ShimmerPlaceholderTemp;
+      ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);
     }
     this.setAccessibilityProps(props.template);
   }
@@ -115,7 +118,8 @@ class SkeletonView extends Component {
       size = Math.max(width || 0, height);
     }
     return {
-      colors,
+      shimmerColors: colors || [Colors.$backgroundNeutral, Colors.$backgroundNeutralMedium, Colors.$backgroundNeutral],
+      isReversed: Constants.isRTL,
       style: [{
         borderRadius
       }, style],
@@ -261,7 +265,7 @@ class SkeletonView extends Component {
   }
   renderNothing = () => null;
   render() {
-    if (LinearGradientPackage === undefined) {
+    if (_isUndefined(LinearGradientPackage?.default) || _isUndefined(createShimmerPlaceholder)) {
       return null;
     }
     const {

package/src/components/skeletonView/skeletonView.api.json

@@ -3,7 +3,7 @@
   "category": "status",
   "description": "Allows showing a temporary skeleton view while your real view is loading",
   "modifiers": ["margin"],
-  "note": "Requires installing the 'react-native-gradients' library",
+  "note": "Requires installing the 'react-native-shimmer-placeholder' and 'react-native-linear-gradient' libraries",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SkeletonViewScreen.tsx",
   "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Skeleton/Skeleton.gif?raw=true"],
   "props": [
@@ -40,7 +40,7 @@
     {
       "name": "colors",
       "type": "string[]",
-      "description": "The colors of the skeleton view, the array length has to be 3",
+      "description": "The colors of the skeleton view, the array length has to be >=2",
       "default": "[Colors.grey70, Colors.grey60, Colors.grey70]"
     },
     {"name": "borderRadius", "type": "number", "description": "The border radius of the skeleton view"},

package/src/components/textField/types.js

@@ -5,7 +5,6 @@ export let ValidationMessagePosition = /*#__PURE__*/function (ValidationMessageP
 }({});
 export let Presets = /*#__PURE__*/function (Presets) {
   Presets["DEFAULT"] = "default";
-  // TODO: remove
   Presets["UNDERLINE"] = "underline";
   Presets["OUTLINE"] = "outline";
   return Presets;

package/src/components/timeline/types.js

@@ -1,6 +1,5 @@
 export let StateTypes = /*#__PURE__*/function (StateTypes) {
   StateTypes["CURRENT"] = "current";
-  // default
   StateTypes["NEXT"] = "next";
   StateTypes["ERROR"] = "error";
   StateTypes["SUCCESS"] = "success";
@@ -8,13 +7,11 @@ export let StateTypes = /*#__PURE__*/function (StateTypes) {
 }({});
 export let LineTypes = /*#__PURE__*/function (LineTypes) {
   LineTypes["SOLID"] = "solid";
-  // default
   LineTypes["DASHED"] = "dashed";
   return LineTypes;
 }({});
 export let PointTypes = /*#__PURE__*/function (PointTypes) {
   PointTypes["BULLET"] = "bullet";
-  // default
   PointTypes["CIRCLE"] = "circle";
   PointTypes["OUTLINE"] = "outline";
   return PointTypes;

package/src/index.js

@@ -2249,5 +2249,6 @@ function _WheelPicker() {
   };
   return data;
 }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/src/optionalDependencies/LinearGradientPackage.js

@@ -1,5 +1,5 @@
 let LinearGradientPackage;
 try {
-  LinearGradientPackage = require('react-native-gradients')?.LinearGradient;
+  LinearGradientPackage = require('react-native-linear-gradient');
 } catch (error) {}
 export default LinearGradientPackage;

package/src/optionalDependencies/ShimmerPackage.d.ts

@@ -0,0 +1,2 @@
+declare let createShimmerPlaceholder: any;
+export { createShimmerPlaceholder };

package/src/optionalDependencies/ShimmerPackage.js

@@ -0,0 +1,5 @@
+let createShimmerPlaceholder;
+try {
+  createShimmerPlaceholder = require('react-native-shimmer-placeholder').createShimmerPlaceholder;
+} catch (error) {}
+export { createShimmerPlaceholder };

package/src/optionalDependencies/index.d.ts

@@ -5,4 +5,5 @@ export { default as MomentPackage } from './MomentPackage';
 export { default as NetInfoPackage } from './NetInfoPackage';
 export { default as HapticFeedbackPackage } from './HapticFeedbackPackage';
 export { default as SvgPackage, SvgCssUri } from './SvgPackage';
+export { createShimmerPlaceholder } from './ShimmerPackage';
 export { default as LinearGradientPackage } from './LinearGradientPackage';

package/src/optionalDependencies/index.js

@@ -5,4 +5,5 @@ export { default as MomentPackage } from "./MomentPackage";
 export { default as NetInfoPackage } from "./NetInfoPackage";
 export { default as HapticFeedbackPackage } from "./HapticFeedbackPackage";
 export { default as SvgPackage, SvgCssUri } from "./SvgPackage";
+export { createShimmerPlaceholder } from "./ShimmerPackage";
 export { default as LinearGradientPackage } from "./LinearGradientPackage";

package/src/optionalDependencies/index.web.d.ts

@@ -1,6 +1,7 @@
 export { default as NetInfoPackage } from './NetInfoPackage';
 export { default as HapticFeedbackPackage } from './HapticFeedbackPackage';
 export { default as SvgPackage } from './SvgPackage';
+export { createShimmerPlaceholder } from './ShimmerPackage';
 export { default as LinearGradientPackage } from './LinearGradientPackage';
 export { default as PostCssPackage } from './PostCssPackage';
 export { default as FlashListPackage } from './FlashListPackage';

package/src/optionalDependencies/index.web.js

@@ -1,6 +1,7 @@
 export { default as NetInfoPackage } from "./NetInfoPackage";
 export { default as HapticFeedbackPackage } from "./HapticFeedbackPackage";
 export { default as SvgPackage } from "./SvgPackage";
+export { createShimmerPlaceholder } from "./ShimmerPackage";
 export { default as LinearGradientPackage } from "./LinearGradientPackage";
 export { default as PostCssPackage } from "./PostCssPackage";
 export { default as FlashListPackage } from "./FlashListPackage";

package/src/components/skeletonView/ShimmerPlaceholder.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-export interface ShimmerPlaceholderProps {
-    /**
-     * The height of the skeleton view
-     */
-    height?: number;
-    /**
-     * The width of the skeleton view
-     */
-    width?: number;
-    /**
-     * The colors of the skeleton view, the array length has to be 3
-     * default: [Colors.grey70, Colors.grey60, Colors.grey70]
-     */
-    colors?: string[];
-    /**
-     * Additional style to the skeleton view
-     */
-    shimmerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Override container styles
-     */
-    style?: StyleProp<ViewStyle>;
-}
-declare const ShimmerPlaceholder: (props: ShimmerPlaceholderProps) => React.JSX.Element;
-export default ShimmerPlaceholder;

package/src/components/skeletonView/ShimmerPlaceholder.js

@@ -1,68 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import { LinearGradientPackage as LinearGradient } from "../../optionalDependencies";
-import View from "../view";
-import { Colors } from "../../style";
-import Constants from "../../commons/Constants";
-import { interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
-const ANIMATION_DURATION = 1000;
-const ShimmerPlaceholder = props => {
-  const {
-    height,
-    width = 100,
-    colors = [Colors.$backgroundNeutral, Colors.$backgroundNeutralMedium, Colors.$backgroundNeutral],
-    shimmerStyle,
-    style
-  } = props;
-  const translateValue = useSharedValue(-0.7);
-  useEffect(() => {
-    translateValue.value = withRepeat(withTiming(0.7, {
-      duration: ANIMATION_DURATION
-    }), -1, false);
-  }, [translateValue]);
-  const backgroundColor = useMemo(() => {
-    return colors[0];
-  }, [colors]);
-  const colorList = useMemo(() => {
-    return [{
-      offset: '20%',
-      color: colors[0],
-      opacity: '1'
-    }, {
-      offset: '40%',
-      color: colors[1],
-      opacity: '1'
-    }, {
-      offset: '100%',
-      color: colors[2],
-      opacity: '1'
-    }];
-  }, [colors]);
-  const animatedStyle = useAnimatedStyle(() => {
-    const translateX = interpolate(translateValue.value, [-1, 1], [-width, width], 'extend');
-    return {
-      transform: [{
-        translateX
-      }]
-    };
-  }, [width]);
-  const _style = useMemo(() => {
-    const reverseStyle = Constants.isRTL ? {
-      transform: [{
-        scaleX: -1
-      }]
-    } : undefined;
-    return [style, shimmerStyle, {
-      overflow: 'hidden'
-    }, reverseStyle, {
-      backgroundColor
-    }];
-  }, [style, shimmerStyle, backgroundColor]);
-  return <View height={height} width={width}
-  // @ts-expect-error
-  style={_style}>
-      <View width={width} reanimated style={animatedStyle}>
-        <LinearGradient colorList={colorList} angle={0} />
-      </View>
-    </View>;
-};
-export default ShimmerPlaceholder;