@reown/appkit-ui-react-native 0.0.0-feat-deeplink-provider-20250812191340 → 0.0.0-feat-multichain-20250813172441

package/lib/commonjs/components/wui-shimmer/index.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Shimmer = void 0;
-var _reactNativeSvg = require("react-native-svg");
 var _reactNative = require("react-native");
+var _react = require("react");
 var _useTheme = require("../../hooks/useTheme");
 var _jsxRuntime = require("react/jsx-runtime");
-const AnimatedRect = _reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Rect);
 const Shimmer = ({
   width = 200,
   height = 200,
@@ -16,38 +15,97 @@ const Shimmer = ({
   borderRadius = 0,
   backgroundColor,
   foregroundColor,
+  highlightWidthRatio = 0.3,
+  highlightOpacity = 0.5,
+  angle = 20,
   style
 }) => {
-  const animatedValue = new _reactNative.Animated.Value(0);
   const Theme = (0, _useTheme.useTheme)();
-  const animatedProps = {
-    fill: animatedValue.interpolate({
-      inputRange: [0, 0.5, 1],
-      outputRange: [backgroundColor ?? Theme['bg-200'], foregroundColor ?? Theme['bg-300'], backgroundColor ?? Theme['bg-200']]
-    }),
+  const [measuredWidth, setMeasuredWidth] = (0, _react.useState)(null);
+  const [measuredHeight, setMeasuredHeight] = (0, _react.useState)(null);
+  const translateRef = (0, _react.useRef)(new _reactNative.Animated.Value(0));
+  const loopRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!measuredWidth) {
+      return undefined;
+    }
+    const translateX = translateRef.current;
+    translateX.setValue(0);
+    const timing = _reactNative.Animated.timing(translateX, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true
+    });
+    const loop = _reactNative.Animated.loop(timing);
+    loopRef.current = loop;
+    loop.start();
+    return () => {
+      loop.stop();
+      if (loopRef.current === loop) {
+        loopRef.current = null;
+      }
+      translateX.stopAnimation(() => {
+        translateX.setValue(0);
+      });
+    };
+  }, [duration, measuredWidth]);
+  const baseColor = backgroundColor ?? Theme['bg-200'];
+  const highlightColor = foregroundColor ?? Theme['bg-300'];
+  const onLayout = event => {
+    const {
+      width: w,
+      height: h
+    } = event.nativeEvent.layout;
+    // Update measurements whenever they change to adapt to dynamic layout/orientation
+    if (measuredWidth == null || Math.abs(w - measuredWidth) > 0.5) {
+      setMeasuredWidth(w);
+    }
+    if (measuredHeight == null || Math.abs(h - measuredHeight) > 0.5) {
+      setMeasuredHeight(h);
+    }
+  };
+
+  // Compute animated translateX only if we have width
+  let animatedTranslateX = 0;
+  let bandWidth = 0;
+  if (measuredWidth) {
+    bandWidth = Math.max(8, measuredWidth * highlightWidthRatio);
+    const travel = measuredWidth + bandWidth * 2;
+    animatedTranslateX = translateRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-bandWidth, travel - bandWidth]
+    });
+  }
+  const containerStyle = {
     width,
     height,
-    x: 0,
-    y: 0,
-    rx: borderRadius,
-    ry: borderRadius
+    borderRadius,
+    overflow: 'hidden',
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderColor: Theme['bg-300'],
+    backgroundColor: baseColor
+  };
+  const bandStyle = {
+    position: 'absolute',
+    top: measuredHeight ? -measuredHeight * 0.25 : 0,
+    bottom: measuredHeight ? -measuredHeight * 0.25 : 0,
+    width: bandWidth,
+    backgroundColor: highlightColor,
+    opacity: highlightOpacity
   };
