diff --git a/playground/src/screens/sharedElementCarDealer/CarCard.tsx b/playground/src/screens/sharedElementCarDealer/CarCard.tsx index 21d9720487e..5457f844553 100644 --- 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 index 9cbd4d1b59c..60375776707 100644 --- 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 = ({ 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 = ({ 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 index eab63c27b55..0d52a5fec31 100644 --- 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 = ({ 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 index 924e0747a07..54fbcdfb1a8 100644 --- 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], })