[v4] | Bottom Sheet does not open when Debug with Chrome is enabled

[kgtrey1]

Bug

When turning on "debug with chrome", the bottom sheet doesn't open at all. When it's not turned on, everything is working as expected.

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.7
react-native	0.71.11
react-native-reanimated	3.3.0
react-native-gesture-handler	2.12.0

Steps To Reproduce

1. Turn on debug with chrome option during development

Describe what you expected to happen:

When turning on debug with chrome, the bottom sheet should open

Reproducible sample code

`
const OngoingTripMapScreen: React.FC = (): JSX.Element => {
const mapRef = React.useRef(null)
const bottomSheetRef = React.useRef(null)

const styles = Style()

const snapPoints = React.useMemo(() => ['95%'], [])

const onPressSettings = React.useCallback(() => {
    bottomSheetNavigation({ name: MapBottomSheetScreens.SETTINGS_SCREEN })
    bottomSheetRef.current?.snapToIndex(0)
}, [])

const onPressPicture = React.useCallback(() => {
    bottomSheetNavigation({ name: MapBottomSheetScreens.PICTURE_SCREEN })
    bottomSheetRef.current?.snapToIndex(0)
}, [])

const onPressPublish = React.useCallback(() => {}, [])

const resetPosition = React.useCallback((position: LatLng) => {
    mapRef.current?.animateToRegion({
        latitude: position.latitude,
        longitude: position.longitude,
        latitudeDelta: 0.5,
        longitudeDelta: 0.5,
    })
}, [])

return (
    <View style={styles.container}>
        <MapView ref={mapRef} provider="google" style={styles.map} showsUserLocation={true} />
        <BackButton />
        <GpsButton onData={(position) => resetPosition(position)} />
        <Menu
            onPressPublish={onPressPublish}
            onPressPicture={onPressPicture}
            onPressSettings={onPressSettings}
        />
        <BottomSheet
            index={-1}
            ref={bottomSheetRef}
            snapPoints={snapPoints}
            enablePanDownToClose
        >
            <MapBottomSheetNavigator />
        </BottomSheet>
    </View>
)

}
`

[github-actions]

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.

[hemant9793]

@kgtrey1 Bottom Sheet does not open when chrome debugging is enabled because this library relies on React Native Reanimated thus we have to add React Native Reanimated in our app and in v2 of React Native Reanimated it is clearly mentioned in Known problems and limitations that remote debugging is no longer possible in 2.x.

Link for the same - https://docs.swmansion.com/react-native-reanimated/docs/2.x/

This issue persist in RNReanimated 3.x as well but only upto 3.3.0

This issue has been resolved in RN-reanimated 3.x from v3.4.0 and above.

While adding RNReanimated during the installation of gorhom/BottomSheet add RNReanimated v3.4.0 and above in package.json and then rebuild.

[github-actions]

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]

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