-  _reactNative.Animated.loop(_reactNative.Animated.timing(animatedValue, {
-    toValue: 1,
-    duration,
-    useNativeDriver: false
-  })).start();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Svg, {
-    width: width,
-    height: height,
-    style: [{
-      borderWidth: _reactNative.StyleSheet.hairlineWidth,
-      borderColor: Theme['bg-300'],
-      borderRadius
-    }, style],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedRect, {
-      ...animatedProps
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    onLayout: onLayout,
+    style: [containerStyle, style],
+    children: measuredWidth && measuredHeight ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      pointerEvents: "none",
+      style: [bandStyle, {
+        transform: [{
+          translateX: animatedTranslateX
+        }, {
+          rotate: `${angle}deg`
+        }]
+      }]
+    }) : null
   });
 };
 exports.Shimmer = Shimmer;

package/lib/commonjs/components/wui-shimmer/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNativeSvg","require","_reactNative","_useTheme","_jsxRuntime","AnimatedRect","Animated","createAnimatedComponent","Rect","Shimmer","width","height","duration","borderRadius","backgroundColor","foregroundColor","style","animatedValue","Value","Theme","useTheme","animatedProps","fill","interpolate","inputRange","outputRange","x","y","rx","ry","loop","timing","toValue","useNativeDriver","start","jsx","Svg","borderWidth","StyleSheet","hairlineWidth","borderColor","children","exports"],"sourceRoot":"../../../../src","sources":["components/wui-shimmer/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAEhD,MAAMI,YAAY,GAAGC,qBAAQ,CAACC,uBAAuB,CAACC,oBAAI,CAAC;AAYpD,MAAMC,OAAO,GAAGA,CAAC;EACtBC,KAAK,GAAG,GAAG;EACXC,MAAM,GAAG,GAAG;EACZC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,eAAe;EACfC,eAAe;EACfC;AACY,CAAC,KAAK;EAClB,MAAMC,aAAa,GAAG,IAAIX,qBAAQ,CAACY,KAAK,CAAC,CAAC,CAAC;EAC3C,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,MAAMC,aAAa,GAAG;IACpBC,IAAI,EAAEL,aAAa,CAACM,WAAW,CAAC;MAC9BC,UAAU,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;MACvBC,WAAW,EAAE,CACXX,eAAe,IAAIK,KAAK,CAAC,QAAQ,CAAC,EAClCJ,eAAe,IAAII,KAAK,CAAC,QAAQ,CAAC,EAClCL,eAAe,IAAIK,KAAK,CAAC,QAAQ,CAAC;IAEtC,CAAC,CAAC;IACFT,KAAK;IACLC,MAAM;IACNe,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE,CAAC;IACJC,EAAE,EAAEf,YAAY;IAChBgB,EAAE,EAAEhB;EACN,CAAC;EAEDP,qBAAQ,CAACwB,IAAI,CACXxB,qBAAQ,CAACyB,MAAM,CAACd,aAAa,EAAE;IAC7Be,OAAO,EAAE,CAAC;IACVpB,QAAQ;IACRqB,eAAe,EAAE;EACnB,CAAC,CACH,CAAC,CAACC,KAAK,CAAC,CAAC;EAET,oBACE,IAAA9B,WAAA,CAAA+B,GAAA,EAACnC,eAAA,CAAAoC,GAAG;IACF1B,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfK,KAAK,EAAE,CACL;MAAEqB,WAAW,EAAEC,uBAAU,CAACC,aAAa;MAAEC,WAAW,EAAErB,KAAK,CAAC,QAAQ,CAAC;MAAEN;IAAa,CAAC,EACrFG,KAAK,CACL;IAAAyB,QAAA,eAEF,IAAArC,WAAA,CAAA+B,GAAA,EAAC9B,YAAY;MAAA,GAAKgB;IAAa,CAAG;EAAC,CAChC,CAAC;AAEV,CAAC;AAACqB,OAAA,CAAAjC,OAAA,GAAAA,OAAA","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_react","_useTheme","_jsxRuntime","Shimmer","width","height","duration","borderRadius","backgroundColor","foregroundColor","highlightWidthRatio","highlightOpacity","angle","style","Theme","useTheme","measuredWidth","setMeasuredWidth","useState","measuredHeight","setMeasuredHeight","translateRef","useRef","Animated","Value","loopRef","useEffect","undefined","translateX","current","setValue","timing","toValue","useNativeDriver","loop","start","stop","stopAnimation","baseColor","highlightColor","onLayout","event","w","h","nativeEvent","layout","Math","abs","animatedTranslateX","bandWidth","max","travel","interpolate","inputRange","outputRange","containerStyle","overflow","borderWidth","StyleSheet","hairlineWidth","borderColor","bandStyle","position","top","bottom","opacity","jsx","View","children","pointerEvents","transform","rotate","exports"],"sourceRoot":"../../../../src","sources":["components/wui-shimmer/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/wui-shimmer/index.js

