[v5-alpha] Web: `None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread.`

[CatStudioApp]

Bug

No bottom sheet shown without a full refresh Seen warnings like on web console

[react-native-gesture-handler] None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread.

Environment info

"react-native-reanimated": "^3.12.1", "react-native-safe-area-context": "^4.10.8", "@gorhom/bottom-sheet": "5.0.0-alpha.10", "react-native-reanimated": "^3.12.1",

Steps To Reproduce

See code below

Describe what you expected to happen:

Bottom sheet can be shown on web

Reproducible sample code

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Platform, Text, View } from 'react-native';
import { useRoute } from '@react-navigation/native';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
} from '@gorhom/bottom-sheet';

function RightPopover(props: { onPress: () => void }) {
  return (
    <Button {...props} chromeless>
      <Text>+</Text>
    </Button>
  );
}

export function ItemDetailPage() {
  const route = useRoute<ItemDetailPageRouteProps>();
  const navigation = useAppNavigation();
  const { id, title } = route.params;
  const { data, isFetching } = useDefaultServiceGetInfoItem({
    id: id,
  });
  const [webViewLoading, setWebViewLoading] = useState(true);
  const miniBeSnapshot = useSnapshot(coreAppState.miniBe);

  const bottomSheetRef = useRef<BottomSheetModal>(null);
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  const handlePresentModalPress = useCallback(() => {
    bottomSheetRef.current?.present();
  }, []);

  useEffect(() => {
     navigation.setOptions({
        title: data.title,
        // eslint-disable-next-line react/no-unstable-nested-components
        headerRight(props) {
          return <RightPopover {...props} onPress={handlePresentModalPress} />;
        },
      });
  }, [data, handlePresentModalPress, navigation, title]);

  return (
    <BottomSheetModalProvider>
      <PortalProvider>
        <View style={{ flex: 1 }}>
          <Button onPress={handlePresentModalPress}>
            <Text>Test</Text>
          </Button>
          {(isFetching || webViewLoading) && (
            <XStack flex={1} justifyContent="center" alignItems="center">
              <Spinner color="$green10" size="large" />
            </XStack>
          )}

          {id && data && (
            <YStack flex={1} opacity={webViewLoading ? 0 : 1}>
              <CrossPlatformWebView
                onLoadEnd={() => setWebViewLoading(false)}
                onLoadStart={() => setWebViewLoading(true)}
                style={{ flex: 1 }}
                uri={rendererUrl}
              />
            </YStack>
          )}

          <BottomSheetModal ref={bottomSheetRef} onChange={handleSheetChanges}>
            <BottomSheetView>
              <Button onPress={() => bottomSheetRef.current.expand()}>
                <Text>Expands</Text>
              </Button>
              <Button onPress={() => bottomSheetRef.current.close()}>
                <Text>Close</Text>
              </Button>
            </BottomSheetView>
          </BottomSheetModal>
        </View>
      </PortalProvider>
    </BottomSheetModalProvider>
  );
}

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.