Skip to content

[Bug]: BottomSheetScrollView triggers Reanimated 4.6.0 native dependency warning #2758

Description

@bulkinav

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

  1. Install the versions listed above.
  2. Render a BottomSheet containing BottomSheetScrollView.
  3. Start a native development build.
  4. Open the screen containing the bottom sheet.
  5. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions