fix: linear gradient animation not working in expo sdk 56

example/app.json

@@ -27,6 +27,9 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "plugins": ["expo-router"]
+    "plugins": [
+      "expo-router",
+      "expo-status-bar"
+    ]
   }
 }

example/package.json

@@ -9,24 +9,26 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~4.0.1",
-    "expo": "~52.0.46",
-    "expo-constants": "~17.0.8",
-    "expo-linear-gradient": "^14.1.4",
-    "expo-linking": "~7.0.5",
-    "expo-router": "~4.0.21",
-    "expo-status-bar": "~2.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.9",
-    "react-native-reanimated": "~3.16.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-svg": "^15.12.0",
-    "react-native-web": "~0.19.13"
+    "@expo/metro-runtime": "~56.0.12",
+    "@expo/vector-icons": "^15.0.2",
+    "expo": "~56.0.4",
+    "expo-constants": "~56.0.15",
+    "expo-linear-gradient": "~56.0.4",
+    "expo-linking": "~56.0.11",
+    "expo-router": "~56.2.6",
+    "expo-status-bar": "~56.0.4",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "4.25.2",
+    "react-native-svg": "15.15.4",
+    "react-native-web": "^0.21.2",
+    "react-native-worklets": "0.8.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.29.0",
     "react-native-builder-bob": "^0.40.6"
   },
   "private": true

example/src/app/(tabs)/_layout.tsx

@@ -1,11 +1,12 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { Tabs } from 'expo-router';
 import { useCallback } from 'react';
+import type { ColorValue } from 'react-native';
 
 export default function TabLayout() {
   const renderBarIcon = useCallback(
     (name: keyof typeof FontAwesome.glyphMap) => {
-      return ({ color }: { color: string }) => (
+      return ({ color }: { color: ColorValue }) => (
         <FontAwesome size={28} name={name} color={color} />
       );
     },

example/src/app/(tabs)/index.tsx

@@ -1,5 +1,6 @@
 import { ShimmerProvider } from 'react-native-fast-shimmer';
-import { StyleSheet, SafeAreaView } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { AvatarShimmers } from '../../components/AvatarShimmers';
 import { LongShimmers } from '../../components/LongShimmers';
 import { ShimmerConfigs } from '../../components/ShimmerConfigs';

package.json

@@ -77,11 +77,11 @@
     "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
-    "react": "18.3.1",
-    "react-native": "0.76.9",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
     "react-native-builder-bob": "^0.40.6",
-    "react-native-reanimated": "^3.17.5",
-    "react-native-svg": "^15.12.0",
+    "react-native-reanimated": "^4.3.1",
+    "react-native-svg": "^15.15.4",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },

src/Shimmer.tsx

@@ -98,5 +98,5 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
   },
-  gradientWrapper: StyleSheet.absoluteFillObject,
+  gradientWrapper: StyleSheet.absoluteFill,
 });