Version
v5
Reanimated Version
v3
Gesture Handler Version
v2
Platforms
Android
What happened?
After upgrading react-native-reanimated to 4.6.0, mounting BottomSheetScrollView produces the following warning in native development builds:
[Reanimated] dependencies should only be used in web implementation.
The bottom sheet remains functional, but the warning is emitted whenever the scrollable component mounts.
Environment
| Library |
Version |
@gorhom/bottom-sheet |
5.2.14 |
react-native |
0.86.3 |
react |
19.2.3 |
react-native-reanimated |
4.6.0 |
react-native-worklets |
0.12.1 |
react-native-gesture-handler |
3.2.1 |
Platform: native (Android / iOS).
Steps to reproduce
- Install the versions listed above.
- Render a
BottomSheet containing BottomSheetScrollView.
- Start a native development build.
- Open the screen containing the bottom sheet.
- Observe the Reanimated warning.
Reproduction steps
Reproduction
import React from 'react';
import { Text } from 'react-native';
import BottomSheet, {
BottomSheetScrollView,
} from '@gorhom/bottom-sheet';
export function Example() {
return (
<BottomSheet index={0} snapPoints={['50%']}>
<BottomSheetScrollView>
<Text>Content</Text>
</BottomSheetScrollView>
</BottomSheet>
);
}
Actual behavior
The following warning is logged:
[Reanimated] dependencies should only be used in web implementation.
at useHandler (useHandler.native.ts)
at useAnimatedScrollHandler (useAnimatedScrollHandler.ts)
at useScrollHandler (useScrollHandler.ts)
at BottomSheetScrollView (createBottomSheetScrollableComponent.tsx)
Expected behavior
BottomSheetScrollView should not pass an explicit dependency array to Reanimated hooks on native platforms.
Suspected cause
useScrollHandler passes a dependency array as the second argument of useAnimatedScrollHandler:
https://github.com/gorhom/react-native-bottom-sheet/blob/v5.2.14/src/hooks/useScrollHandler.ts
Reanimated 4.6.0 forwards this argument to its native useHandler implementation. The implementation now warns whenever dependencies !== undefined:
https://github.com/software-mansion/react-native-reanimated/blob/4.6.0/packages/react-native-reanimated/src/hook/useHandler.native.ts
According to the Reanimated API, dependency arrays are only relevant on Web when the Worklets Babel plugin is unavailable.
Suggested fix
Preserve the dependency array on Web, but pass undefined on native:
import { Platform } from 'react-native';
const scrollHandler = useAnimatedScrollHandler(
handlers,
Platform.OS === 'web' ? dependencies : undefined
);
A platform-specific implementation such as useScrollHandler.web.ts and useScrollHandler.native.ts would also solve the issue.
This keeps Web-without-plugin dependency tracking while avoiding the native warning introduced by Reanimated 4.6.0.
Reproduction sample
https://snack.expo.dev/@yoy123/bottomsheetscrollview---reanimated-4_6_0-dependency-warning
Relevant log output
[Reanimated] dependencies should only be used in web implementation.
Version
v5
Reanimated Version
v3
Gesture Handler Version
v2
Platforms
Android
What happened?
After upgrading
react-native-reanimatedto 4.6.0, mountingBottomSheetScrollViewproduces the following warning in native development builds:The bottom sheet remains functional, but the warning is emitted whenever the scrollable component mounts.
Environment
@gorhom/bottom-sheetreact-nativereactreact-native-reanimatedreact-native-workletsreact-native-gesture-handlerPlatform: native (Android / iOS).
Steps to reproduce
BottomSheetcontainingBottomSheetScrollView.Reproduction steps
Reproduction
Actual behavior
The following warning is logged:
Expected behavior
BottomSheetScrollViewshould not pass an explicit dependency array to Reanimated hooks on native platforms.Suspected cause
useScrollHandlerpasses a dependency array as the second argument ofuseAnimatedScrollHandler:https://github.com/gorhom/react-native-bottom-sheet/blob/v5.2.14/src/hooks/useScrollHandler.ts
Reanimated 4.6.0 forwards this argument to its native
useHandlerimplementation. The implementation now warns wheneverdependencies !== undefined:https://github.com/software-mansion/react-native-reanimated/blob/4.6.0/packages/react-native-reanimated/src/hook/useHandler.native.ts
According to the Reanimated API, dependency arrays are only relevant on Web when the Worklets Babel plugin is unavailable.
Suggested fix
Preserve the dependency array on Web, but pass
undefinedon native:A platform-specific implementation such as
useScrollHandler.web.tsanduseScrollHandler.native.tswould also solve the issue.This keeps Web-without-plugin dependency tracking while avoiding the native warning introduced by Reanimated 4.6.0.
Reproduction sample
https://snack.expo.dev/@yoy123/bottomsheetscrollview---reanimated-4_6_0-dependency-warning
Relevant log output
[Reanimated] dependencies should only be used in web implementation.