[v4] BottomSheetBackdrop - appearsOnIndex of 0 fails to render backdrop (has workaround)

[jakobo]

Bug

• I'm willing to provide a pull request for this issue

As of 4.1.5, the BottomSheetBackdrop does not support a value of appearsOnIndex={0}. The root cause seems to be coercion to a default of 1 from a falsey 0 value.

Environment info

Library	Version
@gorhom/bottom-sheet	4.1.5
react-native	0.64.3
react-native-reanimated	2.2.4
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Create a bottom sheet with a custom backdrop using the renderBackdrop from the example
2. Provide the properties appearsOnIndex={0} and disappearsOnIndex={0}

Describe what you expected to happen:

1. The backdrop should be visible on index 0

Workaround Providing a snapIndex such as snapIndex={[1, "40%"]} will work although technically the modal will be visible at the bottom of the screen. Alternatively, you can copy/paste the BottomSheetBackdrop into a new component with either new defaults or fixed coercion.

Reproducible sample code

Reproducible Snack: https://snack.expo.dev/@jakobo/bottomsheetbackdrop---appearsonindex-bug

[jakobo]

In case someone gets to this before I can put a PR together, the issue is here and the signature probably needs to be rewritten to something like:

const BottomSheetBackdropComponent = ({
  animatedIndex,
  opacity,
  appearsOnIndex,
  disappearsOnIndex,
  enableTouchThrough = DEFAULT_ENABLE_TOUCH_THROUGH,
  pressBehavior = DEFAULT_PRESS_BEHAVIOR,
  style,
  children,
}: BottomSheetDefaultBackdropProps) => {
  //#region defaults
  opacity = opacity ?? DEFAULT_OPACITY;
  appearsOnIndex = appearsOnIndex ?? DEFAULT_APPEARS_ON_INDEX;
  disappearsOnIndex = disappearsOnIndex ?? DEFAULT_DISAPPEARS_ON_INDEX;
  //#endregion

It's only an issue because the initial value of 0 will get forced to their non-zero defaults. This problem technically exits with setting default opacity as well, but it's more noticeable with appearsOnIndex since we're no longer setting our first snap point of 0. Alternatively, we can use a non ?? operator like either of the below.

// conditional operator for undefined value
opacity = (typeof opacity !== "undefined") ? opacity : DEFAULT_OPACITY;

// Allow explicit zero, otherwise coerce
opacity = opacity === 0 ? 0 : opacity || DEFAULT_OPACITY;

[pnogier]

Hi, any update on this issue ? 🙏

[jakobo]

PR is in #793. Hopefully it gets addressed soon. In the meantime, you can create your own backdrop with the changes, which is what we did.

[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.

[IngyuTae]

You could write a custom backdrop component until the PR merged

import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet'
import React, { useMemo } from 'react'
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedStyle,
} from 'react-native-reanimated'

const CustomBackdrop = ({ animatedIndex, style }: BottomSheetBackdropProps) => {
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
      animatedIndex.value,
      [-1, 0],
      [0, 0.5],
      Extrapolate.CLAMP
    ),
  }))

  const containerStyle = useMemo(
    () => [style, { backgroundColor: '#a8b5eb' }, containerAnimatedStyle],
    [style, containerAnimatedStyle]
  )

  return <Animated.View style={containerStyle} />
}

export default CustomBackdrop