@hero-design/rn 8.130.1 → 8.130.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.130.2
+
+### Patch Changes
+
+- [#5111](https://github.com/Thinkei/hero-design/pull/5111) [`5c7a1ca03f77cf8a1113ce74b95d3bb3949bbe3a`](https://github.com/Thinkei/hero-design/commit/5c7a1ca03f77cf8a1113ce74b95d3bb3949bbe3a) Thanks [@haudao-eh](https://github.com/haudao-eh)! - Migrate Skeleton shimmer gradient from react-native-linear-gradient to expo-linear-gradient
+
 ## 8.130.1
 
 ### Patch Changes

package/README.md

@@ -18,8 +18,8 @@ yarn add @hero-design/react-native-month-year-picker@^8.43.2
 yarn add @ptomasroos/react-native-multi-slider@^2.2.2
 yarn add @react-native-community/datetimepicker@^3.5.2
 yarn add @react-native-community/slider@^4.5.1
+yarn add "expo-linear-gradient@>=14.0.0"
 yarn add react-native-gesture-handler@~2.20.2
-yarn add react-native-linear-gradient@^2.8.3
 yarn add react-native-pager-view@^6.7.0
 yarn add react-native-safe-area-context@^4.7.0
 yarn add react-native-svg@^15.11.2
@@ -28,6 +28,7 @@ yarn add react-native-webview@^13.10.2
 ```
 
 **Requirements:**
+
 - React 18.3.1
 - React Native 0.77.3
 - Node.js >= 20.0.0 (20.x or 22.x supported)
@@ -44,11 +45,17 @@ Wrap your application with `HeroDesignProvider` to enable theming, localization,
 
 ```tsx
 import React from 'react';
-import { HeroDesignProvider, getTheme, Button, Card, Typography } from '@hero-design/rn';
+import {
+  HeroDesignProvider,
+  getTheme,
+  Button,
+  Card,
+  Typography,
+} from '@hero-design/rn';
 
 function App() {
   const theme = getTheme();
-  
+
   return (
     <HeroDesignProvider theme={theme}>
       <Card>
@@ -72,11 +79,7 @@ For product-specific themes, use `ThemeSwitcher` which provides a predefined the
 import { ThemeSwitcher } from '@hero-design/rn';
 
 function App() {
-  return (
-    <ThemeSwitcher name="ehWork">
-      {/* Your app */}
-    </ThemeSwitcher>
-  );
+  return <ThemeSwitcher name="ehWork">{/* Your app */}</ThemeSwitcher>;
 }
 ```
 

package/es/index.js

@@ -12,7 +12,6 @@ import DateTimePicker from '@react-native-community/datetimepicker';
 import RnSlider from '@react-native-community/slider';
 import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { RectButton, GestureHandlerRootView, Swipeable as Swipeable$1 } from 'react-native-gesture-handler';
-import LinearGradient$1 from 'react-native-linear-gradient';
 import PagerView from 'react-native-pager-view';
 import { EventEmitter } from 'events';
 import { WebView } from 'react-native-webview';
@@ -27530,7 +27529,6 @@ var StyledGradientContainer = index$c(Box)(function (_ref2) {
 });
 
 var _excluded$b = ["intent", "variant", "style", "onLayout"];
-var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient$1);
 var gradientPositions = {
   start: {
     x: 0,
@@ -27604,18 +27602,23 @@ var Skeleton = function Skeleton(_ref) {
     onLayout: onContainerLayout
   }, props), /*#__PURE__*/React__default.createElement(StyledGradientContainer, {
     themeVariant: variant
-  }, /*#__PURE__*/React__default.createElement(AnimatedLinearGradient, {
-    start: gradientPositions.start,
-    end: gradientPositions.end,
+  }, /*#__PURE__*/React__default.createElement(Animated.View, {
     style: {
       width: '100%',
       height: '100%',
       transform: [{
         translateX: translateX
       }]
+    }
+  }, /*#__PURE__*/React__default.createElement(LinearGradient, {
+    start: gradientPositions.start,
+    end: gradientPositions.end,
+    style: {
+      width: '100%',
+      height: '100%'
     },
     colors: colors
-  })));
+  }))));
 };
 
 var StyledSuccessContainer = index$c(View)(function (_ref) {

package/jest.config.js

@@ -19,6 +19,6 @@ module.exports = {
   roots: ['<rootDir>/src'],
   snapshotSerializers: ['@emotion/jest/serializer'],
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?@react-native|@emotion/.*|react-native|react-native-linear-gradient|react-native-pager-view|@react-native-community|@react-native-masked-view|expo-linear-gradient|nanoid|d3|d3-.*|internmap|delaunator|robust-predicates)/)',
+    'node_modules/(?!((jest-)?@react-native|@emotion/.*|react-native|react-native-pager-view|@react-native-community|@react-native-masked-view|expo-linear-gradient|nanoid|d3|d3-.*|internmap|delaunator|robust-predicates)/)',
   ],
 };

package/lib/index.js

@@ -12,7 +12,6 @@ var DateTimePicker = require('@react-native-community/datetimepicker');
 var RnSlider = require('@react-native-community/slider');
 var MultiSlider = require('@ptomasroos/react-native-multi-slider');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
-var LinearGradient = require('react-native-linear-gradient');
 var PagerView = require('react-native-pager-view');
 var events = require('events');
 var reactNativeWebview = require('react-native-webview');
@@ -44,7 +43,6 @@ var Svg__default = /*#__PURE__*/_interopDefaultCompat(Svg);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultCompat(DateTimePicker);
 var RnSlider__default = /*#__PURE__*/_interopDefaultCompat(RnSlider);
 var MultiSlider__default = /*#__PURE__*/_interopDefaultCompat(MultiSlider);
-var LinearGradient__default = /*#__PURE__*/_interopDefaultCompat(LinearGradient);
 var PagerView__default = /*#__PURE__*/_interopDefaultCompat(PagerView);
 
 function _arrayLikeToArray(r, a) {
@@ -27560,7 +27558,6 @@ var StyledGradientContainer = index$c(Box)(function (_ref2) {
 });
 
 var _excluded$b = ["intent", "variant", "style", "onLayout"];
-var AnimatedLinearGradient = reactNative.Animated.createAnimatedComponent(LinearGradient__default.default);
 var gradientPositions = {
   start: {
     x: 0,
@@ -27634,18 +27631,23 @@ var Skeleton = function Skeleton(_ref) {
     onLayout: onContainerLayout
   }, props), /*#__PURE__*/React__namespace.default.createElement(StyledGradientContainer, {
     themeVariant: variant
-  }, /*#__PURE__*/React__namespace.default.createElement(AnimatedLinearGradient, {
-    start: gradientPositions.start,
-    end: gradientPositions.end,
+  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.Animated.View, {
     style: {
       width: '100%',
       height: '100%',
       transform: [{
         translateX: translateX
       }]
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(expoLinearGradient.LinearGradient, {
+    start: gradientPositions.start,
+    end: gradientPositions.end,
+    style: {
+      width: '100%',
+      height: '100%'
     },
     colors: colors
-  })));
+  }))));
 };
 
 var StyledSuccessContainer = index$c(reactNative.View)(function (_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.130.1",
+  "version": "8.130.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,7 +45,6 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.7.0",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-svg": "^15.11.2",
@@ -100,7 +99,6 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-linear-gradient": "2.8.3",
     "react-native-pager-view": "6.9.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-svg": "15.12.1",

package/rollup.config.mjs

@@ -45,7 +45,6 @@ export default [
       'react-native-webview',
       'react-native-pager-view',
       'react-native-vector-icons',
-      'react-native-linear-gradient',
       '@hero-design/react-native-month-year-picker',
       '@ptomasroos/react-native-multi-slider',
     ],

package/src/components/Skeleton/index.tsx

@@ -1,4 +1,4 @@
-import LinearGradient from 'react-native-linear-gradient';
+import { LinearGradient } from 'expo-linear-gradient';
 import React, {
   useEffect,
   useMemo,
@@ -6,7 +6,7 @@ import React, {
   useCallback,
   useRef,
 } from 'react';
-import type { LayoutChangeEvent, ViewProps } from 'react-native';
+import type { ColorValue, LayoutChangeEvent, ViewProps } from 'react-native';
 import { Animated, Easing, Platform, StyleSheet } from 'react-native';
 import type { Theme } from '../../theme';
 import { useTheme } from '../../theme';
@@ -23,14 +23,15 @@ interface SkeletonProps extends ViewProps {
   variant?: 'circular' | 'rectangular' | 'rounded';
 }
 
-const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
-
 const gradientPositions = {
   start: { x: 0, y: 0 },
   end: { x: 1, y: 0 },
 };
 
-const getGradientColors = (theme: Theme, intent: 'light' | 'dark') => {
+const getGradientColors = (
+  theme: Theme,
+  intent: 'light' | 'dark'
+): [ColorValue, ColorValue, ColorValue] => {
   switch (intent) {
     case 'light': {
       return [
@@ -107,16 +108,16 @@ const Skeleton = ({
       {...props}
     >
       <StyledGradientContainer themeVariant={variant}>
-        <AnimatedLinearGradient
-          start={gradientPositions.start}
-          end={gradientPositions.end}
-          style={{
-            width: '100%',
-            height: '100%',
-            transform: [{ translateX }],
-          }}
-          colors={colors}
-        />
+        <Animated.View
+          style={{ width: '100%', height: '100%', transform: [{ translateX }] }}
+        >
+          <LinearGradient
+            start={gradientPositions.start}
+            end={gradientPositions.end}
+            style={{ width: '100%', height: '100%' }}
+            colors={colors}
+          />
+        </Animated.View>
       </StyledGradientContainer>
     </StyledContainer>
   );