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

Move context around, unmount portals on native

Browse Source
This commit is contained in:
Eric Bailey
2025-08-05 15:42:39 -05:00
parent f978d9bff5
commit b8cfb2d0af
8 changed files with 166 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+55 -55
View File
@@ -138,49 +138,51 @@ function InnerApp() {
// Resets the entire tree below when it changes: // Resets the entire tree below when it changes:
key={currentAccount?.did}> key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}> <QueryProvider currentDid={currentAccount?.did}>
<StatsigProvider> <PolicyUpdateOverlayProvider>
<AgeAssuranceProvider> <StatsigProvider>
<ComposerProvider> <AgeAssuranceProvider>
<MessagesProvider> <ComposerProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */} <MessagesProvider>
<LabelDefsProvider> {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<ModerationOptsProvider> <LabelDefsProvider>
<LoggedOutViewProvider> <ModerationOptsProvider>
<SelectedFeedProvider> <LoggedOutViewProvider>
<HiddenRepliesProvider> <SelectedFeedProvider>
<HomeBadgeProvider> <HiddenRepliesProvider>
<UnreadNotifsProvider> <HomeBadgeProvider>
<BackgroundNotificationPreferencesProvider> <UnreadNotifsProvider>
<MutedThreadsProvider> <BackgroundNotificationPreferencesProvider>
<ProgressGuideProvider> <MutedThreadsProvider>
<ServiceAccountManager> <ProgressGuideProvider>
<HideBottomBarBorderProvider> <ServiceAccountManager>
<GestureHandlerRootView <HideBottomBarBorderProvider>
style={s.h100pct}> <GestureHandlerRootView
<GlobalGestureEventsProvider> style={s.h100pct}>
<IntentDialogProvider> <GlobalGestureEventsProvider>
<TestCtrls /> <IntentDialogProvider>
<Shell /> <TestCtrls />
<NuxDialogs /> <Shell />
</IntentDialogProvider> <NuxDialogs />
</GlobalGestureEventsProvider> </IntentDialogProvider>
</GestureHandlerRootView> </GlobalGestureEventsProvider>
</HideBottomBarBorderProvider> </GestureHandlerRootView>
</ServiceAccountManager> </HideBottomBarBorderProvider>
</ProgressGuideProvider> </ServiceAccountManager>
</MutedThreadsProvider> </ProgressGuideProvider>
</BackgroundNotificationPreferencesProvider> </MutedThreadsProvider>
</UnreadNotifsProvider> </BackgroundNotificationPreferencesProvider>
</HomeBadgeProvider> </UnreadNotifsProvider>
</HiddenRepliesProvider> </HomeBadgeProvider>
</SelectedFeedProvider> </HiddenRepliesProvider>
</LoggedOutViewProvider> </SelectedFeedProvider>
</ModerationOptsProvider> </LoggedOutViewProvider>
</LabelDefsProvider> </ModerationOptsProvider>
</MessagesProvider> </LabelDefsProvider>
</ComposerProvider> </MessagesProvider>
</AgeAssuranceProvider> </ComposerProvider>
</StatsigProvider> </AgeAssuranceProvider>
</StatsigProvider>
</PolicyUpdateOverlayProvider>
</QueryProvider> </QueryProvider>
</React.Fragment> </React.Fragment>
</VideoVolumeProvider> </VideoVolumeProvider>
@@ -221,18 +223,16 @@ function App() {
<ModalStateProvider> <ModalStateProvider>
<DialogStateProvider> <DialogStateProvider>
<LightboxStateProvider> <LightboxStateProvider>
<PolicyUpdateOverlayProvider> <PortalProvider>
<PortalProvider> <BottomSheetProvider>
<BottomSheetProvider> <StarterPackProvider>
<StarterPackProvider> <SafeAreaProvider
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
initialMetrics={initialWindowMetrics}> <InnerApp />
<InnerApp /> </SafeAreaProvider>
</SafeAreaProvider> </StarterPackProvider>
</StarterPackProvider> </BottomSheetProvider>
</BottomSheetProvider> </PortalProvider>
</PortalProvider>
</PolicyUpdateOverlayProvider>
</LightboxStateProvider> </LightboxStateProvider>
</DialogStateProvider> </DialogStateProvider>
</ModalStateProvider> </ModalStateProvider>
src/App.web.tsx
+46 -46
View File
@@ -118,45 +118,47 @@ function InnerApp() {
// Resets the entire tree below when it changes: // Resets the entire tree below when it changes:
key={currentAccount?.did}> key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}> <QueryProvider currentDid={currentAccount?.did}>
<StatsigProvider> <PolicyUpdateOverlayProvider>
<AgeAssuranceProvider> <StatsigProvider>
<ComposerProvider> <AgeAssuranceProvider>
<MessagesProvider> <ComposerProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */} <MessagesProvider>
<LabelDefsProvider> {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<ModerationOptsProvider> <LabelDefsProvider>
<LoggedOutViewProvider> <ModerationOptsProvider>
<SelectedFeedProvider> <LoggedOutViewProvider>
<HiddenRepliesProvider> <SelectedFeedProvider>
<HomeBadgeProvider> <HiddenRepliesProvider>
<UnreadNotifsProvider> <HomeBadgeProvider>
<BackgroundNotificationPreferencesProvider> <UnreadNotifsProvider>
<MutedThreadsProvider> <BackgroundNotificationPreferencesProvider>
<SafeAreaProvider> <MutedThreadsProvider>
<ProgressGuideProvider> <SafeAreaProvider>
<ServiceConfigProvider> <ProgressGuideProvider>
<HideBottomBarBorderProvider> <ServiceConfigProvider>
<IntentDialogProvider> <HideBottomBarBorderProvider>
<Shell /> <IntentDialogProvider>
<NuxDialogs /> <Shell />
</IntentDialogProvider> <NuxDialogs />
</HideBottomBarBorderProvider> </IntentDialogProvider>
</ServiceConfigProvider> </HideBottomBarBorderProvider>
</ProgressGuideProvider> </ServiceConfigProvider>
</SafeAreaProvider> </ProgressGuideProvider>
</MutedThreadsProvider> </SafeAreaProvider>
</BackgroundNotificationPreferencesProvider> </MutedThreadsProvider>
</UnreadNotifsProvider> </BackgroundNotificationPreferencesProvider>
</HomeBadgeProvider> </UnreadNotifsProvider>
</HiddenRepliesProvider> </HomeBadgeProvider>
</SelectedFeedProvider> </HiddenRepliesProvider>
</LoggedOutViewProvider> </SelectedFeedProvider>
</ModerationOptsProvider> </LoggedOutViewProvider>
</LabelDefsProvider> </ModerationOptsProvider>
</MessagesProvider> </LabelDefsProvider>
</ComposerProvider> </MessagesProvider>
</AgeAssuranceProvider> </ComposerProvider>
</StatsigProvider> </AgeAssuranceProvider>
</StatsigProvider>
</PolicyUpdateOverlayProvider>
</QueryProvider> </QueryProvider>
<ToastContainer /> <ToastContainer />
</React.Fragment> </React.Fragment>
@@ -197,13 +199,11 @@ function App() {
<ModalStateProvider> <ModalStateProvider>
<DialogStateProvider> <DialogStateProvider>
<LightboxStateProvider> <LightboxStateProvider>
<PolicyUpdateOverlayProvider> <PortalProvider>
<PortalProvider> <StarterPackProvider>
<StarterPackProvider> <InnerApp />
<InnerApp /> </StarterPackProvider>
</StarterPackProvider> </PortalProvider>
</PortalProvider>
</PolicyUpdateOverlayProvider>
</LightboxStateProvider> </LightboxStateProvider>
</DialogStateProvider> </DialogStateProvider>
</ModalStateProvider> </ModalStateProvider>
src/components/PolicyUpdateOverlay/Overlay.tsx
+1
View File
@@ -109,6 +109,7 @@ export function Overlay({
<FocusScope> <FocusScope>
<View <View
accessibilityViewIsModal
accessible={isAndroid} accessible={isAndroid}
role="dialog" role="dialog"
aria-role="dialog" aria-role="dialog"
src/components/PolicyUpdateOverlay/Portal.tsx
+7
View File
@@ -0,0 +1,7 @@
import {createPortalGroup} from '#/components/Portal'
const portalGroup = createPortalGroup()
export const Provider = portalGroup.Provider
export const Portal = portalGroup.Portal
export const Outlet = portalGroup.Outlet
src/components/PolicyUpdateOverlay/context.tsx
+34
View File
@@ -0,0 +1,34 @@
import {createContext, type ReactNode, useContext, useMemo} from 'react'
import {Provider as PortalProvider} from '#/components/PolicyUpdateOverlay/Portal'
import {
type PolicyUpdateState,
usePolicyUpdateState,
} from '#/components/PolicyUpdateOverlay/usePolicyUpdateState'
const Context = createContext<PolicyUpdateState>({
completed: true,
complete: () => {},
})
export function usePolicyUpdateStateContext() {
const context = useContext(Context)
if (!context) {
throw new Error(
'usePolicyUpdateStateContext must be used within a PolicyUpdateProvider',
)
}
return context
}
export function Provider({children}: {children?: ReactNode}) {
const state = usePolicyUpdateState()
return (
<PortalProvider>
<Context.Provider value={useMemo(() => state, [state])}>
{children}
</Context.Provider>
</PortalProvider>
)
}
src/components/PolicyUpdateOverlay/index.tsx
+6 -8
View File
@@ -3,18 +3,16 @@ import {View} from 'react-native'
import {isIOS} from '#/platform/detection' import {isIOS} from '#/platform/detection'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
import {FullWindowOverlay} from '#/components/FullWindowOverlay' import {FullWindowOverlay} from '#/components/FullWindowOverlay'
import {usePolicyUpdateStateContext} from '#/components/PolicyUpdateOverlay/context'
import {Portal} from '#/components/PolicyUpdateOverlay/Portal'
import {Content} from '#/components/PolicyUpdateOverlay/updates/202508' import {Content} from '#/components/PolicyUpdateOverlay/updates/202508'
import {usePolicyUpdateState} from '#/components/PolicyUpdateOverlay/usePolicyUpdateState'
import {createPortalGroup} from '#/components/Portal'
const portalGroup = createPortalGroup() export {Provider} from '#/components/PolicyUpdateOverlay/context'
export {usePolicyUpdateStateContext} from '#/components/PolicyUpdateOverlay/context'
export const Provider = portalGroup.Provider export {Outlet} from '#/components/PolicyUpdateOverlay/Portal'
export const Portal = portalGroup.Portal
export const Outlet = portalGroup.Outlet
export function PolicyUpdateOverlay() { export function PolicyUpdateOverlay() {
const state = usePolicyUpdateState() const state = usePolicyUpdateStateContext()
/* /*
* See `window.clearNux` example in `/state/queries/nuxs` for a way to clear * See `window.clearNux` example in `/state/queries/nuxs` for a way to clear
src/view/shell/index.tsx
+15 -5
View File
@@ -31,7 +31,10 @@ import {InAppBrowserConsentDialog} from '#/components/dialogs/InAppBrowserConsen
import {LinkWarningDialog} from '#/components/dialogs/LinkWarning' import {LinkWarningDialog} from '#/components/dialogs/LinkWarning'
import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
import {SigninDialog} from '#/components/dialogs/Signin' import {SigninDialog} from '#/components/dialogs/Signin'
import {Outlet as PolicyUpdateOverlayPortal} from '#/components/PolicyUpdateOverlay' import {
Outlet as PolicyUpdateOverlayPortalOutlet,
usePolicyUpdateStateContext,
} from '#/components/PolicyUpdateOverlay'
import {Outlet as PortalOutlet} from '#/components/Portal' import {Outlet as PortalOutlet} from '#/components/Portal'
import {RoutesContainer, TabsNavigator} from '#/Navigation' import {RoutesContainer, TabsNavigator} from '#/Navigation'
import {BottomSheetOutlet} from '../../../modules/bottom-sheet' import {BottomSheetOutlet} from '../../../modules/bottom-sheet'
@@ -46,6 +49,7 @@ function ShellInner() {
const setIsDrawerOpen = useSetDrawerOpen() const setIsDrawerOpen = useSetDrawerOpen()
const winDim = useWindowDimensions() const winDim = useWindowDimensions()
const insets = useSafeAreaInsets() const insets = useSafeAreaInsets()
const policyUpdateState = usePolicyUpdateStateContext()
const renderDrawerContent = useCallback(() => <DrawerContent />, []) const renderDrawerContent = useCallback(() => <DrawerContent />, [])
const onOpenDrawer = useCallback( const onOpenDrawer = useCallback(
@@ -152,6 +156,7 @@ function ShellInner() {
</Drawer> </Drawer>
</ErrorBoundary> </ErrorBoundary>
</View> </View>
<Composer winHeight={winDim.height} /> <Composer winHeight={winDim.height} />
<ModalsContainer /> <ModalsContainer />
<MutedWordsDialog /> <MutedWordsDialog />
@@ -161,11 +166,16 @@ function ShellInner() {
<InAppBrowserConsentDialog /> <InAppBrowserConsentDialog />
<LinkWarningDialog /> <LinkWarningDialog />
<Lightbox /> <Lightbox />
<PortalOutlet />
<BottomSheetOutlet />
{/* MUST BE LAST */} {/* Until policy update has been completed by the user, don't render anything that is portaled */}
<PolicyUpdateOverlayPortal /> {policyUpdateState.completed && (
<>
<PortalOutlet />
<BottomSheetOutlet />
</>
)}
<PolicyUpdateOverlayPortalOutlet />
</> </>
) )
} }
src/view/shell/index.web.tsx
+2 -3
View File
@@ -22,7 +22,7 @@ import {EmailDialog} from '#/components/dialogs/EmailDialog'
import {LinkWarningDialog} from '#/components/dialogs/LinkWarning' import {LinkWarningDialog} from '#/components/dialogs/LinkWarning'
import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
import {SigninDialog} from '#/components/dialogs/Signin' import {SigninDialog} from '#/components/dialogs/Signin'
import {Outlet as PolicyUpdateOverlayPortal} from '#/components/PolicyUpdateOverlay' import {Outlet as PolicyUpdateOverlayPortalOutlet} from '#/components/PolicyUpdateOverlay'
import {Outlet as PortalOutlet} from '#/components/Portal' import {Outlet as PortalOutlet} from '#/components/Portal'
import {FlatNavigator, RoutesContainer} from '#/Navigation' import {FlatNavigator, RoutesContainer} from '#/Navigation'
import {Composer} from './Composer.web' import {Composer} from './Composer.web'
@@ -115,8 +115,7 @@ function ShellInner() {
</> </>
)} )}
{/* MUST BE LAST */} <PolicyUpdateOverlayPortalOutlet />
<PolicyUpdateOverlayPortal />
</> </>
) )
} }