acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Edge to edge support (#7497)

Browse Source
This commit is contained in:
Mathieu Acthernoene
2025-04-22 18:16:50 +02:00
committed by GitHub
parent 6e80b340c8
commit a770f5635b
23 changed files with 137 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+2 -5
View File
@@ -46,14 +46,13 @@ import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation
import {Provider as UnreadNotifsProvider} from '#/state/queries/notifications/unread'
import {
Provider as SessionProvider,
SessionAccount,
type SessionAccount,
useSession,
useSessionApi,
} from '#/state/session'
import {readLastActiveAccount} from '#/state/session/util'
import {Provider as ShellStateProvider} from '#/state/shell'
import {Provider as ComposerProvider} from '#/state/shell/composer'
import {Provider as LightStatusBarProvider} from '#/state/shell/light-status-bar'
import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
@@ -219,9 +218,7 @@ function App() {
<StarterPackProvider>
<SafeAreaProvider
initialMetrics={initialWindowMetrics}>
<LightStatusBarProvider>
<InnerApp />
</LightStatusBarProvider>
<InnerApp />
</SafeAreaProvider>
</StarterPackProvider>
</BottomSheetProvider>
src/App.web.tsx
+2 -5
View File
@@ -35,14 +35,13 @@ import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation
import {Provider as UnreadNotifsProvider} from '#/state/queries/notifications/unread'
import {
Provider as SessionProvider,
SessionAccount,
type SessionAccount,
useSession,
useSessionApi,
} from '#/state/session'
import {readLastActiveAccount} from '#/state/session/util'
import {Provider as ShellStateProvider} from '#/state/shell'
import {Provider as ComposerProvider} from '#/state/shell/composer'
import {Provider as LightStatusBarProvider} from '#/state/shell/light-status-bar'
import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
@@ -193,9 +192,7 @@ function App() {
<LightboxStateProvider>
<PortalProvider>
<StarterPackProvider>
<LightStatusBarProvider>
<InnerApp />
</LightStatusBarProvider>
<InnerApp />
</StarterPackProvider>
</PortalProvider>
</LightboxStateProvider>
src/alf/util/navigationBar.ts
-21
View File
@@ -1,21 +0,0 @@
import * as NavigationBar from 'expo-navigation-bar'
import * as SystemUI from 'expo-system-ui'
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')
SystemUI.setBackgroundColorAsync(t.atoms.bg.backgroundColor)
} else {
NavigationBar.setBackgroundColorAsync('black')
NavigationBar.setBorderColorAsync('black')
NavigationBar.setButtonStyleAsync('light')
SystemUI.setBackgroundColorAsync('black')
}
}
}
src/alf/util/systemUI.ts
+14
View File
@@ -0,0 +1,14 @@
import * as SystemUI from 'expo-system-ui'
import {isAndroid} from '#/platform/detection'
import {Theme} from '../types'
export function setSystemUITheme(themeType: 'theme' | 'lightbox', t: Theme) {
if (isAndroid) {
if (themeType === 'theme') {
SystemUI.setBackgroundColorAsync(t.atoms.bg.backgroundColor)
} else {
SystemUI.setBackgroundColorAsync('black')
}
}
}
src/components/ContextMenu/index.tsx
+1 -1
View File
@@ -556,7 +556,7 @@ export function Outer({
// pure vibes based
const TOP_INSET = insets.top + 80
const BOTTOM_INSET_IOS = insets.bottom + 20
const BOTTOM_INSET_ANDROID = 12 // TODO: revisit when edge-to-edge mode is enabled -sfn
const BOTTOM_INSET_ANDROID = insets.bottom + 12
const {height} = evt.nativeEvent.layout
const topPosition =
src/components/Dialog/sheet-wrapper.ts
+14 -9
View File
@@ -1,20 +1,25 @@
import {useCallback} from 'react'
import {SystemBars} from 'react-native-edge-to-edge'
import {useDialogStateControlContext} from '#/state/dialogs'
import {isIOS} from '#/platform/detection'
/**
* If we're calling a system API like the image picker that opens a sheet
* wrap it in this function to make sure the status bar is the correct color.
*/
export function useSheetWrapper() {
const {setFullyExpandedCount} = useDialogStateControlContext()
return useCallback(
async <T>(promise: Promise<T>): Promise<T> => {
setFullyExpandedCount(c => c + 1)
return useCallback(async <T>(promise: Promise<T>): Promise<T> => {
if (isIOS) {
const entry = SystemBars.pushStackEntry({
style: {
statusBar: 'light',
},
})
const res = await promise
setFullyExpandedCount(c => c - 1)
SystemBars.popStackEntry(entry)
return res
},
[setFullyExpandedCount],
)
} else {
return await promise
}
}, [])
}
src/lib/hooks/useEnableKeyboardController.tsx
+1 -4
View File
@@ -26,10 +26,7 @@ export function KeyboardControllerProvider({
children: React.ReactNode
}) {
return (
<KeyboardProvider
enabled={false}
// I don't think this is necessary, but Chesterton's fence and all that -sfn
statusBarTranslucent={true}>
<KeyboardProvider enabled={false}>
<KeyboardControllerProviderInner>
{children}
</KeyboardControllerProviderInner>
src/screens/Login/index.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import {DEFAULT_SERVICE} from '#/lib/constants'
import {logEvent} from '#/lib/statsig/statsig'
import {logger} from '#/logger'
import {useServiceQuery} from '#/state/queries/service'
import {SessionAccount, useSession} from '#/state/session'
import {type SessionAccount, useSession} from '#/state/session'
import {useLoggedOutView} from '#/state/shell/logged-out'
import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm'
src/screens/Messages/components/MessageInput.tsx
+3 -2
View File
@@ -24,9 +24,9 @@ import {
useMessageDraft,
useSaveMessageDraft,
} from '#/state/messages/message-drafts'
import {EmojiPickerPosition} from '#/view/com/composer/text-input/web/EmojiPicker.web'
import {type EmojiPickerPosition} from '#/view/com/composer/text-input/web/EmojiPicker.web'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, useTheme} from '#/alf'
import {android, atoms as a, useTheme} from '#/alf'
import {useSharedInputStyles} from '#/components/forms/TextField'
import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
import {useExtractEmbedFromFacets} from './MessageInputEmbed'
@@ -174,6 +174,7 @@ export function MessageInput({
a.text_md,
a.px_sm,
t.atoms.text,
android({paddingTop: 0}),
{paddingBottom: isIOS ? 5 : 0},
animatedStyle,
]}
src/screens/SignupQueued.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React from 'react'
import {Modal, ScrollView, View} from 'react-native'
import {SystemBars} from 'react-native-edge-to-edge'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {StatusBar} from 'expo-status-bar'
import {msg, plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -106,7 +106,7 @@ export function SignupQueued() {
animationType={native('slide')}
presentationStyle="formSheet"
style={[web(a.util_screen_outer)]}>
{isIOS && <StatusBar style="light" />}
{isIOS && <SystemBars style={{statusBar: 'light'}} />}
<ScrollView
style={[a.flex_1, t.atoms.bg]}
contentContainerStyle={{borderWidth: 0}}
src/screens/Takendown.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import {useMemo, useState} from 'react'
import {Modal, View} from 'react-native'
import {SystemBars} from 'react-native-edge-to-edge'
import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {StatusBar} from 'expo-status-bar'
import {ComAtprotoAdminDefs, ComAtprotoModerationDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -126,7 +126,7 @@ export function Takendown() {
animationType={native('slide')}
presentationStyle="formSheet"
style={[web(a.util_screen_outer)]}>
{isIOS && <StatusBar style="light" />}
{isIOS && <SystemBars style={{statusBar: 'light'}} />}
<KeyboardAwareScrollView style={[a.flex_1, t.atoms.bg]} centerContent>
<View
style={[
src/screens/VideoFeed/index.tsx
+5 -3
View File
@@ -8,6 +8,7 @@ import {
ViewabilityConfig,
ViewToken,
} from 'react-native'
import {SystemBars} from 'react-native-edge-to-edge'
import {
Gesture,
GestureDetector,
@@ -77,7 +78,7 @@ import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {Header} from '#/screens/VideoFeed/components/Header'
import {atoms as a, ios, platform, ThemeProvider, useTheme} from '#/alf'
import {setNavigationBar} from '#/alf/util/navigationBar'
import {setSystemUITheme} from '#/alf/util/systemUI'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Divider} from '#/components/Divider'
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
@@ -126,10 +127,10 @@ export function VideoFeed({}: NativeStackScreenProps<
useFocusEffect(
useCallback(() => {
setMinShellMode(true)
setNavigationBar('lightbox', t)
setSystemUITheme('lightbox', t)
return () => {
setMinShellMode(false)
setNavigationBar('theme', t)
setSystemUITheme('theme', t)
}
}, [setMinShellMode, t]),
)
@@ -140,6 +141,7 @@ export function VideoFeed({}: NativeStackScreenProps<
return (
<ThemeProvider theme="dark">
<Layout.Screen noInsetTop style={{backgroundColor: 'black'}}>
<SystemBars style={{statusBar: 'light', navigationBar: 'light'}} />
<View
style={[
a.absolute,
src/state/shell/light-status-bar.tsx
+11 -38
View File
@@ -1,44 +1,17 @@
import {createContext, useContext, useEffect, useState} from 'react'
import {isWeb} from '#/platform/detection'
const LightStatusBarRefCountContext = createContext<boolean>(false)
const SetLightStatusBarRefCountContext = createContext<React.Dispatch<
React.SetStateAction<number>
> | null>(null)
export function useLightStatusBar() {
return useContext(LightStatusBarRefCountContext)
}
import {useEffect} from 'react'
import {SystemBars} from 'react-native-edge-to-edge'
export function useSetLightStatusBar(enabled: boolean) {
const setRefCount = useContext(SetLightStatusBarRefCountContext)
useEffect(() => {
// noop on web -sfn
if (isWeb) return
if (!setRefCount) {
if (__DEV__)
console.error(
'useLightStatusBar was used without a SetLightStatusBarRefCountContext provider',
)
return
}
if (enabled) {
setRefCount(prev => prev + 1)
return () => setRefCount(prev => prev - 1)
const entry = SystemBars.pushStackEntry({
style: {
statusBar: 'light',
},
})
return () => {
SystemBars.popStackEntry(entry)
}
}
}, [enabled, setRefCount])
}
export function Provider({children}: React.PropsWithChildren<{}>) {
const [refCount, setRefCount] = useState(0)
return (
<SetLightStatusBarRefCountContext.Provider value={setRefCount}>
<LightStatusBarRefCountContext.Provider value={refCount > 0}>
{children}
</LightStatusBarRefCountContext.Provider>
</SetLightStatusBarRefCountContext.Provider>
)
}, [enabled])
}
src/view/com/composer/Composer.tsx
+1 -2
View File
@@ -1464,8 +1464,7 @@ function useKeyboardVerticalOffset() {
// Android etc
if (!isIOS) {
// if Android <35 or web, bottom is 0 anyway. if >=35, this is needed to account
// for the edge-to-edge nav bar
// need to account for the edge-to-edge nav bar
return bottom * -1
}
src/view/com/lightbox/ImageViewing/index.tsx
+21 -35
View File
@@ -9,22 +9,17 @@
// https://github.com/jobtoday/react-native-image-viewing
import React, {useCallback, useEffect, useMemo, useState} from 'react'
import {
LayoutAnimation,
PixelRatio,
Platform,
StyleSheet,
View,
} from 'react-native'
import {LayoutAnimation, PixelRatio, StyleSheet, View} from 'react-native'
import {SystemBars} from 'react-native-edge-to-edge'
import {Gesture} from 'react-native-gesture-handler'
import PagerView from 'react-native-pager-view'
import Animated, {
AnimatedRef,
type AnimatedRef,
cancelAnimation,
interpolate,
measure,
runOnJS,
SharedValue,
type SharedValue,
useAnimatedReaction,
useAnimatedRef,
useAnimatedStyle,
@@ -32,30 +27,28 @@ import Animated, {
useSharedValue,
withDecay,
withSpring,
WithSpringConfig,
type WithSpringConfig,
} from 'react-native-reanimated'
import {
Edge,
SafeAreaView,
useSafeAreaFrame,
useSafeAreaInsets,
} from 'react-native-safe-area-context'
import * as ScreenOrientation from 'expo-screen-orientation'
import {StatusBar} from 'expo-status-bar'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Trans} from '@lingui/macro'
import {Dimensions} from '#/lib/media/types'
import {type Dimensions} from '#/lib/media/types'
import {colors, s} from '#/lib/styles'
import {isIOS} from '#/platform/detection'
import {Lightbox} from '#/state/lightbox'
import {type 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 {useTheme} from '#/alf'
import {setSystemUITheme} from '#/alf/util/systemUI'
import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army'
import {ImageSource, Transform} from './@types'
import {type ImageSource, type Transform} from './@types'
import ImageDefaultHeader from './components/ImageDefaultHeader'
import ImageItem from './components/ImageItem/ImageItem'
@@ -63,10 +56,6 @@ type Rect = {x: number; y: number; width: number; height: number}
const PORTRAIT_UP = ScreenOrientation.OrientationLock.PORTRAIT_UP
const PIXEL_RATIO = PixelRatio.get()
const EDGES =
Platform.OS === 'android' && Platform.Version < 35
? (['top', 'bottom', 'left', 'right'] satisfies Edge[])
: ([] satisfies Edge[]) // iOS or Android 15+ bleeds into safe area
const SLOW_SPRING: WithSpringConfig = {
mass: isIOS ? 1.25 : 0.75,
@@ -167,9 +156,8 @@ export default function ImageViewRoot({
return (
// Keep it always mounted to avoid flicker on the first frame.
<SafeAreaView
<View
style={[styles.screen, !activeLightbox && styles.screenHidden]}
edges={EDGES}
aria-modal
accessibilityViewIsModal
aria-hidden={!activeLightbox}>
@@ -197,7 +185,7 @@ export default function ImageViewRoot({
/>
)}
</Animated.View>
</SafeAreaView>
</View>
)
}
@@ -325,25 +313,23 @@ function ImageView({
},
)
// style nav bar on android
// style system ui on android
const t = useTheme()
useEffect(() => {
setNavigationBar('lightbox', t)
setSystemUITheme('lightbox', t)
return () => {
setNavigationBar('theme', t)
setSystemUITheme('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)}
<SystemBars
style={{statusBar: 'light', navigationBar: 'light'}}
hidden={{
statusBar: isScaled || !showControls,
navigationBar: false,
}}
/>
<Animated.View
style={[styles.backdrop, backdropStyle]}
src/view/com/modals/CreateOrEditList.tsx
+2 -2
View File
@@ -8,9 +8,9 @@ import {
TouchableOpacity,
View,
} from 'react-native'
import {Image as RNImage} from 'react-native-image-crop-picker'
import {type Image as RNImage} from 'react-native-image-crop-picker'
import {LinearGradient} from 'expo-linear-gradient'
import {AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api'
import {type AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
src/view/shell/index.tsx
+11 -14
View File
@@ -1,9 +1,9 @@
import {useCallback, useEffect, useState} from 'react'
import {BackHandler, useWindowDimensions, View} from 'react-native'
import {Drawer} from 'react-native-drawer-layout'
import {SystemBars} from 'react-native-edge-to-edge'
import {Gesture} from 'react-native-gesture-handler'
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'
@@ -19,13 +19,12 @@ import {
useIsDrawerSwipeDisabled,
useSetDrawerOpen,
} from '#/state/shell'
import {useLightStatusBar} from '#/state/shell/light-status-bar'
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 {setSystemUITheme} from '#/alf/util/systemUI'
import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
import {SigninDialog} from '#/components/dialogs/Signin'
import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -161,25 +160,23 @@ function ShellInner() {
export const Shell: React.FC = function ShellImpl() {
const {fullyExpandedCount} = useDialogStateControlContext()
const lightStatusBar = useLightStatusBar()
const t = useTheme()
useIntentHandler()
useEffect(() => {
setNavigationBar('theme', t)
setSystemUITheme('theme', t)
}, [t])
return (
<View testID="mobileShellView" style={[a.h_full, t.atoms.bg]}>
<StatusBar
style={
t.name !== 'light' ||
(isIOS && fullyExpandedCount > 0) ||
lightStatusBar
? 'light'
: 'dark'
}
animated
<SystemBars
style={{
statusBar:
t.name !== 'light' || (isIOS && fullyExpandedCount > 0)
? 'light'
: 'dark',
navigationBar: t.name !== 'light' ? 'light' : 'dark',
}}
/>
<RoutesContainer>
<ShellInner />