forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix backdrop issues by using custom logic (#3072)
* use custom backdrop
* use custom backdrop
* org imports
* rm log
+47
-11
+47
-11
src/components/Dialog/index.tsx
+47
-11
src/components/Dialog/index.tsx
···
1
1
import React, {useImperativeHandle} from 'react'
2
-
import {View, Dimensions, Keyboard} from 'react-native'
2
+
import {View, Dimensions, Keyboard, Pressable} from 'react-native'
3
3
import BottomSheet, {
4
-
BottomSheetBackdrop,
4
+
BottomSheetBackdropProps,
5
5
BottomSheetScrollView,
6
6
BottomSheetTextInput,
7
7
BottomSheetView,
8
+
useBottomSheet,
9
+
WINDOW_HEIGHT,
8
10
} from '@gorhom/bottom-sheet'
9
11
import {useSafeAreaInsets} from 'react-native-safe-area-context'
12
+
import Animated, {useAnimatedStyle} from 'react-native-reanimated'
10
13
11
14
import {useTheme, atoms as a, flatten} from '#/alf'
12
15
import {Portal} from '#/components/Portal'
···
25
28
export * from '#/components/Dialog/types'
26
29
// @ts-ignore
27
30
export const Input = createInput(BottomSheetTextInput)
31
+
32
+
function Backdrop(props: BottomSheetBackdropProps) {
33
+
const t = useTheme()
34
+
const bottomSheet = useBottomSheet()
35
+
36
+
const animatedStyle = useAnimatedStyle(() => {
37
+
const opacity =
38
+
(Math.abs(WINDOW_HEIGHT - props.animatedPosition.value) - 50) / 1000
39
+
40
+
return {
41
+
opacity: Math.min(Math.max(opacity, 0), 0.55),
42
+
}
43
+
})
44
+
45
+
const onPress = React.useCallback(() => {
46
+
bottomSheet.close()
47
+
}, [bottomSheet])
48
+
49
+
return (
50
+
<Animated.View
51
+
style={[
52
+
t.atoms.bg_contrast_300,
53
+
{
54
+
top: 0,
55
+
left: 0,
56
+
right: 0,
57
+
bottom: 0,
58
+
position: 'absolute',
59
+
},
60
+
animatedStyle,
61
+
]}>
62
+
<Pressable
63
+
accessibilityRole="button"
64
+
accessibilityLabel="Dialog backdrop"
65
+
accessibilityHint="Press the backdrop to close the dialog"
66
+
style={{flex: 1}}
67
+
onPress={onPress}
68
+
/>
69
+
</Animated.View>
70
+
)
71
+
}
28
72
29
73
export function Outer({
30
74
children,
···
114
158
ref={sheet}
115
159
index={openIndex}
116
160
backgroundStyle={{backgroundColor: 'transparent'}}
117
-
backdropComponent={props => (
118
-
<BottomSheetBackdrop
119
-
opacity={0.4}
120
-
appearsOnIndex={0}
121
-
disappearsOnIndex={-1}
122
-
{...props}
123
-
style={[flatten(props.style), t.atoms.bg_contrast_300]}
124
-
/>
125
-
)}
161
+
backdropComponent={Backdrop}
126
162
handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
127
163
handleStyle={{display: 'none'}}
128
164
onChange={onChange}>