use .set/.set

src/Splash.tsx

@@ -77,40 +77,40 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     return {
       transform: [
         {
-          scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'),
+          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
         },
         {
           scale: interpolate(
-            outroLogo.value,
+            outroLogo.get(),
             [0, 0.08, 1],
             [1, 0.8, 500],
             'clamp',
           ),
         },
       ],
-      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
     }
   })
   const bottomLogoAnimation = useAnimatedStyle(() => {
     return {
-      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
     }
   })
   const reducedLogoAnimation = useAnimatedStyle(() => {
     return {
       transform: [
         {
-          scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'),
+          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
         },
       ],
-      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
     }
   })
 
   const logoWrapperAnimation = useAnimatedStyle(() => {
     return {
       opacity: interpolate(
-        outroAppOpacity.value,
+        outroAppOpacity.get(),
         [0, 0.1, 0.2, 1],
         [1, 1, 0, 0],
         'clamp',
@@ -122,11 +122,11 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     return {
       transform: [
         {
-          scale: interpolate(outroApp.value, [0, 1], [1.1, 1], 'clamp'),
+          scale: interpolate(outroApp.get(), [0, 1], [1.1, 1], 'clamp'),
         },
       ],
       opacity: interpolate(
-        outroAppOpacity.value,
+        outroAppOpacity.get(),
         [0, 0.1, 0.2, 1],
         [0, 0, 1, 1],
         'clamp',
@@ -142,29 +142,35 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     if (isReady) {
       SplashScreen.hideAsync()
         .then(() => {
-          intro.value = withTiming(
+          intro.set(() =>
-            1,
+            withTiming(
-            {duration: 400, easing: Easing.out(Easing.cubic)},
+              1,
-            async () => {
+              {duration: 400, easing: Easing.out(Easing.cubic)},
-              // set these values to check animation at specific point
+              async () => {
-              // outroLogo.value = 0.1
+                // set these values to check animation at specific point
-              // outroApp.value = 0.1
+                outroLogo.set(() =>
-              outroLogo.value = withTiming(
+                  withTiming(
-                1,
+                    1,
-                {duration: 1200, easing: Easing.in(Easing.cubic)},
+                    {duration: 1200, easing: Easing.in(Easing.cubic)},
-                () => {
+                    () => {
-                  runOnJS(onFinish)()
+                      runOnJS(onFinish)()
-                },
+                    },
-              )
+                  ),
-              outroApp.value = withTiming(1, {
+                )
-                duration: 1200,
+                outroApp.set(() =>
-                easing: Easing.inOut(Easing.cubic),
+                  withTiming(1, {
-              })
+                    duration: 1200,
-              outroAppOpacity.value = withTiming(1, {
+                    easing: Easing.inOut(Easing.cubic),
-                duration: 1200,
+                  }),
-                easing: Easing.in(Easing.cubic),
+                )
-              })
+                outroAppOpacity.set(() =>
-            },
+                  withTiming(1, {
+                    duration: 1200,
+                    easing: Easing.in(Easing.cubic),
+                  }),
+                )
+              },
+            ),
           )
         })
         .catch(() => {})