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