skeleton fixes

Author: nandorojo

examples/with-expo/App.tsx

@@ -1,10 +1,10 @@
 // export { default } from './src/Drip.Presence'
 // export { default } from './src/Moti.ExitBeforeEnter'
 // export { default } from './src/Moti.Loop'
-// export { default } from './src/Moti.Skeleton'
+export { default } from './src/Moti.Skeleton'
 // export { default } from './src/Moti.Gallery'
 // export { default } from './src/Moti.Sequence'
-export { default } from './src/Moti.Factory'
+// export { default } from './src/Moti.Factory'
 // export { default } from './src/Moti.KeyPresence'
 // export { default } from './src/Moti.Transform'
 // export { default } from './src/Moti.Pressable'

examples/with-expo/package.json

@@ -14,27 +14,27 @@
     "@motify/interactions": "^0.16.1",
     "@motify/skeleton": "^0.16.1",
     "core-js": "^3",
-    "expo": "^44.0.0-beta.2",
-    "expo-splash-screen": "~0.14.0",
-    "expo-status-bar": "~1.2.0",
+    "expo": "^49.0.0",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
     "lodash.set": "^4.3.2",
     "moti": "^0.16.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-native": "0.64.3",
-    "react-native-gesture-handler": "~2.1.0",
-    "react-native-reanimated": "3.5.4",
-    "react-native-svg": "13.4.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.5",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-svg": "13.9.0",
     "react-native-unimodules": "~0.15.0",
-    "react-native-web": "0.17.1"
+    "react-native-web": "~0.19.6"
   },
   "devDependencies": {
-    "@babel/core": "~7.12.10",
+    "@babel/core": "^7.20.0",
     "@babel/runtime": "^7.9.6",
     "@types/lodash.set": "^4.3.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "9.0.1",
+    "babel-preset-expo": "^9.5.0",
     "esbuild": "^0.13.13",
     "metro-minify-esbuild": "^0.1.0"
   }

packages/moti/package.json

@@ -1,7 +1,7 @@
 {
   "name": "moti",
   "private": false,
-  "version": "0.26.0",
+  "version": "0.26.1",
   "keywords": [
     "react-native",
     "ios",

packages/moti/src/skeleton/skeleton-new.tsx

@@ -104,7 +104,7 @@ const AnimatedGradient = React.memo(
   function AnimatedGradient({
     colors,
     backgroundSize,
-    transition = {},
+    transition,
     show,
     measuredWidthSv,
     Gradient,
@@ -137,10 +137,18 @@ const AnimatedGradient = React.memo(
           }
         }, [measuredWidthSv, show])}
         transition={{
-          loop: show,
-          delay: 200,
-          type: 'timing',
-          duration: 3000,
+          translateX: {
+            type: 'timing',
+
+            loop: show,
+            delay: 200,
+            duration: 3000,
+          },
+          opacity: {
+            type: 'timing',
+            delay: 0,
+            duration: 200,
+          },
           ...(transition as any),
         }}
       >