Skip to content

Commit 7e1de71

Browse files
authored
Don't pass dependencies to Reanimated hooks on native (#4472)
## Description Since Reanimated 4.6 (software-mansion/react-native-reanimated#10009) the native implementations of `useAnimatedStyle`, `useDerivedValue` and other hooks log a dev warning whenever a dependencies argument is passed, since dependencies are only relevant on web: ``` WARN [Reanimated] dependencies should only be used in web implementation. ``` We pass dependencies in two places: - `ReanimatedSwipeable` passes `[appliedTranslation, rowState]` to `useAnimatedStyle`. The dependencies are still needed on web, where bundlers resolve the compiled `lib` output that isn't processed by the Reanimated babel plugin, so they are now passed only when `Platform.OS === 'web'`. - `ReanimatedDrawerLayout` passed an empty array to `useDerivedValue`. An empty array does nothing on any platform (the web fallback only reads non-empty dependencies), so it's simply removed. ## Test plan - Open the Swipeable and Drawer examples in the example app on native and check that the warning is no longer logged. - Check that Swipeable still animates correctly in the example app running on web.
1 parent 80cfa6f commit 7e1de71

2 files changed

Lines changed: 3 additions & 3 deletions

File tree

‎packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,7 @@ const DrawerLayout = function DrawerLayout(
343343

344344
useDerivedValue(() => {
345345
onDrawerSlide && scheduleOnRN(onDrawerSlide, openValue.value);
346-
}, []);
346+
});
347347

348348
const isDrawerOpen = useSharedValue(false);
349349

‎packages/react-native-gesture-handler/src/components/ReanimatedSwipeable/ReanimatedSwipeable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import React, {
77
useRef,
88
} from 'react';
99
import type { LayoutChangeEvent } from 'react-native';
10-
import { I18nManager, StyleSheet, View } from 'react-native';
10+
import { I18nManager, Platform, StyleSheet, View } from 'react-native';
1111
import Animated, {
1212
interpolate,
1313
isSharedValue,
@@ -640,7 +640,7 @@ const Swipeable = (props: SwipeableProps) => {
640640
transform: [{ translateX: appliedTranslation.value }],
641641
pointerEvents: rowState.value === 0 ? 'auto' : 'box-only',
642642
}),
643-
[appliedTranslation, rowState]
643+
Platform.OS === 'web' ? [appliedTranslation, rowState] : undefined
644644
);
645645

646646
const swipeableComponent = (

0 commit comments

Comments
 (0)