@@ -1,10 +1,9 @@
 "use strict";
 
-import { Svg, Rect } from 'react-native-svg';
-import { Animated, StyleSheet } from 'react-native';
+import { Animated, StyleSheet, View } from 'react-native';
+import { useEffect, useRef, useState } from 'react';
 import { useTheme } from '../../hooks/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
 export const Shimmer = ({
   width = 200,
   height = 200,
@@ -12,38 +11,97 @@ export const Shimmer = ({
   borderRadius = 0,
   backgroundColor,
   foregroundColor,
+  highlightWidthRatio = 0.3,
+  highlightOpacity = 0.5,
+  angle = 20,
   style
 }) => {
-  const animatedValue = new Animated.Value(0);
   const Theme = useTheme();
-  const animatedProps = {
-    fill: animatedValue.interpolate({
-      inputRange: [0, 0.5, 1],
-      outputRange: [backgroundColor ?? Theme['bg-200'], foregroundColor ?? Theme['bg-300'], backgroundColor ?? Theme['bg-200']]
-    }),
+  const [measuredWidth, setMeasuredWidth] = useState(null);
+  const [measuredHeight, setMeasuredHeight] = useState(null);
+  const translateRef = useRef(new Animated.Value(0));
+  const loopRef = useRef(null);
+  useEffect(() => {
+    if (!measuredWidth) {
+      return undefined;
+    }
+    const translateX = translateRef.current;
+    translateX.setValue(0);
+    const timing = Animated.timing(translateX, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true
+    });
+    const loop = Animated.loop(timing);
+    loopRef.current = loop;
+    loop.start();
+    return () => {
+      loop.stop();
+      if (loopRef.current === loop) {
+        loopRef.current = null;
+      }
+      translateX.stopAnimation(() => {
+        translateX.setValue(0);
+      });
+    };
+  }, [duration, measuredWidth]);
+  const baseColor = backgroundColor ?? Theme['bg-200'];
+  const highlightColor = foregroundColor ?? Theme['bg-300'];
+  const onLayout = event => {
+    const {
+      width: w,
+      height: h
+    } = event.nativeEvent.layout;
+    // Update measurements whenever they change to adapt to dynamic layout/orientation
+    if (measuredWidth == null || Math.abs(w - measuredWidth) > 0.5) {
+      setMeasuredWidth(w);
+    }
+    if (measuredHeight == null || Math.abs(h - measuredHeight) > 0.5) {
+      setMeasuredHeight(h);
+    }
+  };
+
+  // Compute animated translateX only if we have width
+  let animatedTranslateX = 0;
+  let bandWidth = 0;
+  if (measuredWidth) {
+    bandWidth = Math.max(8, measuredWidth * highlightWidthRatio);
+    const travel = measuredWidth + bandWidth * 2;
+    animatedTranslateX = translateRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-bandWidth, travel - bandWidth]
+    });
+  }
+  const containerStyle = {
     width,
     height,
-    x: 0,
-    y: 0,
-    rx: borderRadius,
-    ry: borderRadius
+    borderRadius,
+    overflow: 'hidden',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Theme['bg-300'],
+    backgroundColor: baseColor
+  };
+  const bandStyle = {
+    position: 'absolute',
+    top: measuredHeight ? -measuredHeight * 0.25 : 0,
+    bottom: measuredHeight ? -measuredHeight * 0.25 : 0,
+    width: bandWidth,
+    backgroundColor: highlightColor,
+    opacity: highlightOpacity
   };
