An ATproto social media client -- with an independent Appview.
Lightbox status bar behaviour (#6637)
* lightbox status bar
* add hideTransitionAnimation="slide"
* move navigation bar logic to util
authored by
Samuel Newman
and committed by
GitHub
8825d6b1
2c2d12b3
+58
-33
+22
-1
src/view/com/lightbox/ImageViewing/index.tsx
+22
-1
src/view/com/lightbox/ImageViewing/index.tsx
···
8
8
// Original code copied and simplified from the link below as the codebase is currently not maintained:
9
9
// https://github.com/jobtoday/react-native-image-viewing
10
10
11
-
import React, {useCallback, useState} from 'react'
11
+
import React, {useCallback, useEffect, useState} from 'react'
12
12
import {
13
13
LayoutAnimation,
14
14
PixelRatio,
···
40
40
useSafeAreaFrame,
41
41
useSafeAreaInsets,
42
42
} from 'react-native-safe-area-context'
43
+
import {StatusBar} from 'expo-status-bar'
43
44
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
44
45
import {Trans} from '@lingui/macro'
45
46
···
50
51
import {Button} from '#/view/com/util/forms/Button'
51
52
import {Text} from '#/view/com/util/text/Text'
52
53
import {ScrollView} from '#/view/com/util/Views'
54
+
import {ios, useTheme} from '#/alf'
55
+
import {setNavigationBar} from '#/alf/util/navigationBar'
53
56
import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army'
54
57
import {ImageSource, Transform} from './@types'
55
58
import ImageDefaultHeader from './components/ImageDefaultHeader'
···
276
279
},
277
280
)
278
281
282
+
// style nav bar on android
283
+
const t = useTheme()
284
+
useEffect(() => {
285
+
setNavigationBar('lightbox', t)
286
+
return () => {
287
+
setNavigationBar('theme', t)
288
+
}
289
+
}, [t])
290
+
279
291
return (
280
292
<Animated.View style={[styles.container, containerStyle]}>
293
+
<StatusBar
294
+
animated
295
+
style="light"
296
+
hideTransitionAnimation="slide"
297
+
backgroundColor="black"
298
+
// hiding causes layout shifts on android,
299
+
// so avoid until we add edge-to-edge mode
300
+
hidden={ios(isScaled || !showControls)}
301
+
/>
281
302
<Animated.View
282
303
style={[styles.backdrop, backdropStyle]}
283
304
renderToHardwareTextureAndroid
+18
-32
src/view/shell/index.tsx
+18
-32
src/view/shell/index.tsx
···
1
-
import React from 'react'
2
-
import {BackHandler, StyleSheet, useWindowDimensions, View} from 'react-native'
1
+
import {useCallback, useEffect} from 'react'
2
+
import {BackHandler, useWindowDimensions, View} from 'react-native'
3
3
import {Drawer} from 'react-native-drawer-layout'
4
4
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
-
import * as NavigationBar from 'expo-navigation-bar'
6
5
import {StatusBar} from 'expo-status-bar'
7
6
import {useNavigation, useNavigationState} from '@react-navigation/native'
8
7
9
8
import {useDedupe} from '#/lib/hooks/useDedupe'
10
9
import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
11
10
import {useNotificationsHandler} from '#/lib/hooks/useNotificationHandler'
12
-
import {usePalette} from '#/lib/hooks/usePalette'
13
11
import {useNotificationsRegistration} from '#/lib/notifications/notifications'
14
12
import {isStateAtTabRoot} from '#/lib/routes/helpers'
15
-
import {useTheme} from '#/lib/ThemeContext'
16
13
import {isAndroid, isIOS} from '#/platform/detection'
17
14
import {useDialogStateControlContext} from '#/state/dialogs'
18
15
import {useSession} from '#/state/session'
···
25
22
import {Lightbox} from '#/view/com/lightbox/Lightbox'
26
23
import {ModalsContainer} from '#/view/com/modals/Modal'
27
24
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
28
-
import {atoms as a, select, useTheme as useNewTheme} from '#/alf'
25
+
import {atoms as a, select, useTheme} from '#/alf'
26
+
import {setNavigationBar} from '#/alf/util/navigationBar'
29
27
import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
30
28
import {SigninDialog} from '#/components/dialogs/Signin'
31
29
import {Outlet as PortalOutlet} from '#/components/Portal'
30
+
import {RoutesContainer, TabsNavigator} from '#/Navigation'
32
31
import {BottomSheetOutlet} from '../../../modules/bottom-sheet'
33
32
import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
34
-
import {RoutesContainer, TabsNavigator} from '../../Navigation'
35
33
import {Composer} from './Composer'
36
34
import {DrawerContent} from './Drawer'
37
35
38
36
function ShellInner() {
39
-
const t = useNewTheme()
37
+
const t = useTheme()
40
38
const isDrawerOpen = useIsDrawerOpen()
41
39
const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
42
40
const setIsDrawerOpen = useSetDrawerOpen()
43
41
const winDim = useWindowDimensions()
44
42
const insets = useSafeAreaInsets()
45
43
46
-
const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
47
-
const onOpenDrawer = React.useCallback(
44
+
const renderDrawerContent = useCallback(() => <DrawerContent />, [])
45
+
const onOpenDrawer = useCallback(
48
46
() => setIsDrawerOpen(true),
49
47
[setIsDrawerOpen],
50
48
)
51
-
const onCloseDrawer = React.useCallback(
49
+
const onCloseDrawer = useCallback(
52
50
() => setIsDrawerOpen(false),
53
51
[setIsDrawerOpen],
54
52
)
···
59
57
useNotificationsRegistration()
60
58
useNotificationsHandler()
61
59
62
-
React.useEffect(() => {
60
+
useEffect(() => {
63
61
if (isAndroid) {
64
62
const listener = BackHandler.addEventListener('hardwareBackPress', () => {
65
63
return closeAnyActiveElement()
···
79
77
// To be certain though, we will also dedupe these calls.
80
78
const navigation = useNavigation()
81
79
const dedupe = useDedupe(1000)
82
-
React.useEffect(() => {
80
+
useEffect(() => {
83
81
if (!isAndroid) return
84
82
const onFocusOrBlur = () => {
85
83
setTimeout(() => {
···
132
130
133
131
export const Shell: React.FC = function ShellImpl() {
134
132
const {fullyExpandedCount} = useDialogStateControlContext()
135
-
const theme = useTheme()
136
-
const pal = usePalette('default')
133
+
const t = useTheme()
137
134
useIntentHandler()
138
135
139
-
React.useEffect(() => {
140
-
if (isAndroid) {
141
-
NavigationBar.setBackgroundColorAsync(theme.palette.default.background)
142
-
NavigationBar.setBorderColorAsync(theme.palette.default.background)
143
-
NavigationBar.setButtonStyleAsync(
144
-
theme.colorScheme === 'dark' ? 'light' : 'dark',
145
-
)
146
-
}
147
-
}, [theme])
136
+
useEffect(() => {
137
+
setNavigationBar('theme', t)
138
+
}, [t])
139
+
148
140
return (
149
-
<View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
141
+
<View testID="mobileShellView" style={[a.h_full, t.atoms.bg]}>
150
142
<StatusBar
151
143
style={
152
-
theme.colorScheme === 'dark' || (isIOS && fullyExpandedCount > 0)
144
+
t.name !== 'light' || (isIOS && fullyExpandedCount > 0)
153
145
? 'light'
154
146
: 'dark'
155
147
}
···
161
153
</View>
162
154
)
163
155
}
164
-
165
-
const styles = StyleSheet.create({
166
-
outerContainer: {
167
-
height: '100%',
168
-
},
169
-
})