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

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7175",
+  "version": "5.0.0-snapshot.7190",
   "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.7175",
+  "version": "7.43.0-snapshot.7190",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -117,12 +117,11 @@
     "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": "2.6.2",
     "react-native-mmkv": "3.2.0",
-    "react-native-navigation": "8.1.0-rc01-snapshot.1710",
+    "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",
@@ -131,6 +130,9 @@
     "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",

package/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js

@@ -107,7 +107,7 @@ export default class KeyboardAwareBase extends Component {
           setTimeout(() => {
             this._keyboardAwareView
               .getScrollResponder()
-              .scrollResponderScrollNativeHandleToKeyboard(ReactNative.findNodeHandle(textInputRef),
+              .scrollResponderScrollNativeHandleToKeyboard(this.findNodeHandle(textInputRef),
                 this.props.scrollToInputAdditionalOffset,
                 true);
           }, 0);
@@ -117,6 +117,10 @@ export default class KeyboardAwareBase extends Component {
     }
   }
 
+  findNodeHandle(ref) {
+    return ref.current?.getNodeHandle?.() || ref?.getNodeHandle?.() || ReactNative.findNodeHandle(ref.current || ref);
+  }
+
   _onKeyboardWillShow(event) {
     this._scrollToFocusedTextInput();
 

package/src/components/marquee/types.js

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

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,68 @@
+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;

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

@@ -1,5 +1,6 @@
 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",
@@ -37,7 +38,7 @@ export interface SkeletonListProps {
      */
     renderEndContent?: () => React.ReactElement | undefined;
 }
-export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifiers, PaddingModifiers, MarginModifiers {
+export interface SkeletonViewProps extends ShimmerPlaceholderProps, AccessibilityProps, AlignmentModifiers, PaddingModifiers, MarginModifiers {
     /**
      * The content has been loaded, start fading out the skeleton and fading in the content
      */
@@ -72,19 +73,6 @@ export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifier
      * 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
      */
@@ -93,14 +81,6 @@ export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifier
      * 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
      */
@@ -115,7 +95,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-shimmer-placeholder' and 'react-native-linear-gradient' library
+ * @notes: View requires installing the 'react-native-gradients' library
  */
 declare class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
     static displayName: string;
@@ -139,8 +119,7 @@ declare class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
         circleOverride: boolean;
         style: StyleProp<ViewStyle>;
     }) => {
-        shimmerColors: string[];
-        isReversed: boolean;
+        colors: string[] | undefined;
         style: StyleProp<ViewStyle>[];
         width: number | undefined;
         height: number;

package/src/components/skeletonView/index.js

@@ -5,12 +5,11 @@ import _isUndefined from "lodash/isUndefined";
 import React, { Component } from 'react';
 import { StyleSheet, Animated, Easing } from 'react-native';
 import memoize from 'memoize-one';
-import { BorderRadiuses, Colors, Dividers, Spacings } from "../../style";
-import { createShimmerPlaceholder, LinearGradientPackage } from "../../optionalDependencies";
+import { LinearGradientPackage } from "../../optionalDependencies";
+import ShimmerPlaceholderTemp from "./ShimmerPlaceholder";
+import { BorderRadiuses, Dividers, Spacings } from "../../style";
 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) {
@@ -32,7 +31,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-shimmer-placeholder' and 'react-native-linear-gradient' library
+ * @notes: View requires installing the 'react-native-gradients' library
  */
 class SkeletonView extends Component {
   static displayName = 'SkeletonView';
@@ -62,12 +61,10 @@ class SkeletonView extends Component {
       isAnimating: props.showContent === false,
       opacity: new Animated.Value(0)
     };
-    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`);
+    if (_isUndefined(LinearGradientPackage)) {
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-gradients" dependency`);
     } else if (ShimmerPlaceholder === undefined) {
-      ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);
+      ShimmerPlaceholder = ShimmerPlaceholderTemp;
     }
     this.setAccessibilityProps(props.template);
   }
@@ -118,8 +115,7 @@ class SkeletonView extends Component {
       size = Math.max(width || 0, height);
     }
     return {
-      shimmerColors: colors || [Colors.$backgroundNeutral, Colors.$backgroundNeutralMedium, Colors.$backgroundNeutral],
-      isReversed: Constants.isRTL,
+      colors,
       style: [{
         borderRadius
       }, style],
@@ -265,7 +261,7 @@ class SkeletonView extends Component {
   }
   renderNothing = () => null;
   render() {
-    if (_isUndefined(LinearGradientPackage?.default) || _isUndefined(createShimmerPlaceholder)) {
+    if (LinearGradientPackage === undefined) {
       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-shimmer-placeholder' and 'react-native-linear-gradient' libraries",
+  "note": "Requires installing the 'react-native-gradients' library",
   "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 >=2",
+      "description": "The colors of the skeleton view, the array length has to be 3",
       "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,6 +5,7 @@ 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,5 +1,6 @@
 export let StateTypes = /*#__PURE__*/function (StateTypes) {
   StateTypes["CURRENT"] = "current";
+  // default
   StateTypes["NEXT"] = "next";
   StateTypes["ERROR"] = "error";
   StateTypes["SUCCESS"] = "success";
@@ -7,11 +8,13 @@ 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,6 +2249,5 @@ function _WheelPicker() {
   };
   return data;
 }
-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 _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 _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-linear-gradient');
+  LinearGradientPackage = require('react-native-gradients')?.LinearGradient;
 } catch (error) {}
 export default LinearGradientPackage;

package/src/optionalDependencies/index.d.ts

@@ -5,5 +5,4 @@ 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,5 +5,4 @@ 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,7 +1,6 @@
 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,7 +1,6 @@
 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/ShimmerPackage.d.ts

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

package/src/optionalDependencies/ShimmerPackage.js

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