diff options
| -rw-r--r-- | src/alf/util/navigationBar.ts | 18 | ||||
| -rw-r--r-- | src/view/com/lightbox/ImageViewing/index.tsx | 23 | ||||
| -rw-r--r-- | src/view/shell/index.tsx | 50 |
3 files changed, 58 insertions, 33 deletions
diff --git a/src/alf/util/navigationBar.ts b/src/alf/util/navigationBar.ts new file mode 100644 index 000000000..face86983 --- /dev/null +++ b/src/alf/util/navigationBar.ts @@ -0,0 +1,18 @@ +import * as NavigationBar from 'expo-navigation-bar' + +import {isAndroid} from '#/platform/detection' +import {Theme} from '../types' + +export function setNavigationBar(themeType: 'theme' | 'lightbox', t: Theme) { + if (isAndroid) { + if (themeType === 'theme') { + NavigationBar.setBackgroundColorAsync(t.atoms.bg.backgroundColor) + NavigationBar.setBorderColorAsync(t.atoms.bg.backgroundColor) + NavigationBar.setButtonStyleAsync(t.name !== 'light' ? 'light' : 'dark') + } else { + NavigationBar.setBackgroundColorAsync('black') + NavigationBar.setBorderColorAsync('black') + NavigationBar.setButtonStyleAsync('light') + } + } +} diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index 4ba056eb0..e7d158d03 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -8,7 +8,7 @@ // Original code copied and simplified from the link below as the codebase is currently not maintained: // https://github.com/jobtoday/react-native-image-viewing -import React, {useCallback, useState} from 'react' +import React, {useCallback, useEffect, useState} from 'react' import { LayoutAnimation, PixelRatio, @@ -40,6 +40,7 @@ import { useSafeAreaFrame, useSafeAreaInsets, } from 'react-native-safe-area-context' +import {StatusBar} from 'expo-status-bar' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Trans} from '@lingui/macro' @@ -50,6 +51,8 @@ import {Lightbox} from '#/state/lightbox' import {Button} from '#/view/com/util/forms/Button' import {Text} from '#/view/com/util/text/Text' import {ScrollView} from '#/view/com/util/Views' +import {ios, useTheme} from '#/alf' +import {setNavigationBar} from '#/alf/util/navigationBar' import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army' import {ImageSource, Transform} from './@types' import ImageDefaultHeader from './components/ImageDefaultHeader' @@ -276,8 +279,26 @@ function ImageView({ }, ) + // style nav bar on android + const t = useTheme() + useEffect(() => { + setNavigationBar('lightbox', t) + return () => { + setNavigationBar('theme', t) + } + }, [t]) + return ( <Animated.View style={[styles.container, containerStyle]}> + <StatusBar + animated + style="light" + hideTransitionAnimation="slide" + backgroundColor="black" + // hiding causes layout shifts on android, + // so avoid until we add edge-to-edge mode + hidden={ios(isScaled || !showControls)} + /> <Animated.View style={[styles.backdrop, backdropStyle]} renderToHardwareTextureAndroid diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 1ab045d75..8dbbbea6f 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -1,18 +1,15 @@ -import React from 'react' -import {BackHandler, StyleSheet, useWindowDimensions, View} from 'react-native' +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 * as NavigationBar from 'expo-navigation-bar' 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 {usePalette} from '#/lib/hooks/usePalette' import {useNotificationsRegistration} from '#/lib/notifications/notifications' import {isStateAtTabRoot} from '#/lib/routes/helpers' -import {useTheme} from '#/lib/ThemeContext' import {isAndroid, isIOS} from '#/platform/detection' import {useDialogStateControlContext} from '#/state/dialogs' import {useSession} from '#/state/session' @@ -25,30 +22,31 @@ 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 as useNewTheme} from '#/alf' +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 {RoutesContainer, TabsNavigator} from '../../Navigation' import {Composer} from './Composer' import {DrawerContent} from './Drawer' function ShellInner() { - const t = useNewTheme() + const t = useTheme() const isDrawerOpen = useIsDrawerOpen() const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled() const setIsDrawerOpen = useSetDrawerOpen() const winDim = useWindowDimensions() const insets = useSafeAreaInsets() - const renderDrawerContent = React.useCallback(() => <DrawerContent />, []) - const onOpenDrawer = React.useCallback( + const renderDrawerContent = useCallback(() => <DrawerContent />, []) + const onOpenDrawer = useCallback( () => setIsDrawerOpen(true), [setIsDrawerOpen], ) - const onCloseDrawer = React.useCallback( + const onCloseDrawer = useCallback( () => setIsDrawerOpen(false), [setIsDrawerOpen], ) @@ -59,7 +57,7 @@ function ShellInner() { useNotificationsRegistration() useNotificationsHandler() - React.useEffect(() => { + useEffect(() => { if (isAndroid) { const listener = BackHandler.addEventListener('hardwareBackPress', () => { return closeAnyActiveElement() @@ -79,7 +77,7 @@ function ShellInner() { // To be certain though, we will also dedupe these calls. const navigation = useNavigation() const dedupe = useDedupe(1000) - React.useEffect(() => { + useEffect(() => { if (!isAndroid) return const onFocusOrBlur = () => { setTimeout(() => { @@ -132,24 +130,18 @@ function ShellInner() { export const Shell: React.FC = function ShellImpl() { const {fullyExpandedCount} = useDialogStateControlContext() - const theme = useTheme() - const pal = usePalette('default') + const t = useTheme() useIntentHandler() - React.useEffect(() => { - if (isAndroid) { - NavigationBar.setBackgroundColorAsync(theme.palette.default.background) - NavigationBar.setBorderColorAsync(theme.palette.default.background) - NavigationBar.setButtonStyleAsync( - theme.colorScheme === 'dark' ? 'light' : 'dark', - ) - } - }, [theme]) + useEffect(() => { + setNavigationBar('theme', t) + }, [t]) + return ( - <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}> + <View testID="mobileShellView" style={[a.h_full, t.atoms.bg]}> <StatusBar style={ - theme.colorScheme === 'dark' || (isIOS && fullyExpandedCount > 0) + t.name !== 'light' || (isIOS && fullyExpandedCount > 0) ? 'light' : 'dark' } @@ -161,9 +153,3 @@ export const Shell: React.FC = function ShellImpl() { </View> ) } - -const styles = StyleSheet.create({ - outerContainer: { - height: '100%', - }, -}) |