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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
import {useCallback, useEffect} from 'react'
import {BackHandler, useWindowDimensions, View} from 'react-native'
import {Drawer} from 'react-native-drawer-layout'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {StatusBar} from 'expo-status-bar'
import {useNavigation, useNavigationState} from '@react-navigation/native'
import {useDedupe} from '#/lib/hooks/useDedupe'
import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
import {useNotificationsHandler} from '#/lib/hooks/useNotificationHandler'
import {useNotificationsRegistration} from '#/lib/notifications/notifications'
import {isStateAtTabRoot} from '#/lib/routes/helpers'
import {isAndroid, isIOS} from '#/platform/detection'
import {useDialogStateControlContext} from '#/state/dialogs'
import {useSession} from '#/state/session'
import {
useIsDrawerOpen,
useIsDrawerSwipeDisabled,
useSetDrawerOpen,
} from '#/state/shell'
import {useCloseAnyActiveElement} from '#/state/util'
import {Lightbox} from '#/view/com/lightbox/Lightbox'
import {ModalsContainer} from '#/view/com/modals/Modal'
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
import {atoms as a, select, useTheme} from '#/alf'
import {setNavigationBar} from '#/alf/util/navigationBar'
import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
import {SigninDialog} from '#/components/dialogs/Signin'
import {Outlet as PortalOutlet} from '#/components/Portal'
import {RoutesContainer, TabsNavigator} from '#/Navigation'
import {BottomSheetOutlet} from '../../../modules/bottom-sheet'
import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
import {Composer} from './Composer'
import {DrawerContent} from './Drawer'
function ShellInner() {
const t = useTheme()
const isDrawerOpen = useIsDrawerOpen()
const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
const setIsDrawerOpen = useSetDrawerOpen()
const winDim = useWindowDimensions()
const insets = useSafeAreaInsets()
const renderDrawerContent = useCallback(() => <DrawerContent />, [])
const onOpenDrawer = useCallback(
() => setIsDrawerOpen(true),
[setIsDrawerOpen],
)
const onCloseDrawer = useCallback(
() => setIsDrawerOpen(false),
[setIsDrawerOpen],
)
const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
const {hasSession} = useSession()
const closeAnyActiveElement = useCloseAnyActiveElement()
useNotificationsRegistration()
useNotificationsHandler()
useEffect(() => {
if (isAndroid) {
const listener = BackHandler.addEventListener('hardwareBackPress', () => {
return closeAnyActiveElement()
})
return () => {
listener.remove()
}
}
}, [closeAnyActiveElement])
// HACK
// expo-video doesn't like it when you try and move a `player` to another `VideoView`. Instead, we need to actually
// unregister that player to let the new screen register it. This is only a problem on Android, so we only need to
// apply it there.
// The `state` event should only fire whenever we push or pop to a screen, and should not fire consecutively quickly.
// To be certain though, we will also dedupe these calls.
const navigation = useNavigation()
const dedupe = useDedupe(1000)
useEffect(() => {
if (!isAndroid) return
const onFocusOrBlur = () => {
setTimeout(() => {
dedupe(updateActiveViewAsync)
}, 500)
}
navigation.addListener('state', onFocusOrBlur)
return () => {
navigation.removeListener('state', onFocusOrBlur)
}
}, [dedupe, navigation])
return (
<>
<View style={[a.h_full]}>
<ErrorBoundary
style={{paddingTop: insets.top, paddingBottom: insets.bottom}}>
<Drawer
renderDrawerContent={renderDrawerContent}
drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}
open={isDrawerOpen}
onOpen={onOpenDrawer}
onClose={onCloseDrawer}
swipeEdgeWidth={winDim.width / 2}
drawerType={isIOS ? 'slide' : 'front'}
swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}
overlayStyle={{
backgroundColor: select(t.name, {
light: 'rgba(0, 57, 117, 0.1)',
dark: isAndroid
? 'rgba(16, 133, 254, 0.1)'
: 'rgba(1, 82, 168, 0.1)',
dim: 'rgba(10, 13, 16, 0.8)',
}),
}}>
<TabsNavigator />
</Drawer>
</ErrorBoundary>
</View>
<Composer winHeight={winDim.height} />
<ModalsContainer />
<MutedWordsDialog />
<SigninDialog />
<Lightbox />
<PortalOutlet />
<BottomSheetOutlet />
</>
)
}
export const Shell: React.FC = function ShellImpl() {
const {fullyExpandedCount} = useDialogStateControlContext()
const t = useTheme()
useIntentHandler()
useEffect(() => {
setNavigationBar('theme', t)
}, [t])
return (
<View testID="mobileShellView" style={[a.h_full, t.atoms.bg]}>
<StatusBar
style={
t.name !== 'light' || (isIOS && fullyExpandedCount > 0)
? 'light'
: 'dark'
}
animated
/>
<RoutesContainer>
<ShellInner />
</RoutesContainer>
</View>
)
}
|
