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

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

[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

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