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