Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {useMemo} from 'react'
2import {TouchableWithoutFeedback} from 'react-native'
3import Animated, {
4 Extrapolation,
5 interpolate,
6 useAnimatedStyle,
7} from 'react-native-reanimated'
8import {type BottomSheetBackdropProps} from '@discord/bottom-sheet/src'
9import {msg} from '@lingui/core/macro'
10import {useLingui} from '@lingui/react'
11
12export function createCustomBackdrop(
13 onClose?: () => void,
14): React.FC<BottomSheetBackdropProps> {
15 const CustomBackdrop = ({animatedIndex, style}: BottomSheetBackdropProps) => {
16 const {_} = useLingui()
17
18 // animated variables
19 const opacity = useAnimatedStyle(() => ({
20 opacity: interpolate(
21 animatedIndex.get(), // current snap index
22 [-1, 0], // input range
23 [0, 0.5], // output range
24 Extrapolation.CLAMP,
25 ),
26 }))
27
28 const containerStyle = useMemo(
29 () => [style, {backgroundColor: '#000'}, opacity],
30 [style, opacity],
31 )
32
33 return (
34 <TouchableWithoutFeedback
35 onPress={onClose}
36 accessibilityLabel={_(msg`Close bottom drawer`)}
37 accessibilityHint=""
38 onAccessibilityEscape={() => {
39 if (onClose !== undefined) {
40 onClose()
41 }
42 }}>
43 <Animated.View style={containerStyle} />
44 </TouchableWithoutFeedback>
45 )
46 }
47 return CustomBackdrop
48}