Fix playground reanimated animations (#7375)

wix · Nov 25, 2021 · bcf0edb · bcf0edb
1 parent 623c239
commit bcf0edb
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/playground/src/screens/sharedElementCarDealer/CarCard.tsx b/playground/src/screens/sharedElementCarDealer/CarCard.tsx
@@ -1,7 +1,7 @@
 import { BlurView } from '@react-native-community/blur';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { StyleSheet, Text, Dimensions, ViewProps, Platform } from 'react-native';
-import Reanimated, { Easing, useValue } from 'react-native-reanimated';
+import Reanimated, { EasingNode, useValue } from 'react-native-reanimated';
 import FastImage from 'react-native-fast-image';
 import { CarItem } from '../../assets/cars';
 import { hexToRgba } from '../../commons/Colors';
@@ -44,7 +44,7 @@ export default function CarCard({
     Reanimated.timing(textContainerOpacity, {
       toValue: 0,
       duration: 300,
-      easing: Easing.linear,
+      easing: EasingNode.linear,
     }).start();
   }, [onCarPressed, textContainerOpacity]);
   const onFocus = useCallback(() => {
@@ -53,7 +53,7 @@ export default function CarCard({
       Reanimated.timing(textContainerOpacity, {
         toValue: 1,
         duration: 300,
-        easing: Easing.linear,
+        easing: EasingNode.linear,
       }).start();
     }
   }, [textContainerOpacity]);

diff --git a/playground/src/screens/sharedElementCarDealer/CarDetailsScreen.tsx b/playground/src/screens/sharedElementCarDealer/CarDetailsScreen.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react-native-navigation';
 import { CarItem } from '../../assets/cars';
 import FastImage from 'react-native-fast-image';
-import Reanimated, { Easing, useValue } from 'react-native-reanimated';
+import Reanimated, { EasingNode, useValue } from 'react-native-reanimated';
 import DismissableView from './DismissableView';
 import useDismissGesture from './useDismissGesture';
 import { buildFullScreenSharedElementAnimations, SET_DURATION } from './Constants';
@@ -47,7 +47,7 @@ const CarDetailsScreen: NavigationFunctionComponent<Props> = ({ car, componentId
   );
   const headerY = useMemo(
     () =>
-      Reanimated.interpolate(scrollY, {
+      Reanimated.interpolateNode(scrollY, {
         inputRange: [0, HEADER_HEIGHT],
         outputRange: [0, -HEADER_HEIGHT],
         extrapolateLeft: Reanimated.Extrapolate.CLAMP,
@@ -83,7 +83,7 @@ const CarDetailsScreen: NavigationFunctionComponent<Props> = ({ car, componentId
       Reanimated.timing(dismissGesture.controlsOpacity, {
         toValue: 1,
         duration: 300,
-        easing: Easing.linear,
+        easing: EasingNode.linear,
       }).start();
     }, SET_DURATION);
   }, [dismissGesture.controlsOpacity]);

diff --git a/playground/src/screens/sharedElementCarDealer/CarStoryScreen.tsx b/playground/src/screens/sharedElementCarDealer/CarStoryScreen.tsx
@@ -7,7 +7,7 @@ import {
   OptionsModalTransitionStyle,
 } from 'react-native-navigation';
 import { CarItem } from '../../assets/cars';
-import Reanimated, { Easing } from 'react-native-reanimated';
+import Reanimated, { EasingNode } from 'react-native-reanimated';
 import DismissableView from './DismissableView';
 import useDismissGesture from './useDismissGesture';
 import { SET_DURATION } from './Constants';
@@ -38,7 +38,7 @@ const CarStoryScreen: NavigationFunctionComponent<Props> = ({ car, componentId }
       Reanimated.timing(dismissGesture.controlsOpacity, {
         toValue: 1,
         duration: 300,
-        easing: Easing.linear,
+        easing: EasingNode.linear,
       }).start();
     }, SET_DURATION);
   }, [dismissGesture.controlsOpacity]);

diff --git a/playground/src/screens/sharedElementCarDealer/useDismissGesture.ts b/playground/src/screens/sharedElementCarDealer/useDismissGesture.ts
@@ -41,14 +41,14 @@ export default function useDismissGesture(navigateBack: () => void): DismissGest
   const enableGesture = useValue<0 | 1>(1); // Overrides gestureHandler.state to not trigger State.END cond() block when already released and navigating back
 
   const cardBorderRadius = useMemo(() => {
-    return Reanimated.interpolate(dismissAnimationProgress, {
+    return Reanimated.interpolateNode(dismissAnimationProgress, {
       inputRange: [0, 1],
       outputRange: [0, 30],
       extrapolate: Extrapolate.CLAMP,
     });
   }, [dismissAnimationProgress]);
   const viewScale = useMemo(() => {
-    return Reanimated.interpolate(dismissAnimationProgress, {
+    return Reanimated.interpolateNode(dismissAnimationProgress, {
       inputRange: [0, 1],
       outputRange: [1, 0.8],
       extrapolate: Extrapolate.CLAMP,
@@ -61,14 +61,14 @@ export default function useDismissGesture(navigateBack: () => void): DismissGest
         cond(eq(gestureHandler.state, State.ACTIVE), [
           set(
             dismissAnimationProgress,
-            Reanimated.interpolate(gestureHandler.translation.y, {
+            Reanimated.interpolateNode(gestureHandler.translation.y, {
               inputRange: [0, SCREEN_HEIGHT * 0.2],
               outputRange: [0, 1],
             })
           ),
           set(
             controlsOpacity,
-            Reanimated.interpolate(gestureHandler.translation.y, {
+            Reanimated.interpolateNode(gestureHandler.translation.y, {
               inputRange: [0, SCREEN_HEIGHT * 0.1, SCREEN_HEIGHT * 0.2],
               outputRange: [1, 0, 0],
             })