Overlay - Githubissues

noelzappy commented 3 years ago

Is it possible to add a transparent overlay to the screen when the Bottom Sheet is open to a particular snap point?

patlux commented 3 years ago

https://github.com/osdnk/react-native-reanimated-bottom-sheet/blob/master/Example/src/screen/AppleMusic.tsx#L51

let fall = new Animated.Value(1)

https://github.com/osdnk/react-native-reanimated-bottom-sheet/blob/master/Example/src/screen/AppleMusic.tsx#L65-L69

const animatedHeaderContentOpacity = Animated.interpolate(fall, {
  inputRange: [0.75, 1],
  outputRange: [0, 1],
  extrapolate: Animated.Extrapolate.CLAMP,
})

https://github.com/osdnk/react-native-reanimated-bottom-sheet/blob/master/Example/src/screen/AppleMusic.tsx#L202-L219

const renderShadow = () => {
  // `react-native-reanimated` v2: Animated.interpolateNode
  const animatedShadowOpacity = Animated.interpolate(fall, {
    inputRange: [0, 1],
    outputRange: [0.5, 0],
  })

  return (
    <AnimatedView
      pointerEvents="none"
      style={[
        styles.shadowContainer,
        {
          opacity: animatedShadowOpacity,
        },
      ]}
    />
  )
}

https://github.com/osdnk/react-native-reanimated-bottom-sheet/blob/master/Example/src/screen/AppleMusic.tsx#L293

<BottomSheet
      ...
      callbackNode={fall}
      ...
/>
{renderShadow()}

JamieGarcia123 commented 2 years ago

thanks needed an overlay as well!

osdnk / react-native-reanimated-bottom-sheet

Overlay #372