@artsy/palette-mobile 19.7.0 → 19.8.0

package/dist/elements/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from "react-native-reanimated";
+import { useEffect, useRef } from "react";
+import { Animated } from "react-native";
 import { useColor } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
@@ -15,14 +15,17 @@ import { Text } from "../Text";
  * </Skeleton>
  */
 export const Skeleton = ({ children }) => {
-    const opacity = useSharedValue(0.5);
+    const opacity = useRef(new Animated.Value(0.5));
     useEffect(() => {
-        opacity.set(() => withRepeat(withTiming(1, { duration: 1000, easing: Easing.ease }), -1, true));
-    }, [opacity]);
-    const fadeLoopAnim = useAnimatedStyle(() => {
-        return { opacity: opacity.get() };
+        Animated.loop(Animated.timing(opacity.current, {
+            toValue: 1,
+            duration: 1000,
+            useNativeDriver: true,
+        })).start();
     }, []);
-    return _jsx(Animated.View, { style: fadeLoopAnim, children: children });
+    return (_jsx(Animated.View, { style: {
+            opacity: opacity.current,
+        }, children: children }));
 };
 export const SkeletonText = ({ children, ...rest }) => {
     const color = useColor();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "19.7.0",
+  "version": "19.8.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "expo run:android --port 8082",