[Bug]: Sheet not showing after upgrading react native from 0.75.4 -> 0.76.0

[LA-Johan]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

Did not have new architecture turned on for 0.75.4. Version sheet version 5.0.5.

Code:

import React, { FC, PropsWithChildren, useEffect, useRef } from "react"
import { BottomSheetModal, BottomSheetScrollView, useBottomSheetSpringConfigs } from "@gorhom/bottom-sheet"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { DropdownProps } from "../../../shared-client/props/DropdownProps"
import { ReduceMotion, useReducedMotion, type WithTimingConfig } from "react-native-reanimated"
import { Platform } from "react-native"
import { dismissKeyboard } from "../../utils/keyboardUtils"
import { View } from "./View"
import { BACKGROUND_COLOR, OVERLAY_COLOR, TEXT_DARK, useColorString } from "../../../shared-client/constants/colors"

export const Dropdown: FC<DropdownProps> = ({ children, dropdownContent, openState: [open, setOpen] }) => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null)
  useEffect(() => {
    if (open) {
      bottomSheetModalRef.current?.present()
      dismissKeyboard()
    } else {
      bottomSheetModalRef.current?.dismiss()
    }
  }, [open])
  return (
    <>
      {children}
      <BottomSheetModal
        ref={bottomSheetModalRef}
        backgroundStyle={{ backgroundColor: useColorString(BACKGROUND_COLOR) }}
        handleIndicatorStyle={{ backgroundColor: useColorString(TEXT_DARK) }}
        enableDynamicSizing
        onDismiss={() => setOpen(false)}
        animationConfigs={useAnimationConfig()}
        backdropComponent={() => (
          <View
            laStyle={{ position: { top: 0, bottom: 0, left: 0, right: 0 }, flex: 1, background: OVERLAY_COLOR }}
            onTap={() => setOpen(false)}
          />
        )}
      >
        <InternalView>{dropdownContent}</InternalView>
      </BottomSheetModal>
    </>
  )
}

/*
  There's a bug in BottomSheet which means that sheets will fail to open when reduce motion is enabled. Manually
  providing an animation config with `reduceMotion: ReduceMotion.Never` fixes this, but it does introduce a bit
  of jank when dismissing the sheet. This is a tradeoff we're willing to make for the sake of sheets at least
  working when reduce motion is enabled.

  @see https://github.com/gorhom/react-native-bottom-sheet/issues/1560
*/
const useAnimationConfig = (): WithTimingConfig | undefined => {
  const reduceMotionEnabled = useReducedMotion()
  const overrideConfig = useBottomSheetSpringConfigs({
    damping: 500,
    stiffness: 1000,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 10,
    restSpeedThreshold: 10,
    reduceMotion: ReduceMotion.Never,
  })
  return Platform.OS === "ios" && reduceMotionEnabled ? overrideConfig : undefined
}

const InternalView: FC<PropsWithChildren> = ({ children }) => {
  const insets = useSafeAreaInsets()
  return (
    <BottomSheetScrollView overScrollMode={"never"}>
      {children}
      <View laStyle={{ height: insets.bottom }} />
    </BottomSheetScrollView>
  )
}

Reproduction steps

Could not reproduce in snack.

Reproduction sample

https://snack.expo.dev/vzyoxpZc5yzsyBqVLeISU

Relevant log output

No response

[K3vlarUK]

Have you managed to get any time on this @gorhom ? Having same issue trying out 0.76.1 from 0.75.3

[LA-Johan]

Yes, I'm still seeing it on 0.76.1 as well. Let me know if I can provide any other information.

[fobos531]

it's worth nothing that this issue doesn't appear if dynamic sizing is turned off. So, likely a bug related to dynamic sizing.

[LA-Johan]

@fobos531 I tried without dynamic sizing and still saw the issue (possible the hot reload didn't work and code was stale)

[vorn-dev-ni]

same same

[LA-Johan]

@gorhom is it possible to get a status update on this issue?

[fobos531]

Hello everyone, can you try the following fix to see if it fixes the issue for you?

#2010 (comment)