related-ui-components 2.8.2 → 2.8.3

package/lib/module/components/Skeleton/Shimmer.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useEffect, useRef } from "react";
-import { View, StyleSheet, Animated, Easing } from "react-native";
+import { View, StyleSheet, Animated, Easing, I18nManager } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useTheme } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -10,12 +10,14 @@ const Shimmer = ({
   width,
   height,
   style,
+  shimmerColor,
   duration = 1500,
   shimmerWidth = 150
 }) => {
   const {
     theme
   } = useTheme();
+  const isRTL = I18nManager.isRTL;
   const animatedValue = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     const animation = Animated.loop(Animated.timing(animatedValue, {
@@ -27,11 +29,14 @@ const Shimmer = ({
     animation.start();
     return () => animation.stop();
   }, [animatedValue, duration]);
+  const numericWidth = typeof width === "number" ? width : 400;
+  const ltrOutputRange = [-shimmerWidth, numericWidth + shimmerWidth];
+  const rtlOutputRange = [numericWidth + shimmerWidth, -shimmerWidth];
   const translateX = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [-shimmerWidth, typeof width === "number" ? width + shimmerWidth : 400 + shimmerWidth]
+    outputRange: isRTL ? rtlOutputRange : ltrOutputRange
   });
-  const shimmerColors = ["transparent", theme.skeletonShimmer, "transparent"];
+  const shimmerColors = ["transparent", shimmerColor || theme.skeletonShimmer, "transparent"];
   return /*#__PURE__*/_jsxs(View, {
     style: [{
       width,

package/lib/module/components/Skeleton/Shimmer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","View","StyleSheet","Animated","Easing","LinearGradient","useTheme","jsx","_jsx","jsxs","_jsxs","Shimmer","children","width","height","style","duration","shimmerWidth","theme","animatedValue","Value","current","animation","loop","timing","toValue","easing","linear","useNativeDriver","start","stop","translateX","interpolate","inputRange","outputRange","shimmerColors","skeletonShimmer","overflow","backgroundColor","skeletonBackgroundColor","absoluteFillObject","transform","zIndex","colors","flex","x","y","end"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Skeleton/Shimmer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SACEC,IAAI,EACJC,UAAU,EACVC,QAAQ,EACRC,MAAM,QAID,cAAc;AACrB,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,QAAQ,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAWvC,MAAMC,OAA+B,GAAGA,CAAC;EACvCC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG;AACjB,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAM,CAAC,GAAGZ,QAAQ,CAAC,CAAC;EAE5B,MAAMa,aAAa,GAAGnB,MAAM,CAAC,IAAIG,QAAQ,CAACiB,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAE3DtB,SAAS,CAAC,MAAM;IACd,MAAMuB,SAAS,GAAGnB,QAAQ,CAACoB,IAAI,CAC7BpB,QAAQ,CAACqB,MAAM,CAACL,aAAa,EAAE;MAC7BM,OAAO,EAAE,CAAC;MACVT,QAAQ,EAAEA,QAAQ;MAClBU,MAAM,EAAEtB,MAAM,CAACuB,MAAM;MACrBC,eAAe,EAAE;IACnB,CAAC,CACH,CAAC;IACDN,SAAS,CAACO,KAAK,CAAC,CAAC;IACjB,OAAO,MAAMP,SAAS,CAACQ,IAAI,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACX,aAAa,EAAEH,QAAQ,CAAC,CAAC;EAE7B,MAAMe,UAAU,GAAGZ,aAAa,CAACa,WAAW,CAAC;IAC3CC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAElBC,WAAW,EAAE,CACX,CAACjB,YAAY,EACb,OAAOJ,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGI,YAAY,GAAG,GAAG,GAAGA,YAAY;EAEzE,CAAC,CAAC;EAEF,MAAMkB,aAAa,GAAG,CACpB,aAAa,EACbjB,KAAK,CAACkB,eAAe,EACrB,aAAa,CACd;EAED,oBACE1B,KAAA,CAACT,IAAI;IACHc,KAAK,EAAE,CACL;MAAEF,KAAK;MAAEC,MAAM;MAAEuB,QAAQ,EAAE,QAAQ;MAAEC,eAAe,EAAEpB,KAAK,CAACqB;IAAwB,CAAC,EACrFxB,KAAK,CACL;IAAAH,QAAA,GAEDA,QAAQ,eACTJ,IAAA,CAACL,QAAQ,CAACF,IAAI;MACZc,KAAK,EAAE;QACL,GAAGb,UAAU,CAACsC,kBAAkB;QAChCC,SAAS,EAAE,CAAC;UAAEV;QAAW,CAAC,CAAC;QAC3BW,MAAM,EAAE;MACV,CAAE;MAAA9B,QAAA,eAEFJ,IAAA,CAACH,cAAc;QACbsC,MAAM,EAAER,aAAqB;QAC7BpB,KAAK,EAAE;UAAE6B,IAAI,EAAE,CAAC;UAAE/B,KAAK,EAAEI;QAAa,CAAE;QACxCY,KAAK,EAAE;UAAEgB,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAI,CAAE;QACxBC,GAAG,EAAE;UAAEF,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAI;MAAE,CACvB;IAAC,CACW,CAAC;EAAA,CACZ,CAAC;AAEX,CAAC;AAED,eAAenC,OAAO","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","View","StyleSheet","Animated","Easing","I18nManager","LinearGradient","useTheme","jsx","_jsx","jsxs","_jsxs","Shimmer","children","width","height","style","shimmerColor","duration","shimmerWidth","theme","isRTL","animatedValue","Value","current","animation","loop","timing","toValue","easing","linear","useNativeDriver","start","stop","numericWidth","ltrOutputRange","rtlOutputRange","translateX","interpolate","inputRange","outputRange","shimmerColors","skeletonShimmer","overflow","backgroundColor","skeletonBackgroundColor","absoluteFillObject","transform","zIndex","colors","flex","x","y","end"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Skeleton/Shimmer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SACEC,IAAI,EACJC,UAAU,EACVC,QAAQ,EACRC,MAAM,EAINC,WAAW,QACN,cAAc;AACrB,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,QAAQ,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYvC,MAAMC,OAA+B,GAAGA,CAAC;EACvCC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG;AACjB,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAM,CAAC,GAAGb,QAAQ,CAAC,CAAC;EAC5B,MAAMc,KAAK,GAAGhB,WAAW,CAACgB,KAAK;EAC/B,MAAMC,aAAa,GAAGtB,MAAM,CAAC,IAAIG,QAAQ,CAACoB,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAE3DzB,SAAS,CAAC,MAAM;IACd,MAAM0B,SAAS,GAAGtB,QAAQ,CAACuB,IAAI,CAC7BvB,QAAQ,CAACwB,MAAM,CAACL,aAAa,EAAE;MAC7BM,OAAO,EAAE,CAAC;MACVV,QAAQ,EAAEA,QAAQ;MAClBW,MAAM,EAAEzB,MAAM,CAAC0B,MAAM;MACrBC,eAAe,EAAE;IACnB,CAAC,CACH,CAAC;IACDN,SAAS,CAACO,KAAK,CAAC,CAAC;IACjB,OAAO,MAAMP,SAAS,CAACQ,IAAI,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACX,aAAa,EAAEJ,QAAQ,CAAC,CAAC;EAE7B,MAAMgB,YAAY,GAAG,OAAOpB,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,GAAG;EAE5D,MAAMqB,cAAc,GAAG,CAAC,CAAChB,YAAY,EAAEe,YAAY,GAAGf,YAAY,CAAC;EACnE,MAAMiB,cAAc,GAAG,CAACF,YAAY,GAAGf,YAAY,EAAE,CAACA,YAAY,CAAC;EAEnE,MAAMkB,UAAU,GAAGf,aAAa,CAACgB,WAAW,CAAC;IAC3CC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClBC,WAAW,EAAEnB,KAAK,GAAGe,cAAc,GAAGD;EACxC,CAAC,CAAC;EAEF,MAAMM,aAAa,GAAG,CACpB,aAAa,EACbxB,YAAY,IAAIG,KAAK,CAACsB,eAAe,EACrC,aAAa,CACd;EAED,oBACE/B,KAAA,CAACV,IAAI;IACHe,KAAK,EAAE,CACL;MACEF,KAAK;MACLC,MAAM;MACN4B,QAAQ,EAAE,QAAQ;MAClBC,eAAe,EAAExB,KAAK,CAACyB;IACzB,CAAC,EACD7B,KAAK,CACL;IAAAH,QAAA,GAEDA,QAAQ,eACTJ,IAAA,CAACN,QAAQ,CAACF,IAAI;MACZe,KAAK,EAAE;QACL,GAAGd,UAAU,CAAC4C,kBAAkB;QAChCC,SAAS,EAAE,CAAC;UAAEV;QAAW,CAAC,CAAC;QAC3BW,MAAM,EAAE;MACV,CAAE;MAAAnC,QAAA,eAEFJ,IAAA,CAACH,cAAc;QACb2C,MAAM,EAAER,aAAqB;QAC7BzB,KAAK,EAAE;UAAEkC,IAAI,EAAE,CAAC;UAAEpC,KAAK,EAAEK;QAAa,CAAE;QACxCa,KAAK,EAAE;UAAEmB,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAI,CAAE;QACxBC,GAAG,EAAE;UAAEF,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAI;MAAE,CACvB;IAAC,CACW,CAAC;EAAA,CACZ,CAAC;AAEX,CAAC;AAED,eAAexC,OAAO","ignoreList":[]}

package/lib/typescript/src/components/Skeleton/Shimmer.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 import { ViewStyle, DimensionValue, StyleProp } from "react-native";
 interface ShimmerProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     width: DimensionValue;
     height: DimensionValue;
     style?: StyleProp<ViewStyle>;
     duration?: number;
     shimmerWidth?: number;
+    shimmerColor?: string;
 }
 declare const Shimmer: React.FC<ShimmerProps>;
 export default Shimmer;

package/lib/typescript/src/components/Skeleton/Shimmer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Skeleton/Shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAKL,SAAS,EACT,cAAc,EACd,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgEnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Skeleton/Shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAKL,SAAS,EACT,cAAc,EACd,SAAS,EAEV,MAAM,cAAc,CAAC;AAItB,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuEnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.8.2",
+  "version": "2.8.3",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/components/Skeleton/Shimmer.tsx

@@ -7,17 +7,19 @@ import {
   ViewStyle,
   DimensionValue,
   StyleProp,
+  I18nManager,
 } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useTheme } from "../../theme";
 
 interface ShimmerProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   width: DimensionValue;
   height: DimensionValue;
   style?: StyleProp<ViewStyle>;
   duration?: number;
   shimmerWidth?: number;
+  shimmerColor?: string;
 }
 
 const Shimmer: React.FC<ShimmerProps> = ({
@@ -25,11 +27,12 @@ const Shimmer: React.FC<ShimmerProps> = ({
   width,
   height,
   style,
+  shimmerColor,
   duration = 1500,
   shimmerWidth = 150,
 }) => {
   const { theme } = useTheme();
-
+  const isRTL = I18nManager.isRTL;
   const animatedValue = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -45,25 +48,31 @@ const Shimmer: React.FC<ShimmerProps> = ({
     return () => animation.stop();
   }, [animatedValue, duration]);
 
+  const numericWidth = typeof width === "number" ? width : 400;
+
+  const ltrOutputRange = [-shimmerWidth, numericWidth + shimmerWidth];
+  const rtlOutputRange = [numericWidth + shimmerWidth, -shimmerWidth];
+
   const translateX = animatedValue.interpolate({
     inputRange: [0, 1],
-
-    outputRange: [
-      -shimmerWidth,
-      typeof width === "number" ? width + shimmerWidth : 400 + shimmerWidth,
-    ],
+    outputRange: isRTL ? rtlOutputRange : ltrOutputRange,
   });
 
   const shimmerColors = [
     "transparent",
-    theme.skeletonShimmer,
+    shimmerColor || theme.skeletonShimmer,
     "transparent",
   ];
 
   return (
     <View
       style={[
-        { width, height, overflow: "hidden", backgroundColor: theme.skeletonBackgroundColor },
+        {
+          width,
+          height,
+          overflow: "hidden",
+          backgroundColor: theme.skeletonBackgroundColor,
+        },
         style,
       ]}
     >