-  Animated.loop(Animated.timing(animatedValue, {
-    toValue: 1,
-    duration,
-    useNativeDriver: false
-  })).start();
-  return /*#__PURE__*/_jsx(Svg, {
-    width: width,
-    height: height,
-    style: [{
-      borderWidth: StyleSheet.hairlineWidth,
-      borderColor: Theme['bg-300'],
-      borderRadius
-    }, style],
-    children: /*#__PURE__*/_jsx(AnimatedRect, {
-      ...animatedProps
-    })
+  return /*#__PURE__*/_jsx(View, {
+    onLayout: onLayout,
+    style: [containerStyle, style],
+    children: measuredWidth && measuredHeight ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [bandStyle, {
+        transform: [{
+          translateX: animatedTranslateX
+        }, {
+          rotate: `${angle}deg`
+        }]
+      }]
+    }) : null
   });
 };
 //# sourceMappingURL=index.js.map

package/lib/module/components/wui-shimmer/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Svg","Rect","Animated","StyleSheet","useTheme","jsx","_jsx","AnimatedRect","createAnimatedComponent","Shimmer","width","height","duration","borderRadius","backgroundColor","foregroundColor","style","animatedValue","Value","Theme","animatedProps","fill","interpolate","inputRange","outputRange","x","y","rx","ry","loop","timing","toValue","useNativeDriver","start","borderWidth","hairlineWidth","borderColor","children"],"sourceRoot":"../../../../src","sources":["components/wui-shimmer/index.tsx"],"mappings":";;AAAA,SAASA,GAAG,EAAEC,IAAI,QAAQ,kBAAkB;AAC5C,SAASC,QAAQ,EAAEC,UAAU,QAAwC,cAAc;AACnF,SAASC,QAAQ,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEhD,MAAMC,YAAY,GAAGL,QAAQ,CAACM,uBAAuB,CAACP,IAAI,CAAC;AAY3D,OAAO,MAAMQ,OAAO,GAAGA,CAAC;EACtBC,KAAK,GAAG,GAAG;EACXC,MAAM,GAAG,GAAG;EACZC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,eAAe;EACfC,eAAe;EACfC;AACY,CAAC,KAAK;EAClB,MAAMC,aAAa,GAAG,IAAIf,QAAQ,CAACgB,KAAK,CAAC,CAAC,CAAC;EAC3C,MAAMC,KAAK,GAAGf,QAAQ,CAAC,CAAC;EAExB,MAAMgB,aAAa,GAAG;IACpBC,IAAI,EAAEJ,aAAa,CAACK,WAAW,CAAC;MAC9BC,UAAU,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;MACvBC,WAAW,EAAE,CACXV,eAAe,IAAIK,KAAK,CAAC,QAAQ,CAAC,EAClCJ,eAAe,IAAII,KAAK,CAAC,QAAQ,CAAC,EAClCL,eAAe,IAAIK,KAAK,CAAC,QAAQ,CAAC;IAEtC,CAAC,CAAC;IACFT,KAAK;IACLC,MAAM;IACNc,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE,CAAC;IACJC,EAAE,EAAEd,YAAY;IAChBe,EAAE,EAAEf;EACN,CAAC;EAEDX,QAAQ,CAAC2B,IAAI,CACX3B,QAAQ,CAAC4B,MAAM,CAACb,aAAa,EAAE;IAC7Bc,OAAO,EAAE,CAAC;IACVnB,QAAQ;IACRoB,eAAe,EAAE;EACnB,CAAC,CACH,CAAC,CAACC,KAAK,CAAC,CAAC;EAET,oBACE3B,IAAA,CAACN,GAAG;IACFU,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfK,KAAK,EAAE,CACL;MAAEkB,WAAW,EAAE/B,UAAU,CAACgC,aAAa;MAAEC,WAAW,EAAEjB,KAAK,CAAC,QAAQ,CAAC;MAAEN;IAAa,CAAC,EACrFG,KAAK,CACL;IAAAqB,QAAA,eAEF/B,IAAA,CAACC,YAAY;MAAA,GAAKa;IAAa,CAAG;EAAC,CAChC,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["Animated","StyleSheet","View","useEffect","useRef","useState","useTheme","jsx","_jsx","Shimmer","width","height","duration","borderRadius","backgroundColor","foregroundColor","highlightWidthRatio","highlightOpacity","angle","style","Theme","measuredWidth","setMeasuredWidth","measuredHeight","setMeasuredHeight","translateRef","Value","loopRef","undefined","translateX","current","setValue","timing","toValue","useNativeDriver","loop","start","stop","stopAnimation","baseColor","highlightColor","onLayout","event","w","h","nativeEvent","layout","Math","abs","animatedTranslateX","bandWidth","max","travel","interpolate","inputRange","outputRange","containerStyle","overflow","borderWidth","hairlineWidth","borderColor","bandStyle","position","top","bottom","opacity","children","pointerEvents","transform","rotate"],"sourceRoot":"../../../../src","sources":["components/wui-shimmer/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/components/wui-shimmer/index.d.ts

@@ -1,12 +1,18 @@
 import { type StyleProp, type ViewStyle } from 'react-native';
+type PercentString = `${number}%`;
+type ShimmerDimension = number | PercentString;
 export interface ShimmerProps {
-    width?: number | string;
-    height?: number | string;
+    width?: ShimmerDimension;
+    height?: ShimmerDimension;
     duration?: number;
     borderRadius?: number;
     backgroundColor?: string;
     foregroundColor?: string;
+    highlightWidthRatio?: number;
+    highlightOpacity?: number;
+    angle?: number;
     style?: StyleProp<ViewStyle>;
 }
-export declare const Shimmer: ({ width, height, duration, borderRadius, backgroundColor, foregroundColor, style }: ShimmerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Shimmer: ({ width, height, duration, borderRadius, backgroundColor, foregroundColor, highlightWidthRatio, highlightOpacity, angle, style }: ShimmerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/wui-shimmer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/wui-shimmer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpF,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,OAAO,uFAQjB,YAAY,4CAyCd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/wui-shimmer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1F,KAAK,aAAa,GAAG,GAAG,MAAM,GAAG,CAAC;AAClC,KAAK,gBAAgB,GAAG,MAAM,GAAG,aAAa,CAAC;AAE/C,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,OAAO,qIAWjB,YAAY,4CA+Fd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reown/appkit-ui-react-native",
-  "version": "0.0.0-feat-deeplink-provider-20250812191340",
+  "version": "0.0.0-feat-multichain-20250813172441",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-feat-deeplink-provider-20250812191340",
+    "@reown/appkit-common-react-native": "0.0.0-feat-multichain-20250813172441",
     "polished": "4.3.1",
     "qrcode": "1.5.3"
   },

package/src/components/wui-shimmer/index.tsx

@@ -1,16 +1,20 @@
-import { Svg, Rect } from 'react-native-svg';
-import { Animated, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useEffect, useRef, useState } from 'react';
 import { useTheme } from '../../hooks/useTheme';
 
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
+type PercentString = `${number}%`;
+type ShimmerDimension = number | PercentString;
 
 export interface ShimmerProps {
-  width?: number | string;
-  height?: number | string;
+  width?: ShimmerDimension;
+  height?: ShimmerDimension;
   duration?: number;
   borderRadius?: number;
   backgroundColor?: string;
   foregroundColor?: string;
+  highlightWidthRatio?: number;
+  highlightOpacity?: number;
+  angle?: number; // in degrees
   style?: StyleProp<ViewStyle>;
 }
 
@@ -21,46 +25,103 @@ export const Shimmer = ({
   borderRadius = 0,
   backgroundColor,
   foregroundColor,
+  highlightWidthRatio = 0.3,
+  highlightOpacity = 0.5,
+  angle = 20,
   style
 }: ShimmerProps) => {
-  const animatedValue = new Animated.Value(0);
   const Theme = useTheme();
 
-  const animatedProps = {
-    fill: animatedValue.interpolate({
-      inputRange: [0, 0.5, 1],
-      outputRange: [
-        backgroundColor ?? Theme['bg-200'],
-        foregroundColor ?? Theme['bg-300'],
-        backgroundColor ?? Theme['bg-200']
-      ]
-    }),
+  const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
+  const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);
+
+  const translateRef = useRef(new Animated.Value(0));
+  const loopRef = useRef<Animated.CompositeAnimation | null>(null);
+
+  useEffect(() => {
+    if (!measuredWidth) {
+      return undefined;
+    }
+    const translateX = translateRef.current;
+    translateX.setValue(0);
+    const timing = Animated.timing(translateX, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true
+    });
+    const loop = Animated.loop(timing);
+    loopRef.current = loop;
+    loop.start();
+
+    return () => {
+      loop.stop();
+      if (loopRef.current === loop) {
+        loopRef.current = null;
+      }
+      translateX.stopAnimation(() => {
+        translateX.setValue(0);
+      });
+    };
+  }, [duration, measuredWidth]);
+
+  const baseColor = backgroundColor ?? Theme['bg-200'];
+  const highlightColor = foregroundColor ?? Theme['bg-300'];
+
+  const onLayout = (event: any) => {
+    const { width: w, height: h } = event.nativeEvent.layout;
+    // Update measurements whenever they change to adapt to dynamic layout/orientation
+    if (measuredWidth == null || Math.abs(w - measuredWidth) > 0.5) {
+      setMeasuredWidth(w);
+    }
+    if (measuredHeight == null || Math.abs(h - measuredHeight) > 0.5) {
+      setMeasuredHeight(h);
+    }
+  };
+
+  // Compute animated translateX only if we have width
+  let animatedTranslateX: any = 0;
+  let bandWidth = 0;
+  if (measuredWidth) {
+    bandWidth = Math.max(8, measuredWidth * highlightWidthRatio);
+    const travel = measuredWidth + bandWidth * 2;
+    animatedTranslateX = translateRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-bandWidth, travel - bandWidth]
+    });
+  }
+
+  const containerStyle: ViewStyle = {
     width,
     height,
-    x: 0,
-    y: 0,
-    rx: borderRadius,
-    ry: borderRadius
+    borderRadius,
+    overflow: 'hidden',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Theme['bg-300'],
+    backgroundColor: baseColor
   };
 
-  Animated.loop(
-    Animated.timing(animatedValue, {
-      toValue: 1,
-      duration,
-      useNativeDriver: false
-    })
-  ).start();
+  const bandStyle: ViewStyle = {
+    position: 'absolute',
+    top: measuredHeight ? -measuredHeight * 0.25 : 0,
+    bottom: measuredHeight ? -measuredHeight * 0.25 : 0,
+    width: bandWidth,
+    backgroundColor: highlightColor,
+    opacity: highlightOpacity
+  };
 
   return (
-    <Svg
-      width={width}
-      height={height}
-      style={[
-        { borderWidth: StyleSheet.hairlineWidth, borderColor: Theme['bg-300'], borderRadius },
-        style
-      ]}
-    >
-      <AnimatedRect {...animatedProps} />
-    </Svg>
+    <View onLayout={onLayout} style={[containerStyle, style]}>
+      {measuredWidth && measuredHeight ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            bandStyle,
+            {
+              transform: [{ translateX: animatedTranslateX }, { rotate: `${angle}deg` }]
+            }
+          ]}
+        />
+      ) : null}
+    </View>
   );
 };