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

Merge branch 'main' into internationalization

Browse Source
This commit is contained in:
Ansh
2023-11-07 16:14:52 -08:00
committed by GitHub
parent 80944a8779 96d8faf4b0
commit a3851b27ce
73 changed files with 972 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__mocks__/sentry-expo.js
-7
View File
@@ -1,10 +1,3 @@
jest.mock('sentry-expo', () => ({ jest.mock('sentry-expo', () => ({
init: () => jest.fn(), init: () => jest.fn(),
Native: {
ReactNativeTracing: jest.fn().mockImplementation(() => ({
start: jest.fn(),
stop: jest.fn(),
})),
ReactNavigationInstrumentation: jest.fn(),
},
})) }))
bskyweb/templates/base.html
+2 -2
View File
@@ -176,8 +176,8 @@
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
{% block html_head_extra -%}{%- endblock %} {% block html_head_extra -%}{%- endblock %}
<meta name="application-name" name="Bluesky"> <meta name="application-name" content="Bluesky">
<meta name="generator" name="bskyweb"> <meta name="generator" content="bskyweb">
</head> </head>
<body> <body>
{%- block body_all %} {%- block body_all %}
src/App.native.tsx
+25 -4
View File
@@ -10,7 +10,8 @@ import {QueryClientProvider} from '@tanstack/react-query'
import 'view/icons' import 'view/icons'
import {withSentry} from 'lib/sentry' import {init as initPersistedState} from '#/state/persisted'
import {useColorMode} from 'state/shell'
import {ThemeProvider} from 'lib/ThemeContext' import {ThemeProvider} from 'lib/ThemeContext'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {RootStoreModel, setupState, RootStoreProvider} from './state' import {RootStoreModel, setupState, RootStoreProvider} from './state'
@@ -20,10 +21,12 @@ import * as analytics from 'lib/analytics/analytics'
import * as Toast from 'view/com/util/Toast' import * as Toast from 'view/com/util/Toast'
import {queryClient} from 'lib/react-query' import {queryClient} from 'lib/react-query'
import {TestCtrls} from 'view/com/testing/TestCtrls' import {TestCtrls} from 'view/com/testing/TestCtrls'
import {Provider as ShellStateProvider} from 'state/shell'
SplashScreen.preventAutoHideAsync() SplashScreen.preventAutoHideAsync()
const App = observer(function AppImpl() { const InnerApp = observer(function AppImpl() {
const colorMode = useColorMode()
const [rootStore, setRootStore] = useState<RootStoreModel | undefined>( const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
undefined, undefined,
) )
@@ -46,7 +49,7 @@ const App = observer(function AppImpl() {
} }
return ( return (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ThemeProvider theme={rootStore.shell.colorMode}> <ThemeProvider theme={colorMode}>
<RootSiblingParent> <RootSiblingParent>
<analytics.Provider> <analytics.Provider>
<RootStoreProvider value={rootStore}> <RootStoreProvider value={rootStore}>
@@ -62,4 +65,22 @@ const App = observer(function AppImpl() {
) )
}) })
export default withSentry(App) function App() {
const [isReady, setReady] = useState(false)
React.useEffect(() => {
initPersistedState().then(() => setReady(true))
}, [])
if (!isReady) {
return null
}
return (
<ShellStateProvider>
<InnerApp />
</ShellStateProvider>
)
}
export default App
src/App.web.tsx
+24 -2
View File
@@ -8,6 +8,8 @@ import {RootSiblingParent} from 'react-native-root-siblings'
import 'view/icons' import 'view/icons'
import {init as initPersistedState} from '#/state/persisted'
import {useColorMode} from 'state/shell'
import * as analytics from 'lib/analytics/analytics' import * as analytics from 'lib/analytics/analytics'
import {RootStoreModel, setupState, RootStoreProvider} from './state' import {RootStoreModel, setupState, RootStoreProvider} from './state'
import {Shell} from 'view/shell/index' import {Shell} from 'view/shell/index'
@@ -17,8 +19,10 @@ import {queryClient} from 'lib/react-query'
import {i18n} from '@lingui/core' import {i18n} from '@lingui/core'
import {I18nProvider} from '@lingui/react' import {I18nProvider} from '@lingui/react'
import {defaultLocale, dynamicActivate} from './locale/i18n' import {defaultLocale, dynamicActivate} from './locale/i18n'
import {Provider as ShellStateProvider} from 'state/shell'
const App = observer(function AppImpl() { const InnerApp = observer(function AppImpl() {
const colorMode = useColorMode()
const [rootStore, setRootStore] = useState<RootStoreModel | undefined>( const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
undefined, undefined,
) )
@@ -39,7 +43,7 @@ const App = observer(function AppImpl() {
return ( return (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ThemeProvider theme={rootStore.shell.colorMode}> <ThemeProvider theme={colorMode}>
<RootSiblingParent> <RootSiblingParent>
<analytics.Provider> <analytics.Provider>
<RootStoreProvider value={rootStore}> <RootStoreProvider value={rootStore}>
@@ -57,4 +61,22 @@ const App = observer(function AppImpl() {
) )
}) })
function App() {
const [isReady, setReady] = useState(false)
React.useEffect(() => {
initPersistedState().then(() => setReady(true))
}, [])
if (!isReady) {
return null
}
return (
<ShellStateProvider>
<InnerApp />
</ShellStateProvider>
)
}
export default App export default App
src/Navigation.tsx
-7
View File
@@ -34,7 +34,6 @@ import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {router} from './routes' import {router} from './routes'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from './state' import {useStores} from './state'
import {getRoutingInstrumentation} from 'lib/sentry'
import {bskyTitle} from 'lib/strings/headings' import {bskyTitle} from 'lib/strings/headings'
import {JSX} from 'react/jsx-runtime' import {JSX} from 'react/jsx-runtime'
import {timeout} from 'lib/async/timeout' import {timeout} from 'lib/async/timeout'
@@ -478,12 +477,6 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
) )
console.log(`Time to first paint: ${initMs} ms`) console.log(`Time to first paint: ${initMs} ms`)
logModuleInitTrace() logModuleInitTrace()
// Register the navigation container with the Sentry instrumentation (only works on native)
if (isNative) {
const routingInstrumentation = getRoutingInstrumentation()
routingInstrumentation.registerNavigationContainer(navigationRef)
}
}}> }}>
{children} {children}
</NavigationContainer> </NavigationContainer>
src/lib/hooks/useAccountSwitcher.ts
+4 -2
View File
@@ -6,6 +6,7 @@ import {NavigationProp} from 'lib/routes/types'
import {AccountData} from 'state/models/session' import {AccountData} from 'state/models/session'
import {reset as resetNavigation} from '../../Navigation' import {reset as resetNavigation} from '../../Navigation'
import * as Toast from 'view/com/util/Toast' import * as Toast from 'view/com/util/Toast'
import {useSetDrawerOpen} from '#/state/shell/drawer-open'
export function useAccountSwitcher(): [ export function useAccountSwitcher(): [
boolean, boolean,
@@ -13,8 +14,8 @@ export function useAccountSwitcher(): [
(acct: AccountData) => Promise<void>, (acct: AccountData) => Promise<void>,
] { ] {
const {track} = useAnalytics() const {track} = useAnalytics()
const store = useStores() const store = useStores()
const setDrawerOpen = useSetDrawerOpen()
const [isSwitching, setIsSwitching] = useState(false) const [isSwitching, setIsSwitching] = useState(false)
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
@@ -23,6 +24,7 @@ export function useAccountSwitcher(): [
track('Settings:SwitchAccountButtonClicked') track('Settings:SwitchAccountButtonClicked')
setIsSwitching(true) setIsSwitching(true)
const success = await store.session.resumeSession(acct) const success = await store.session.resumeSession(acct)
setDrawerOpen(false)
store.shell.closeAllActiveElements() store.shell.closeAllActiveElements()
if (success) { if (success) {
resetNavigation() resetNavigation()
@@ -34,7 +36,7 @@ export function useAccountSwitcher(): [
store.session.clear() store.session.clear()
} }
}, },
[track, setIsSwitching, navigation, store], [track, setIsSwitching, navigation, store, setDrawerOpen],
) )
return [isSwitching, setIsSwitching, onPressSwitchAccount] return [isSwitching, setIsSwitching, onPressSwitchAccount]
src/lib/hooks/useMinimalShellMode.tsx
+6 -4
View File
@@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import {autorun} from 'mobx' import {autorun} from 'mobx'
import {useStores} from 'state/index'
import { import {
Easing, Easing,
interpolate, interpolate,
@@ -9,8 +8,10 @@ import {
withTiming, withTiming,
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
export function useMinimalShellMode() { export function useMinimalShellMode() {
const store = useStores() const minimalShellMode = useMinimalShellModeState()
const minimalShellInterp = useSharedValue(0) const minimalShellInterp = useSharedValue(0)
const footerMinimalShellTransform = useAnimatedStyle(() => { const footerMinimalShellTransform = useAnimatedStyle(() => {
return { return {
@@ -38,7 +39,7 @@ export function useMinimalShellMode() {
React.useEffect(() => { React.useEffect(() => {
return autorun(() => { return autorun(() => {
if (store.shell.minimalShellMode) { if (minimalShellMode) {
minimalShellInterp.value = withTiming(1, { minimalShellInterp.value = withTiming(1, {
duration: 125, duration: 125,
easing: Easing.bezier(0.25, 0.1, 0.25, 1), easing: Easing.bezier(0.25, 0.1, 0.25, 1),
@@ -50,9 +51,10 @@ export function useMinimalShellMode() {
}) })
} }
}) })
}, [minimalShellInterp, store.shell.minimalShellMode]) }, [minimalShellInterp, minimalShellMode])
return { return {
minimalShellMode,
footerMinimalShellTransform, footerMinimalShellTransform,
headerMinimalShellTransform, headerMinimalShellTransform,
fabMinimalShellTransform, fabMinimalShellTransform,
src/lib/hooks/useOnMainScroll.ts
+17 -14
View File
@@ -1,8 +1,8 @@
import {useState, useCallback, useRef} from 'react' import {useState, useCallback, useRef} from 'react'
import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native' import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
import {RootStoreModel} from 'state/index'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useWebMediaQueries} from './useWebMediaQueries' import {useWebMediaQueries} from './useWebMediaQueries'
import {useSetMinimalShellMode, useMinimalShellMode} from '#/state/shell'
const Y_LIMIT = 10 const Y_LIMIT = 10
@@ -19,12 +19,12 @@ export type OnScrollCb = (
) => void ) => void
export type ResetCb = () => void export type ResetCb = () => void
export function useOnMainScroll( export function useOnMainScroll(): [OnScrollCb, boolean, ResetCb] {
store: RootStoreModel,
): [OnScrollCb, boolean, ResetCb] {
let lastY = useRef(0) let lastY = useRef(0)
let [isScrolledDown, setIsScrolledDown] = useState(false) let [isScrolledDown, setIsScrolledDown] = useState(false)
const {dyLimitUp, dyLimitDown} = useDeviceLimits() const {dyLimitUp, dyLimitDown} = useDeviceLimits()
const minimalShellMode = useMinimalShellMode()
const setMinimalShellMode = useSetMinimalShellMode()
return [ return [
useCallback( useCallback(
@@ -33,13 +33,10 @@ export function useOnMainScroll(
const dy = y - (lastY.current || 0) const dy = y - (lastY.current || 0)
lastY.current = y lastY.current = y
if (!store.shell.minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) { if (!minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
store.shell.setMinimalShellMode(true) setMinimalShellMode(true)
} else if ( } else if (minimalShellMode && (dy < dyLimitUp * -1 || y <= Y_LIMIT)) {
store.shell.minimalShellMode && setMinimalShellMode(false)
(dy < dyLimitUp * -1 || y <= Y_LIMIT)
) {
store.shell.setMinimalShellMode(false)
} }
if ( if (
@@ -54,13 +51,19 @@ export function useOnMainScroll(
setIsScrolledDown(false) setIsScrolledDown(false)
} }
}, },
[store.shell, dyLimitDown, dyLimitUp, isScrolledDown], [
dyLimitDown,
dyLimitUp,
isScrolledDown,
minimalShellMode,
setMinimalShellMode,
],
), ),
isScrolledDown, isScrolledDown,
useCallback(() => { useCallback(() => {
setIsScrolledDown(false) setIsScrolledDown(false)
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
lastY.current = 1e8 // NOTE we set this very high so that the onScroll logic works right -prf lastY.current = 1e8 // NOTE we set this very high so that the onScroll logic works right -prf
}, [store, setIsScrolledDown]), }, [setIsScrolledDown, setMinimalShellMode]),
] ]
} }
src/lib/routes/back-handler.ts
-19
View File
@@ -1,19 +0,0 @@
import {isAndroid} from 'platform/detection'
import {BackHandler} from 'react-native'
import {RootStoreModel} from 'state/index'
export function init(store: RootStoreModel) {
// only register back handler on android, otherwise it throws an error
if (isAndroid) {
const backHandler = BackHandler.addEventListener(
'hardwareBackPress',
() => {
return store.shell.closeAnyActiveElement()
},
)
return () => {
backHandler.remove()
}
}
return () => {}
}
src/lib/sentry.ts
+2 -46
View File
@@ -1,52 +1,8 @@
import {isNative, isWeb} from 'platform/detection' import {init} from 'sentry-expo'
import {FC} from 'react'
import * as Sentry from 'sentry-expo'
// Sentry Initialization init({
export const getRoutingInstrumentation = () => {
return new Sentry.Native.ReactNavigationInstrumentation() // initialize this in `onReady` prop of NavigationContainer
}
Sentry.init({
dsn: 'https://05bc3789bf994b81bd7ce20c86ccd3ae@o4505071687041024.ingest.sentry.io/4505071690514432', dsn: 'https://05bc3789bf994b81bd7ce20c86ccd3ae@o4505071687041024.ingest.sentry.io/4505071690514432',
enableInExpoDevelopment: false, // if true, Sentry will try to send events/errors in development mode. enableInExpoDevelopment: false, // if true, Sentry will try to send events/errors in development mode.
debug: false, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production debug: false, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
environment: __DEV__ ? 'development' : 'production', // Set the environment environment: __DEV__ ? 'development' : 'production', // Set the environment
// @ts-ignore exists but not in types, see https://docs.sentry.io/platforms/react-native/configuration/options/#enableAutoPerformanceTracking
enableAutoPerformanceTracking: true, // Enable auto performance tracking
tracesSampleRate: 0.5, // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. // TODO: this might be too much in production
_experiments: {
// The sampling rate for profiling is relative to TracesSampleRate.
// In this case, we'll capture profiles for 50% of transactions.
profilesSampleRate: 0.5,
},
integrations: isNative
? [
new Sentry.Native.ReactNativeTracing({
shouldCreateSpanForRequest: url => {
// Do not create spans for outgoing requests to a `/logs` endpoint as it is too noisy due to expo
return !url.match(/\/logs$/)
},
routingInstrumentation: getRoutingInstrumentation(),
}),
]
: [], // no integrations for web, yet
}) })
// if web, use Browser client, otherwise use Native client
export function getSentryClient() {
if (isWeb) {
return Sentry.Browser
}
return Sentry.Native
}
// wrap root App component with Sentry for automatic touch event tracking and performance monitoring
export function withSentry(Component: FC) {
if (isWeb) {
return Component // .wrap is not required or available for web
}
const sentryClient = getSentryClient()
return sentryClient.wrap(Component)
}
src/lib/styles.ts
+1
View File
@@ -164,6 +164,7 @@ export const s = StyleSheet.create({
flexRow: {flexDirection: 'row'}, flexRow: {flexDirection: 'row'},
flexCol: {flexDirection: 'column'}, flexCol: {flexDirection: 'column'},
flex1: {flex: 1}, flex1: {flex: 1},
flexGrow1: {flexGrow: 1},
alignCenter: {alignItems: 'center'}, alignCenter: {alignItems: 'center'},
alignBaseline: {alignItems: 'baseline'}, alignBaseline: {alignItems: 'baseline'},
src/state/models/content/feed-source.ts
+9 -2
View File
@@ -142,7 +142,8 @@ export class FeedSourceModel {
} }
async unsave() { async unsave() {
if (this.type !== 'feed-generator') { // TODO TEMPORARY — see PRF's comment in content/list.ts togglePin
if (this.type !== 'feed-generator' && this.type !== 'list') {
return return
} }
try { try {
@@ -179,7 +180,13 @@ export class FeedSourceModel {
name: this.displayName, name: this.displayName,
uri: this.uri, uri: this.uri,
}) })
return this.rootStore.preferences.removePinnedFeed(this.uri)
if (this.type === 'list') {
// TODO TEMPORARY — see PRF's comment in content/list.ts togglePin
return this.unsave()
} else {
return this.rootStore.preferences.removePinnedFeed(this.uri)
}
} }
} }
src/state/models/content/list.ts
+1 -1
View File
@@ -361,7 +361,7 @@ export class ListModel {
name: this.data?.name || '', name: this.data?.name || '',
uri: this.uri, uri: this.uri,
}) })
// TEMPORARY // TODO TEMPORARY
// lists are temporarily piggybacking on the saved/pinned feeds preferences // lists are temporarily piggybacking on the saved/pinned feeds preferences
// we'll eventually replace saved feeds with the bookmarks API // we'll eventually replace saved feeds with the bookmarks API
// until then, we need to unsave lists instead of just unpin them // until then, we need to unsave lists instead of just unpin them
src/state/models/root-store.ts
-4
View File
@@ -74,7 +74,6 @@ export class RootStoreModel {
session: this.session.serialize(), session: this.session.serialize(),
me: this.me.serialize(), me: this.me.serialize(),
onboarding: this.onboarding.serialize(), onboarding: this.onboarding.serialize(),
shell: this.shell.serialize(),
preferences: this.preferences.serialize(), preferences: this.preferences.serialize(),
invitedUsers: this.invitedUsers.serialize(), invitedUsers: this.invitedUsers.serialize(),
mutedThreads: this.mutedThreads.serialize(), mutedThreads: this.mutedThreads.serialize(),
@@ -99,9 +98,6 @@ export class RootStoreModel {
if (hasProp(v, 'session')) { if (hasProp(v, 'session')) {
this.session.hydrate(v.session) this.session.hydrate(v.session)
} }
if (hasProp(v, 'shell')) {
this.shell.hydrate(v.shell)
}
if (hasProp(v, 'preferences')) { if (hasProp(v, 'preferences')) {
this.preferences.hydrate(v.preferences) this.preferences.hydrate(v.preferences)
} }
src/state/models/ui/saved-feeds.ts
+10 -4
View File
@@ -38,12 +38,18 @@ export class SavedFeedsModel {
return this.hasLoaded && !this.hasContent return this.hasLoaded && !this.hasContent
} }
get pinned() { get pinned(): FeedSourceModel[] {
return this.all.filter(feed => feed.isPinned) return this.rootStore.preferences.savedFeeds
.filter(feed => this.rootStore.preferences.isPinnedFeed(feed))
.map(uri => this.all.find(f => f.uri === uri))
.filter(Boolean) as FeedSourceModel[]
} }
get unpinned() { get unpinned(): FeedSourceModel[] {
return this.all.filter(feed => !feed.isPinned) return this.rootStore.preferences.savedFeeds
.filter(feed => !this.rootStore.preferences.isPinnedFeed(feed))
.map(uri => this.all.find(f => f.uri === uri))
.filter(Boolean) as FeedSourceModel[]
} }
get pinnedFeedNames() { get pinnedFeedNames() {
src/state/models/ui/shell.ts
-56
View File
@@ -2,13 +2,11 @@ import {AppBskyEmbedRecord, AppBskyActorDefs, ModerationUI} from '@atproto/api'
import {RootStoreModel} from '../root-store' import {RootStoreModel} from '../root-store'
import {makeAutoObservable, runInAction} from 'mobx' import {makeAutoObservable, runInAction} from 'mobx'
import {ProfileModel} from '../content/profile' import {ProfileModel} from '../content/profile'
import {isObj, hasProp} from 'lib/type-guards'
import {Image as RNImage} from 'react-native-image-crop-picker' import {Image as RNImage} from 'react-native-image-crop-picker'
import {ImageModel} from '../media/image' import {ImageModel} from '../media/image'
import {ListModel} from '../content/list' import {ListModel} from '../content/list'
import {GalleryModel} from '../media/gallery' import {GalleryModel} from '../media/gallery'
import {StyleProp, ViewStyle} from 'react-native' import {StyleProp, ViewStyle} from 'react-native'
import {isWeb} from 'platform/detection'
export type ColorMode = 'system' | 'light' | 'dark' export type ColorMode = 'system' | 'light' | 'dark'
@@ -265,10 +263,6 @@ export interface ComposerOpts {
} }
export class ShellUiModel { export class ShellUiModel {
colorMode: ColorMode = 'system'
minimalShellMode = false
isDrawerOpen = false
isDrawerSwipeDisabled = false
isModalActive = false isModalActive = false
activeModals: Modal[] = [] activeModals: Modal[] = []
isLightboxActive = false isLightboxActive = false
@@ -279,44 +273,13 @@ export class ShellUiModel {
constructor(public rootStore: RootStoreModel) { constructor(public rootStore: RootStoreModel) {
makeAutoObservable(this, { makeAutoObservable(this, {
serialize: false,
rootStore: false, rootStore: false,
hydrate: false,
}) })
this.setupClock() this.setupClock()
this.setupLoginModals() this.setupLoginModals()
} }
serialize(): unknown {
return {
colorMode: this.colorMode,
}
}
hydrate(v: unknown) {
if (isObj(v)) {
if (hasProp(v, 'colorMode') && isColorMode(v.colorMode)) {
this.setColorMode(v.colorMode)
}
}
}
setColorMode(mode: ColorMode) {
this.colorMode = mode
if (isWeb && typeof window !== 'undefined') {
const html = window.document.documentElement
// remove any other color mode classes
html.className = html.className.replace(/colorMode--\w+/g, '')
html.classList.add(`colorMode--${mode}`)
}
}
setMinimalShellMode(v: boolean) {
this.minimalShellMode = v
}
/** /**
* returns true if something was closed * returns true if something was closed
* (used by the android hardware back btn) * (used by the android hardware back btn)
@@ -334,10 +297,6 @@ export class ShellUiModel {
this.closeComposer() this.closeComposer()
return true return true
} }
if (this.isDrawerOpen) {
this.closeDrawer()
return true
}
return false return false
} }
@@ -354,21 +313,6 @@ export class ShellUiModel {
if (this.isComposerActive) { if (this.isComposerActive) {
this.closeComposer() this.closeComposer()
} }
if (this.isDrawerOpen) {
this.closeDrawer()
}
}
openDrawer() {
this.isDrawerOpen = true
}
closeDrawer() {
this.isDrawerOpen = false
}
setIsDrawerSwipeDisabled(v: boolean) {
this.isDrawerSwipeDisabled = v
} }
openModal(modal: Modal) { openModal(modal: Modal) {
src/state/persisted/broadcast/index.ts
+6
View File
@@ -0,0 +1,6 @@
export default class BroadcastChannel {
constructor(public name: string) {}
postMessage(_data: any) {}
close() {}
onmessage: (event: MessageEvent) => void = () => {}
}
src/state/persisted/broadcast/index.web.ts
+1
View File
@@ -0,0 +1 @@
export default BroadcastChannel
src/state/persisted/index.ts
+91
View File
@@ -0,0 +1,91 @@
import EventEmitter from 'eventemitter3'
import {logger} from '#/logger'
import {defaults, Schema} from '#/state/persisted/schema'
import {migrate} from '#/state/persisted/legacy'
import * as store from '#/state/persisted/store'
import BroadcastChannel from '#/state/persisted/broadcast'
export type {Schema} from '#/state/persisted/schema'
export {defaults as schema} from '#/state/persisted/schema'
const broadcast = new BroadcastChannel('BSKY_BROADCAST_CHANNEL')
const UPDATE_EVENT = 'BSKY_UPDATE'
let _state: Schema = defaults
const _emitter = new EventEmitter()
/**
* Initializes and returns persisted data state, so that it can be passed to
* the Provider.
*/
export async function init() {
logger.debug('persisted state: initializing')
broadcast.onmessage = onBroadcastMessage
try {
await migrate() // migrate old store
const stored = await store.read() // check for new store
if (!stored) await store.write(defaults) // opt: init new store
_state = stored || defaults // return new store
} catch (e) {
logger.error('persisted state: failed to load root state from storage', {
error: e,
})
// AsyncStorage failured, but we can still continue in memory
return defaults
}
}
export function get<K extends keyof Schema>(key: K): Schema[K] {
return _state[key]
}
export async function write<K extends keyof Schema>(
key: K,
value: Schema[K],
): Promise<void> {
try {
_state[key] = value
await store.write(_state)
// must happen on next tick, otherwise the tab will read stale storage data
setTimeout(() => broadcast.postMessage({event: UPDATE_EVENT}), 0)
logger.debug(`persisted state: wrote root state to storage`)
} catch (e) {
logger.error(`persisted state: failed writing root state to storage`, {
error: e,
})
}
}
export function onUpdate(cb: () => void): () => void {
_emitter.addListener('update', cb)
return () => _emitter.removeListener('update', cb)
}
async function onBroadcastMessage({data}: MessageEvent) {
// validate event
if (typeof data === 'object' && data.event === UPDATE_EVENT) {
try {
// read next state, possibly updated by another tab
const next = await store.read()
if (next) {
logger.debug(`persisted state: handling update from broadcast channel`)
_state = next
_emitter.emit('update')
} else {
logger.error(
`persisted state: handled update update from broadcast channel, but found no data`,
)
}
} catch (e) {
logger.error(
`persisted state: failed handling update from broadcast channel`,
{
error: e,
},
)
}
}
}
src/state/persisted/legacy.ts
+137
View File
@@ -0,0 +1,137 @@
import AsyncStorage from '@react-native-async-storage/async-storage'
import {logger} from '#/logger'
import {defaults, Schema} from '#/state/persisted/schema'
import {write, read} from '#/state/persisted/store'
/**
* The shape of the serialized data from our legacy Mobx store.
*/
type LegacySchema = {
shell: {
colorMode: 'system' | 'light' | 'dark'
}
session: {
data: {
service: string
did: `did:plc:${string}`
}
accounts: {
service: string
did: `did:plc:${string}`
refreshJwt: string
accessJwt: string
handle: string
email: string
displayName: string
aviUrl: string
emailConfirmed: boolean
}[]
}
me: {
did: `did:plc:${string}`
handle: string
displayName: string
description: string
avatar: string
}
onboarding: {
step: string
}
preferences: {
primaryLanguage: string
contentLanguages: string[]
postLanguage: string
postLanguageHistory: string[]
contentLabels: {
nsfw: string
nudity: string
suggestive: string
gore: string
hate: string
spam: string
impersonation: string
}
savedFeeds: string[]
pinnedFeeds: string[]
requireAltTextEnabled: boolean
}
invitedUsers: {
seenDids: string[]
copiedInvites: string[]
}
mutedThreads: {uris: string[]}
reminders: {lastEmailConfirm: string}
}
const DEPRECATED_ROOT_STATE_STORAGE_KEY = 'root'
export function transform(legacy: LegacySchema): Schema {
return {
colorMode: legacy.shell?.colorMode || defaults.colorMode,
session: {
accounts: legacy.session.accounts || defaults.session.accounts,
currentAccount:
legacy.session.accounts.find(a => a.did === legacy.session.data.did) ||
defaults.session.currentAccount,
},
reminders: {
lastEmailConfirmReminder:
legacy.reminders.lastEmailConfirm ||
defaults.reminders.lastEmailConfirmReminder,
},
languagePrefs: {
primaryLanguage:
legacy.preferences.primaryLanguage ||
defaults.languagePrefs.primaryLanguage,
contentLanguages:
legacy.preferences.contentLanguages ||
defaults.languagePrefs.contentLanguages,
postLanguage:
legacy.preferences.postLanguage || defaults.languagePrefs.postLanguage,
postLanguageHistory:
legacy.preferences.postLanguageHistory ||
defaults.languagePrefs.postLanguageHistory,
},
requireAltTextEnabled:
legacy.preferences.requireAltTextEnabled ||
defaults.requireAltTextEnabled,
mutedThreads: legacy.mutedThreads.uris || defaults.mutedThreads,
invitedUsers: {
seenDids: legacy.invitedUsers.seenDids || defaults.invitedUsers.seenDids,
copiedInvites:
legacy.invitedUsers.copiedInvites ||
defaults.invitedUsers.copiedInvites,
},
onboarding: {
step: legacy.onboarding.step || defaults.onboarding.step,
},
}
}
/**
* Migrates legacy persisted state to new store if new store doesn't exist in
* local storage AND old storage exists.
*/
export async function migrate() {
logger.debug('persisted state: migrate')
try {
const rawLegacyData = await AsyncStorage.getItem(
DEPRECATED_ROOT_STATE_STORAGE_KEY,
)
const alreadyMigrated = Boolean(await read())
if (!alreadyMigrated && rawLegacyData) {
logger.debug('persisted state: migrating legacy storage')
const legacyData = JSON.parse(rawLegacyData)
const newData = transform(legacyData)
await write(newData)
logger.debug('persisted state: migrated legacy storage')
}
} catch (e) {
logger.error('persisted state: error migrating legacy storage', {
error: String(e),
})
}
}
src/state/persisted/schema.ts
+68
View File
@@ -0,0 +1,68 @@
import {z} from 'zod'
import {deviceLocales} from '#/platform/detection'
// only data needed for rendering account page
const accountSchema = z.object({
service: z.string(),
did: z.string(),
refreshJwt: z.string().optional(),
accessJwt: z.string().optional(),
handle: z.string(),
displayName: z.string(),
aviUrl: z.string(),
})
export const schema = z.object({
colorMode: z.enum(['system', 'light', 'dark']),
session: z.object({
accounts: z.array(accountSchema),
currentAccount: accountSchema.optional(),
}),
reminders: z.object({
lastEmailConfirmReminder: z.string().optional(),
}),
languagePrefs: z.object({
primaryLanguage: z.string(), // should move to server
contentLanguages: z.array(z.string()), // should move to server
postLanguage: z.string(), // should move to server
postLanguageHistory: z.array(z.string()),
}),
requireAltTextEnabled: z.boolean(), // should move to server
mutedThreads: z.array(z.string()), // should move to server
invitedUsers: z.object({
seenDids: z.array(z.string()),
copiedInvites: z.array(z.string()),
}),
onboarding: z.object({
step: z.string(),
}),
})
export type Schema = z.infer<typeof schema>
export const defaults: Schema = {
colorMode: 'system',
session: {
accounts: [],
currentAccount: undefined,
},
reminders: {
lastEmailConfirmReminder: undefined,
},
languagePrefs: {
primaryLanguage: deviceLocales[0] || 'en',
contentLanguages: deviceLocales || [],
postLanguage: deviceLocales[0] || 'en',
postLanguageHistory: (deviceLocales || [])
.concat(['en', 'ja', 'pt', 'de'])
.slice(0, 6),
},
requireAltTextEnabled: false,
mutedThreads: [],
invitedUsers: {
seenDids: [],
copiedInvites: [],
},
onboarding: {
step: 'Home',
},
}
src/state/persisted/store.ts
+18
View File
@@ -0,0 +1,18 @@
import AsyncStorage from '@react-native-async-storage/async-storage'
import {Schema, schema} from '#/state/persisted/schema'
const BSKY_STORAGE = 'BSKY_STORAGE'
export async function write(value: Schema) {
schema.parse(value)
await AsyncStorage.setItem(BSKY_STORAGE, JSON.stringify(value))
}
export async function read(): Promise<Schema | undefined> {
const rawData = await AsyncStorage.getItem(BSKY_STORAGE)
const objData = rawData ? JSON.parse(rawData) : undefined
if (schema.safeParse(objData).success) {
return objData
}
}
src/state/shell/color-mode.tsx
+56
View File
@@ -0,0 +1,56 @@
import React from 'react'
import {isWeb} from '#/platform/detection'
import * as persisted from '#/state/persisted'
type StateContext = persisted.Schema['colorMode']
type SetContext = (v: persisted.Schema['colorMode']) => void
const stateContext = React.createContext<StateContext>('system')
const setContext = React.createContext<SetContext>(
(_: persisted.Schema['colorMode']) => {},
)
export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = React.useState(persisted.get('colorMode'))
const setStateWrapped = React.useCallback(
(colorMode: persisted.Schema['colorMode']) => {
setState(colorMode)
persisted.write('colorMode', colorMode)
updateDocument(colorMode)
},
[setState],
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setState(persisted.get('colorMode'))
updateDocument(persisted.get('colorMode'))
})
}, [setStateWrapped])
return (
<stateContext.Provider value={state}>
<setContext.Provider value={setStateWrapped}>
{children}
</setContext.Provider>
</stateContext.Provider>
)
}
export function useColorMode() {
return React.useContext(stateContext)
}
export function useSetColorMode() {
return React.useContext(setContext)
}
function updateDocument(colorMode: string) {
if (isWeb && typeof window !== 'undefined') {
const html = window.document.documentElement
// remove any other color mode classes
html.className = html.className.replace(/colorMode--\w+/g, '')
html.classList.add(`colorMode--${colorMode}`)
}
}
src/state/shell/drawer-open.tsx
+24
View File
@@ -0,0 +1,24 @@
import React from 'react'
type StateContext = boolean
type SetContext = (v: boolean) => void
const stateContext = React.createContext<StateContext>(false)
const setContext = React.createContext<SetContext>((_: boolean) => {})
export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = React.useState(false)
return (
<stateContext.Provider value={state}>
<setContext.Provider value={setState}>{children}</setContext.Provider>
</stateContext.Provider>
)
}
export function useIsDrawerOpen() {
return React.useContext(stateContext)
}
export function useSetDrawerOpen() {
return React.useContext(setContext)
}
src/state/shell/drawer-swipe-disabled.tsx
+24
View File
@@ -0,0 +1,24 @@
import React from 'react'
type StateContext = boolean
type SetContext = (v: boolean) => void
const stateContext = React.createContext<StateContext>(false)
const setContext = React.createContext<SetContext>((_: boolean) => {})
export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = React.useState(false)
return (
<stateContext.Provider value={state}>
<setContext.Provider value={setState}>{children}</setContext.Provider>
</stateContext.Provider>
)
}
export function useIsDrawerSwipeDisabled() {
return React.useContext(stateContext)
}
export function useSetDrawerSwipeDisabled() {
return React.useContext(setContext)
}
src/state/shell/index.tsx
+25
View File
@@ -0,0 +1,25 @@
import React from 'react'
import {Provider as DrawerOpenProvider} from './drawer-open'
import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled'
import {Provider as MinimalModeProvider} from './minimal-mode'
import {Provider as ColorModeProvider} from './color-mode'
export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open'
export {
useIsDrawerSwipeDisabled,
useSetDrawerSwipeDisabled,
} from './drawer-swipe-disabled'
export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode'
export {useColorMode, useSetColorMode} from './color-mode'
export function Provider({children}: React.PropsWithChildren<{}>) {
return (
<DrawerOpenProvider>
<DrawerSwipableProvider>
<MinimalModeProvider>
<ColorModeProvider>{children}</ColorModeProvider>
</MinimalModeProvider>
</DrawerSwipableProvider>
</DrawerOpenProvider>
)
}
src/state/shell/minimal-mode.tsx
+24
View File
@@ -0,0 +1,24 @@
import React from 'react'
type StateContext = boolean
type SetContext = (v: boolean) => void
const stateContext = React.createContext<StateContext>(false)
const setContext = React.createContext<SetContext>((_: boolean) => {})
export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = React.useState(false)
return (
<stateContext.Provider value={state}>
<setContext.Provider value={setState}>{children}</setContext.Provider>
</stateContext.Provider>
)
}
export function useMinimalShellMode() {
return React.useContext(stateContext)
}
export function useSetMinimalShellMode() {
return React.useContext(setContext)
}
src/view/com/auth/LoggedOut.tsx
+4 -2
View File
@@ -9,6 +9,7 @@ import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {SplashScreen} from './SplashScreen' import {SplashScreen} from './SplashScreen'
import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
enum ScreenState { enum ScreenState {
S_LoginOrCreateAccount, S_LoginOrCreateAccount,
@@ -19,6 +20,7 @@ enum ScreenState {
export const LoggedOut = observer(function LoggedOutImpl() { export const LoggedOut = observer(function LoggedOutImpl() {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const {screen} = useAnalytics() const {screen} = useAnalytics()
const [screenState, setScreenState] = React.useState<ScreenState>( const [screenState, setScreenState] = React.useState<ScreenState>(
ScreenState.S_LoginOrCreateAccount, ScreenState.S_LoginOrCreateAccount,
@@ -26,8 +28,8 @@ export const LoggedOut = observer(function LoggedOutImpl() {
React.useEffect(() => { React.useEffect(() => {
screen('Login') screen('Login')
store.shell.setMinimalShellMode(true) setMinimalShellMode(true)
}, [store, screen]) }, [screen, setMinimalShellMode])
if ( if (
store.session.isResumingSession || store.session.isResumingSession ||
src/view/com/auth/Onboarding.tsx
+4 -2
View File
@@ -8,14 +8,16 @@ import {useStores} from 'state/index'
import {Welcome} from './onboarding/Welcome' import {Welcome} from './onboarding/Welcome'
import {RecommendedFeeds} from './onboarding/RecommendedFeeds' import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
import {RecommendedFollows} from './onboarding/RecommendedFollows' import {RecommendedFollows} from './onboarding/RecommendedFollows'
import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
export const Onboarding = observer(function OnboardingImpl() { export const Onboarding = observer(function OnboardingImpl() {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
React.useEffect(() => { React.useEffect(() => {
store.shell.setMinimalShellMode(true) setMinimalShellMode(true)
}, [store]) }, [setMinimalShellMode])
const next = () => store.onboarding.next() const next = () => store.onboarding.next()
const skip = () => store.onboarding.skip() const skip = () => store.onboarding.skip()
src/view/com/composer/ExternalEmbed.tsx
+2 -2
View File
@@ -54,14 +54,14 @@ export const ExternalEmbed = ({
{link.meta.description} {link.meta.description}
</Text> </Text>
)} )}
{!!link.meta?.error && ( {link.meta?.error ? (
<Text <Text
type="sm" type="sm"
numberOfLines={2} numberOfLines={2}
style={[{color: palError.colors.background}, styles.description]}> style={[{color: palError.colors.background}, styles.description]}>
{link.meta.error} {link.meta.error}
</Text> </Text>
)} ) : null}
</View> </View>
<TouchableOpacity <TouchableOpacity
style={styles.removeBtn} style={styles.removeBtn}
src/view/com/feeds/FeedPage.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const FeedPage = observer(function FeedPageImpl({
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const {isDesktop} = useWebMediaQueries() const {isDesktop} = useWebMediaQueries()
const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store) const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll()
const {screen, track} = useAnalytics() const {screen, track} = useAnalytics()
const headerOffset = useHeaderOffset() const headerOffset = useHeaderOffset()
const scrollElRef = React.useRef<FlatList>(null) const scrollElRef = React.useRef<FlatList>(null)
src/view/com/lists/ListsList.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ import {Text} from '../util/text/Text'
import {ListsListModel} from 'state/models/lists/lists-list' import {ListsListModel} from 'state/models/lists/lists-list'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {FlatList} from '../util/Views.web' import {FlatList} from '../util/Views'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {logger} from '#/logger' import {logger} from '#/logger'
import {Trans} from '@lingui/macro' import {Trans} from '@lingui/macro'
src/view/com/modals/ChangeHandle.tsx
+2 -2
View File
@@ -489,13 +489,13 @@ function CustomHandleForm({
</Text> </Text>
</View> </View>
)} )}
{error && ( {error ? (
<View style={[styles.message, palError.view]}> <View style={[styles.message, palError.view]}>
<Text type="md-medium" style={palError.text}> <Text type="md-medium" style={palError.text}>
{error} {error}
</Text> </Text>
</View> </View>
)} ) : null}
<Button <Button
type="primary" type="primary"
style={[s.p20, isVerifying && styles.dimmed]} style={[s.p20, isVerifying && styles.dimmed]}
src/view/com/pager/FeedsTabBarMobile.tsx
+7 -5
View File
@@ -13,10 +13,11 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {HITSLOP_10} from 'lib/constants' import {HITSLOP_10} from 'lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import Animated from 'react-native-reanimated' import Animated from 'react-native-reanimated'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useSetDrawerOpen} from '#/state/shell/drawer-open'
export const FeedsTabBar = observer(function FeedsTabBarImpl( export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
@@ -24,13 +25,14 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const {_} = useLingui() const {_} = useLingui()
const setDrawerOpen = useSetDrawerOpen()
const items = useHomeTabs(store.preferences.pinnedFeeds) const items = useHomeTabs(store.preferences.pinnedFeeds)
const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3) const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
const {headerMinimalShellTransform} = useMinimalShellMode() const {minimalShellMode, headerMinimalShellTransform} = useMinimalShellMode()
const onPressAvi = React.useCallback(() => { const onPressAvi = React.useCallback(() => {
store.shell.openDrawer() setDrawerOpen(true)
}, [store]) }, [setDrawerOpen])
return ( return (
<Animated.View <Animated.View
@@ -39,7 +41,7 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
pal.border, pal.border,
styles.tabBar, styles.tabBar,
headerMinimalShellTransform, headerMinimalShellTransform,
store.shell.minimalShellMode && styles.disabled, minimalShellMode && styles.disabled,
]}> ]}>
<View style={[pal.view, styles.topBar]}> <View style={[pal.view, styles.topBar]}>
<View style={[pal.view]}> <View style={[pal.view]}>
src/view/com/pager/PagerWithHeader.tsx
+60 -27
View File
@@ -1,9 +1,13 @@
import * as React from 'react' import * as React from 'react'
import {LayoutChangeEvent, StyleSheet} from 'react-native' import {
LayoutChangeEvent,
NativeScrollEvent,
StyleSheet,
View,
} from 'react-native'
import Animated, { import Animated, {
Easing, Easing,
useAnimatedReaction, useAnimatedReaction,
useAnimatedScrollHandler,
useAnimatedStyle, useAnimatedStyle,
useSharedValue, useSharedValue,
withTiming, withTiming,
@@ -12,13 +16,12 @@ import Animated, {
import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {TabBar} from './TabBar' import {TabBar} from './TabBar'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
const SCROLLED_DOWN_LIMIT = 200 const SCROLLED_DOWN_LIMIT = 200
interface PagerWithHeaderChildParams { interface PagerWithHeaderChildParams {
headerHeight: number headerHeight: number
onScroll: OnScrollCb onScroll: (e: NativeScrollEvent) => void
isScrolledDown: boolean isScrolledDown: boolean
} }
@@ -28,6 +31,7 @@ export interface PagerWithHeaderProps {
| (((props: PagerWithHeaderChildParams) => JSX.Element) | null)[] | (((props: PagerWithHeaderChildParams) => JSX.Element) | null)[]
| ((props: PagerWithHeaderChildParams) => JSX.Element) | ((props: PagerWithHeaderChildParams) => JSX.Element)
items: string[] items: string[]
isHeaderReady: boolean
renderHeader?: () => JSX.Element renderHeader?: () => JSX.Element
initialPage?: number initialPage?: number
onPageSelected?: (index: number) => void onPageSelected?: (index: number) => void
@@ -39,6 +43,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
children, children,
testID, testID,
items, items,
isHeaderReady,
renderHeader, renderHeader,
initialPage, initialPage,
onPageSelected, onPageSelected,
@@ -51,15 +56,17 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
const scrollYs = React.useRef<Record<number, number>>({}) const scrollYs = React.useRef<Record<number, number>>({})
const scrollY = useSharedValue(scrollYs.current[currentPage] || 0) const scrollY = useSharedValue(scrollYs.current[currentPage] || 0)
const [tabBarHeight, setTabBarHeight] = React.useState(0) const [tabBarHeight, setTabBarHeight] = React.useState(0)
const [headerHeight, setHeaderHeight] = React.useState(0) const [headerOnlyHeight, setHeaderOnlyHeight] = React.useState(0)
const [isScrolledDown, setIsScrolledDown] = React.useState( const [isScrolledDown, setIsScrolledDown] = React.useState(
scrollYs.current[currentPage] > SCROLLED_DOWN_LIMIT, scrollYs.current[currentPage] > SCROLLED_DOWN_LIMIT,
) )
const headerHeight = headerOnlyHeight + tabBarHeight
// react to scroll updates // react to scroll updates
function onScrollUpdate(v: number) { function onScrollUpdate(v: number) {
// track each page's current scroll position // track each page's current scroll position
scrollYs.current[currentPage] = Math.min(v, headerHeight - tabBarHeight) scrollYs.current[currentPage] = Math.min(v, headerOnlyHeight)
// update the 'is scrolled down' value // update the 'is scrolled down' value
setIsScrolledDown(v > SCROLLED_DOWN_LIMIT) setIsScrolledDown(v > SCROLLED_DOWN_LIMIT)
} }
@@ -75,11 +82,11 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
}, },
[setTabBarHeight], [setTabBarHeight],
) )
const onHeaderLayout = React.useCallback( const onHeaderOnlyLayout = React.useCallback(
(evt: LayoutChangeEvent) => { (evt: LayoutChangeEvent) => {
setHeaderHeight(evt.nativeEvent.layout.height) setHeaderOnlyHeight(evt.nativeEvent.layout.height)
}, },
[setHeaderHeight], [setHeaderOnlyHeight],
) )
// render the the header and tab bar // render the the header and tab bar
@@ -88,7 +95,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
transform: [ transform: [
{ {
translateY: Math.min( translateY: Math.min(
Math.min(scrollY.value, headerHeight - tabBarHeight) * -1, Math.min(scrollY.value, headerOnlyHeight) * -1,
0, 0,
), ),
}, },
@@ -100,40 +107,54 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
(props: RenderTabBarFnProps) => { (props: RenderTabBarFnProps) => {
return ( return (
<Animated.View <Animated.View
onLayout={onHeaderLayout}
style={[ style={[
isMobile ? styles.tabBarMobile : styles.tabBarDesktop, isMobile ? styles.tabBarMobile : styles.tabBarDesktop,
headerTransform, headerTransform,
]}> ]}>
{renderHeader?.()} <View onLayout={onHeaderOnlyLayout}>{renderHeader?.()}</View>
<TabBar <View
items={items}
selectedPage={currentPage}
onSelect={props.onSelect}
onPressSelected={onCurrentPageSelected}
onLayout={onTabBarLayout} onLayout={onTabBarLayout}
/> style={{
// Render it immediately to measure it early since its size doesn't depend on the content.
// However, keep it invisible until the header above stabilizes in order to prevent jumps.
opacity: isHeaderReady ? 1 : 0,
pointerEvents: isHeaderReady ? 'auto' : 'none',
}}>
<TabBar
items={items}
selectedPage={currentPage}
onSelect={props.onSelect}
onPressSelected={onCurrentPageSelected}
/>
</View>
</Animated.View> </Animated.View>
) )
}, },
[ [
items, items,
isHeaderReady,
renderHeader, renderHeader,
headerTransform, headerTransform,
currentPage, currentPage,
onCurrentPageSelected, onCurrentPageSelected,
isMobile, isMobile,
onTabBarLayout, onTabBarLayout,
onHeaderLayout, onHeaderOnlyLayout,
], ],
) )
// props to pass into children render functions // Ideally we'd call useAnimatedScrollHandler here but we can't safely do that
const onScroll = useAnimatedScrollHandler({ // due to https://github.com/software-mansion/react-native-reanimated/issues/5345.
onScroll(e) { // So instead we pass down a worklet, and individual pages will have to call it.
const onScroll = React.useCallback(
(e: NativeScrollEvent) => {
'worklet'
scrollY.value = e.contentOffset.y scrollY.value = e.contentOffset.y
}, },
}) [scrollY],
)
// props to pass into children render functions
const childProps = React.useMemo<PagerWithHeaderChildParams>(() => { const childProps = React.useMemo<PagerWithHeaderChildParams>(() => {
return { return {
headerHeight, headerHeight,
@@ -175,11 +196,23 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
tabBarPosition="top"> tabBarPosition="top">
{toArray(children) {toArray(children)
.filter(Boolean) .filter(Boolean)
.map(child => { .map((child, i) => {
if (child) { let output = null
return child(childProps) if (
child != null &&
// Defer showing content until we know it won't jump.
isHeaderReady &&
headerOnlyHeight > 0 &&
tabBarHeight > 0
) {
output = child(childProps)
} }
return null // Pager children must be noncollapsible plain <View>s.
return (
<View key={i} collapsable={false}>
{output}
</View>
)
})} })}
</Pager> </Pager>
) )
src/view/com/pager/TabBar.tsx
+1 -3
View File
@@ -14,7 +14,6 @@ export interface TabBarProps {
indicatorColor?: string indicatorColor?: string
onSelect?: (index: number) => void onSelect?: (index: number) => void
onPressSelected?: (index: number) => void onPressSelected?: (index: number) => void
onLayout?: (evt: LayoutChangeEvent) => void
} }
export function TabBar({ export function TabBar({
@@ -24,7 +23,6 @@ export function TabBar({
indicatorColor, indicatorColor,
onSelect, onSelect,
onPressSelected, onPressSelected,
onLayout,
}: TabBarProps) { }: TabBarProps) {
const pal = usePalette('default') const pal = usePalette('default')
const scrollElRef = useRef<ScrollView>(null) const scrollElRef = useRef<ScrollView>(null)
@@ -68,7 +66,7 @@ export function TabBar({
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
return ( return (
<View testID={testID} style={[pal.view, styles.outer]} onLayout={onLayout}> <View testID={testID} style={[pal.view, styles.outer]}>
<DraggableScrollView <DraggableScrollView
horizontal={true} horizontal={true}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
src/view/com/profile/ProfileSubpageHeader.tsx
+4 -2
View File
@@ -19,6 +19,7 @@ import {isNative} from 'platform/detection'
import {ImagesLightbox} from 'state/models/ui/shell' import {ImagesLightbox} from 'state/models/ui/shell'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useSetDrawerOpen} from '#/state/shell'
export const ProfileSubpageHeader = observer(function HeaderImpl({ export const ProfileSubpageHeader = observer(function HeaderImpl({
isLoading, isLoading,
@@ -44,6 +45,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
avatarType: UserAvatarType avatarType: UserAvatarType
}>) { }>) {
const store = useStores() const store = useStores()
const setDrawerOpen = useSetDrawerOpen()
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const {_} = useLingui() const {_} = useLingui()
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
@@ -59,8 +61,8 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
}, [navigation]) }, [navigation])
const onPressMenu = React.useCallback(() => { const onPressMenu = React.useCallback(() => {
store.shell.openDrawer() setDrawerOpen(true)
}, [store]) }, [setDrawerOpen])
const onPressAvi = React.useCallback(() => { const onPressAvi = React.useCallback(() => {
if ( if (
src/view/com/search/HeaderWithInput.tsx
+4 -4
View File
@@ -8,12 +8,12 @@ import {Text} from 'view/com/util/text/Text'
import {MagnifyingGlassIcon} from 'lib/icons' import {MagnifyingGlassIcon} from 'lib/icons'
import {useTheme} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {HITSLOP_10} from 'lib/constants' import {HITSLOP_10} from 'lib/constants'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSetDrawerOpen} from '#/state/shell'
interface Props { interface Props {
isInputFocused: boolean isInputFocused: boolean
@@ -35,7 +35,7 @@ export function HeaderWithInput({
onSubmitQuery, onSubmitQuery,
showMenu = true, showMenu = true,
}: Props) { }: Props) {
const store = useStores() const setDrawerOpen = useSetDrawerOpen()
const theme = useTheme() const theme = useTheme()
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
@@ -45,8 +45,8 @@ export function HeaderWithInput({
const onPressMenu = React.useCallback(() => { const onPressMenu = React.useCallback(() => {
track('ViewHeader:MenuButtonClicked') track('ViewHeader:MenuButtonClicked')
store.shell.openDrawer() setDrawerOpen(true)
}, [track, store]) }, [track, setDrawerOpen])
const onPressCancelSearchInner = React.useCallback(() => { const onPressCancelSearchInner = React.useCallback(() => {
onPressCancelSearch() onPressCancelSearch()
src/view/com/util/SimpleViewHeader.tsx
+4 -4
View File
@@ -10,11 +10,11 @@ import {
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useNavigation} from '@react-navigation/native' import {useNavigation} from '@react-navigation/native'
import {CenteredView} from './Views' import {CenteredView} from './Views'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {NavigationProp} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types'
import {useSetDrawerOpen} from '#/state/shell'
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
@@ -27,7 +27,7 @@ export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
}>) { }>) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const setDrawerOpen = useSetDrawerOpen()
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const {track} = useAnalytics() const {track} = useAnalytics()
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
@@ -43,8 +43,8 @@ export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({
const onPressMenu = React.useCallback(() => { const onPressMenu = React.useCallback(() => {
track('ViewHeader:MenuButtonClicked') track('ViewHeader:MenuButtonClicked')
store.shell.openDrawer() setDrawerOpen(true)
}, [track, store]) }, [track, setDrawerOpen])
const Container = isMobile ? View : CenteredView const Container = isMobile ? View : CenteredView
return ( return (
src/view/com/util/ViewHeader.tsx
+4 -4
View File
@@ -5,13 +5,13 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useNavigation} from '@react-navigation/native' import {useNavigation} from '@react-navigation/native'
import {CenteredView} from './Views' import {CenteredView} from './Views'
import {Text} from './text/Text' import {Text} from './text/Text'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {NavigationProp} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import Animated from 'react-native-reanimated' import Animated from 'react-native-reanimated'
import {useSetDrawerOpen} from '#/state/shell'
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
@@ -33,7 +33,7 @@ export const ViewHeader = observer(function ViewHeaderImpl({
renderButton?: () => JSX.Element renderButton?: () => JSX.Element
}) { }) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const setDrawerOpen = useSetDrawerOpen()
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const {track} = useAnalytics() const {track} = useAnalytics()
const {isDesktop, isTablet} = useWebMediaQueries() const {isDesktop, isTablet} = useWebMediaQueries()
@@ -48,8 +48,8 @@ export const ViewHeader = observer(function ViewHeaderImpl({
const onPressMenu = React.useCallback(() => { const onPressMenu = React.useCallback(() => {
track('ViewHeader:MenuButtonClicked') track('ViewHeader:MenuButtonClicked')
store.shell.openDrawer() setDrawerOpen(true)
}, [track, store]) }, [track, setDrawerOpen])
if (isDesktop) { if (isDesktop) {
if (showOnDesktop) { if (showOnDesktop) {
src/view/screens/AppPasswords.tsx
+4 -2
View File
@@ -18,20 +18,22 @@ import {ViewHeader} from '../com/util/ViewHeader'
import {CenteredView} from 'view/com/util/Views' import {CenteredView} from 'view/com/util/Views'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
export const AppPasswords = withAuthRequired( export const AppPasswords = withAuthRequired(
observer(function AppPasswordsImpl({}: Props) { observer(function AppPasswordsImpl({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const {screen} = useAnalytics() const {screen} = useAnalytics()
const {isTabletOrDesktop} = useWebMediaQueries() const {isTabletOrDesktop} = useWebMediaQueries()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
screen('AppPasswords') screen('AppPasswords')
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [screen, store]), }, [screen, setMinimalShellMode]),
) )
const onAdd = React.useCallback(async () => { const onAdd = React.useCallback(async () => {
src/view/screens/CommunityGuidelines.tsx
+4 -4
View File
@@ -5,10 +5,10 @@ import {Text} from 'view/com/util/text/Text'
import {TextLink} from 'view/com/util/Link' import {TextLink} from 'view/com/util/Link'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index'
import {ScrollView} from 'view/com/util/Views' import {ScrollView} from 'view/com/util/Views'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps< type Props = NativeStackScreenProps<
CommonNavigatorParams, CommonNavigatorParams,
@@ -16,12 +16,12 @@ type Props = NativeStackScreenProps<
> >
export const CommunityGuidelinesScreen = (_props: Props) => { export const CommunityGuidelinesScreen = (_props: Props) => {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/CopyrightPolicy.tsx
+4 -4
View File
@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
import {TextLink} from 'view/com/util/Link' import {TextLink} from 'view/com/util/Link'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index'
import {ScrollView} from 'view/com/util/Views' import {ScrollView} from 'view/com/util/Views'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'CopyrightPolicy'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'CopyrightPolicy'>
export const CopyrightPolicyScreen = (_props: Props) => { export const CopyrightPolicyScreen = (_props: Props) => {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/Feeds.tsx
+6 -4
View File
@@ -29,6 +29,7 @@ import {useFocusEffect} from '@react-navigation/native'
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'> type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
export const FeedsScreen = withAuthRequired( export const FeedsScreen = withAuthRequired(
@@ -36,6 +37,7 @@ export const FeedsScreen = withAuthRequired(
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const {_} = useLingui() const {_} = useLingui()
const setMinimalShellMode = useSetMinimalShellMode()
const {isMobile, isTabletOrDesktop} = useWebMediaQueries() const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
const myFeeds = store.me.myFeeds const myFeeds = store.me.myFeeds
const [query, setQuery] = React.useState<string>('') const [query, setQuery] = React.useState<string>('')
@@ -46,14 +48,14 @@ export const FeedsScreen = withAuthRequired(
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
myFeeds.setup() myFeeds.setup()
const softResetSub = store.onScreenSoftReset(() => myFeeds.refresh()) const softResetSub = store.onScreenSoftReset(() => myFeeds.refresh())
return () => { return () => {
softResetSub.remove() softResetSub.remove()
} }
}, [store, myFeeds]), }, [store, myFeeds, setMinimalShellMode]),
) )
React.useEffect(() => { React.useEffect(() => {
// watch for changes to saved/pinned feeds // watch for changes to saved/pinned feeds
@@ -295,13 +297,13 @@ function SavedFeed({feed}: {feed: FeedSourceModel}) {
<Text type="lg-medium" style={pal.text} numberOfLines={1}> <Text type="lg-medium" style={pal.text} numberOfLines={1}>
{feed.displayName} {feed.displayName}
</Text> </Text>
{feed.error && ( {feed.error ? (
<View style={[styles.offlineSlug, pal.borderDark]}> <View style={[styles.offlineSlug, pal.borderDark]}>
<Text type="xs" style={pal.textLight}> <Text type="xs" style={pal.textLight}>
<Trans>Feed offline</Trans> <Trans>Feed offline</Trans>
</Text> </Text>
</View> </View>
)} ) : null}
</View> </View>
{isMobile && ( {isMobile && (
<FontAwesomeIcon <FontAwesomeIcon
src/view/screens/Home.tsx
+10 -7
View File
@@ -14,6 +14,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {FeedPage} from 'view/com/feeds/FeedPage' import {FeedPage} from 'view/com/feeds/FeedPage'
import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
export const POLL_FREQ = 30e3 // 30sec export const POLL_FREQ = 30e3 // 30sec
@@ -21,6 +22,8 @@ type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
export const HomeScreen = withAuthRequired( export const HomeScreen = withAuthRequired(
observer(function HomeScreenImpl({}: Props) { observer(function HomeScreenImpl({}: Props) {
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
const pagerRef = React.useRef<PagerRef>(null) const pagerRef = React.useRef<PagerRef>(null)
const [selectedPage, setSelectedPage] = React.useState(0) const [selectedPage, setSelectedPage] = React.useState(0)
const [customFeeds, setCustomFeeds] = React.useState<PostsFeedModel[]>([]) const [customFeeds, setCustomFeeds] = React.useState<PostsFeedModel[]>([])
@@ -61,21 +64,21 @@ export const HomeScreen = withAuthRequired(
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
store.shell.setIsDrawerSwipeDisabled(selectedPage > 0) setDrawerSwipeDisabled(selectedPage > 0)
return () => { return () => {
store.shell.setIsDrawerSwipeDisabled(false) setDrawerSwipeDisabled(false)
} }
}, [store, selectedPage]), }, [setDrawerSwipeDisabled, selectedPage, setMinimalShellMode]),
) )
const onPageSelected = React.useCallback( const onPageSelected = React.useCallback(
(index: number) => { (index: number) => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
setSelectedPage(index) setSelectedPage(index)
store.shell.setIsDrawerSwipeDisabled(index > 0) setDrawerSwipeDisabled(index > 0)
}, },
[store, setSelectedPage], [setDrawerSwipeDisabled, setSelectedPage, setMinimalShellMode],
) )
const onPressSelected = React.useCallback(() => { const onPressSelected = React.useCallback(() => {
src/view/screens/LanguageSettings.tsx
+4 -2
View File
@@ -18,6 +18,7 @@ import {useAnalytics} from 'lib/analytics/analytics'
import {useFocusEffect} from '@react-navigation/native' import {useFocusEffect} from '@react-navigation/native'
import {LANGUAGES} from 'lib/../locale/languages' import {LANGUAGES} from 'lib/../locale/languages'
import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
@@ -28,12 +29,13 @@ export const LanguageSettingsScreen = observer(function LanguageSettingsImpl(
const store = useStores() const store = useStores()
const {isTabletOrDesktop} = useWebMediaQueries() const {isTabletOrDesktop} = useWebMediaQueries()
const {screen, track} = useAnalytics() const {screen, track} = useAnalytics()
const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
screen('Settings') screen('Settings')
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [screen, store]), }, [screen, setMinimalShellMode]),
) )
const onPressContentLanguages = React.useCallback(() => { const onPressContentLanguages = React.useCallback(() => {
src/view/screens/Lists.tsx
+5 -3
View File
@@ -16,12 +16,14 @@ import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'>
export const ListsScreen = withAuthRequired( export const ListsScreen = withAuthRequired(
observer(function ListsScreenImpl({}: Props) { observer(function ListsScreenImpl({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
@@ -32,9 +34,9 @@ export const ListsScreen = withAuthRequired(
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
listsLists.refresh() listsLists.refresh()
}, [store, listsLists]), }, [listsLists, setMinimalShellMode]),
) )
const onPressNewList = React.useCallback(() => { const onPressNewList = React.useCallback(() => {
@@ -85,7 +87,7 @@ export const ListsScreen = withAuthRequired(
</Button> </Button>
</View> </View>
</SimpleViewHeader> </SimpleViewHeader>
<ListsList listsList={listsLists} /> <ListsList listsList={listsLists} style={s.flexGrow1} />
</View> </View>
) )
}), }),
src/view/screens/Log.tsx
+4 -4
View File
@@ -5,7 +5,6 @@ import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ScrollView} from '../com/util/Views' import {ScrollView} from '../com/util/Views'
import {useStores} from 'state/index'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {Text} from '../com/util/text/Text' import {Text} from '../com/util/text/Text'
@@ -14,20 +13,21 @@ import {getEntries} from '#/logger/logDump'
import {ago} from 'lib/strings/time' import {ago} from 'lib/strings/time'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useSetMinimalShellMode} from '#/state/shell'
export const LogScreen = observer(function Log({}: NativeStackScreenProps< export const LogScreen = observer(function Log({}: NativeStackScreenProps<
CommonNavigatorParams, CommonNavigatorParams,
'Log' 'Log'
>) { >) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores()
const {_} = useLingui() const {_} = useLingui()
const setMinimalShellMode = useSetMinimalShellMode()
const [expanded, setExpanded] = React.useState<string[]>([]) const [expanded, setExpanded] = React.useState<string[]>([])
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
const toggler = (id: string) => () => { const toggler = (id: string) => () => {
src/view/screens/Moderation.tsx
+4 -2
View File
@@ -17,20 +17,22 @@ import {Text} from '../com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'>
export const ModerationScreen = withAuthRequired( export const ModerationScreen = withAuthRequired(
observer(function Moderation({}: Props) { observer(function Moderation({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const {screen, track} = useAnalytics() const {screen, track} = useAnalytics()
const {isTabletOrDesktop} = useWebMediaQueries() const {isTabletOrDesktop} = useWebMediaQueries()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
screen('Moderation') screen('Moderation')
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [screen, store]), }, [screen, setMinimalShellMode]),
) )
const onPressContentFiltering = React.useCallback(() => { const onPressContentFiltering = React.useCallback(() => {
src/view/screens/ModerationBlockedAccounts.tsx
+4 -2
View File
@@ -22,6 +22,7 @@ import {ViewHeader} from '../com/util/ViewHeader'
import {CenteredView} from 'view/com/util/Views' import {CenteredView} from 'view/com/util/Views'
import {ProfileCard} from 'view/com/profile/ProfileCard' import {ProfileCard} from 'view/com/profile/ProfileCard'
import {logger} from '#/logger' import {logger} from '#/logger'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps< type Props = NativeStackScreenProps<
CommonNavigatorParams, CommonNavigatorParams,
@@ -31,6 +32,7 @@ export const ModerationBlockedAccounts = withAuthRequired(
observer(function ModerationBlockedAccountsImpl({}: Props) { observer(function ModerationBlockedAccountsImpl({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const {isTabletOrDesktop} = useWebMediaQueries() const {isTabletOrDesktop} = useWebMediaQueries()
const {screen} = useAnalytics() const {screen} = useAnalytics()
const blockedAccounts = useMemo( const blockedAccounts = useMemo(
@@ -41,9 +43,9 @@ export const ModerationBlockedAccounts = withAuthRequired(
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
screen('BlockedAccounts') screen('BlockedAccounts')
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
blockedAccounts.refresh() blockedAccounts.refresh()
}, [screen, store, blockedAccounts]), }, [screen, setMinimalShellMode, blockedAccounts]),
) )
const onRefresh = React.useCallback(() => { const onRefresh = React.useCallback(() => {
src/view/screens/ModerationModlists.tsx
+5 -3
View File
@@ -16,12 +16,14 @@ import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ModerationModlists'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'ModerationModlists'>
export const ModerationModlistsScreen = withAuthRequired( export const ModerationModlistsScreen = withAuthRequired(
observer(function ModerationModlistsScreenImpl({}: Props) { observer(function ModerationModlistsScreenImpl({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
@@ -32,9 +34,9 @@ export const ModerationModlistsScreen = withAuthRequired(
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
mutelists.refresh() mutelists.refresh()
}, [store, mutelists]), }, [mutelists, setMinimalShellMode]),
) )
const onPressNewList = React.useCallback(() => { const onPressNewList = React.useCallback(() => {
@@ -85,7 +87,7 @@ export const ModerationModlistsScreen = withAuthRequired(
</Button> </Button>
</View> </View>
</SimpleViewHeader> </SimpleViewHeader>
<ListsList listsList={mutelists} /> <ListsList listsList={mutelists} style={s.flexGrow1} />
</View> </View>
) )
}), }),
src/view/screens/ModerationMutedAccounts.tsx
+4 -2
View File
@@ -22,6 +22,7 @@ import {ViewHeader} from '../com/util/ViewHeader'
import {CenteredView} from 'view/com/util/Views' import {CenteredView} from 'view/com/util/Views'
import {ProfileCard} from 'view/com/profile/ProfileCard' import {ProfileCard} from 'view/com/profile/ProfileCard'
import {logger} from '#/logger' import {logger} from '#/logger'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps< type Props = NativeStackScreenProps<
CommonNavigatorParams, CommonNavigatorParams,
@@ -31,6 +32,7 @@ export const ModerationMutedAccounts = withAuthRequired(
observer(function ModerationMutedAccountsImpl({}: Props) { observer(function ModerationMutedAccountsImpl({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const {isTabletOrDesktop} = useWebMediaQueries() const {isTabletOrDesktop} = useWebMediaQueries()
const {screen} = useAnalytics() const {screen} = useAnalytics()
const mutedAccounts = useMemo(() => new MutedAccountsModel(store), [store]) const mutedAccounts = useMemo(() => new MutedAccountsModel(store), [store])
@@ -38,9 +40,9 @@ export const ModerationMutedAccounts = withAuthRequired(
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
screen('MutedAccounts') screen('MutedAccounts')
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
mutedAccounts.refresh() mutedAccounts.refresh()
}, [screen, store, mutedAccounts]), }, [screen, setMinimalShellMode, mutedAccounts]),
) )
const onRefresh = React.useCallback(() => { const onRefresh = React.useCallback(() => {
src/view/screens/NotFound.tsx
+4 -4
View File
@@ -10,18 +10,18 @@ import {Text} from '../com/util/text/Text'
import {Button} from 'view/com/util/forms/Button' import {Button} from 'view/com/util/forms/Button'
import {NavigationProp} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useSetMinimalShellMode} from '#/state/shell'
export const NotFoundScreen = () => { export const NotFoundScreen = () => {
const pal = usePalette('default') const pal = usePalette('default')
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const store = useStores() const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
const canGoBack = navigation.canGoBack() const canGoBack = navigation.canGoBack()
src/view/screens/Notifications.tsx
+5 -4
View File
@@ -21,6 +21,7 @@ import {s, colors} from 'lib/styles'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {isWeb} from 'platform/detection' import {isWeb} from 'platform/detection'
import {logger} from '#/logger' import {logger} from '#/logger'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps< type Props = NativeStackScreenProps<
NotificationsTabNavigatorParams, NotificationsTabNavigatorParams,
@@ -29,8 +30,8 @@ type Props = NativeStackScreenProps<
export const NotificationsScreen = withAuthRequired( export const NotificationsScreen = withAuthRequired(
observer(function NotificationsScreenImpl({}: Props) { observer(function NotificationsScreenImpl({}: Props) {
const store = useStores() const store = useStores()
const [onMainScroll, isScrolledDown, resetMainScroll] = const setMinimalShellMode = useSetMinimalShellMode()
useOnMainScroll(store) const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll()
const scrollElRef = React.useRef<FlatList>(null) const scrollElRef = React.useRef<FlatList>(null)
const {screen} = useAnalytics() const {screen} = useAnalytics()
const pal = usePalette('default') const pal = usePalette('default')
@@ -60,7 +61,7 @@ export const NotificationsScreen = withAuthRequired(
// = // =
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
logger.debug('NotificationsScreen: Updating feed') logger.debug('NotificationsScreen: Updating feed')
const softResetSub = store.onScreenSoftReset(onPressLoadLatest) const softResetSub = store.onScreenSoftReset(onPressLoadLatest)
store.me.notifications.update() store.me.notifications.update()
@@ -70,7 +71,7 @@ export const NotificationsScreen = withAuthRequired(
softResetSub.remove() softResetSub.remove()
store.me.notifications.markAllRead() store.me.notifications.markAllRead()
} }
}, [store, screen, onPressLoadLatest]), }, [store, screen, onPressLoadLatest, setMinimalShellMode]),
) )
useTabFocusEffect( useTabFocusEffect(
src/view/screens/PostLikedBy.tsx
+4 -4
View File
@@ -5,19 +5,19 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
import {useStores} from 'state/index'
import {makeRecordUri} from 'lib/strings/url-helpers' import {makeRecordUri} from 'lib/strings/url-helpers'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostLikedBy'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostLikedBy'>
export const PostLikedByScreen = withAuthRequired(({route}: Props) => { export const PostLikedByScreen = withAuthRequired(({route}: Props) => {
const store = useStores() const setMinimalShellMode = useSetMinimalShellMode()
const {name, rkey} = route.params const {name, rkey} = route.params
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/PostRepostedBy.tsx
+4 -4
View File
@@ -5,19 +5,19 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy' import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
import {useStores} from 'state/index'
import {makeRecordUri} from 'lib/strings/url-helpers' import {makeRecordUri} from 'lib/strings/url-helpers'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'>
export const PostRepostedByScreen = withAuthRequired(({route}: Props) => { export const PostRepostedByScreen = withAuthRequired(({route}: Props) => {
const store = useStores()
const {name, rkey} = route.params const {name, rkey} = route.params
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/PostThread.tsx
+6 -3
View File
@@ -15,6 +15,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {clamp} from 'lodash' import {clamp} from 'lodash'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {logger} from '#/logger' import {logger} from '#/logger'
import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell'
const SHELL_FOOTER_HEIGHT = 44 const SHELL_FOOTER_HEIGHT = 44
@@ -22,6 +23,8 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
export const PostThreadScreen = withAuthRequired( export const PostThreadScreen = withAuthRequired(
observer(function PostThreadScreenImpl({route}: Props) { observer(function PostThreadScreenImpl({route}: Props) {
const store = useStores() const store = useStores()
const minimalShellMode = useMinimalShellMode()
const setMinimalShellMode = useSetMinimalShellMode()
const safeAreaInsets = useSafeAreaInsets() const safeAreaInsets = useSafeAreaInsets()
const {name, rkey} = route.params const {name, rkey} = route.params
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey) const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -33,7 +36,7 @@ export const PostThreadScreen = withAuthRequired(
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
const threadCleanup = view.registerListeners() const threadCleanup = view.registerListeners()
InteractionManager.runAfterInteractions(() => { InteractionManager.runAfterInteractions(() => {
@@ -47,7 +50,7 @@ export const PostThreadScreen = withAuthRequired(
return () => { return () => {
threadCleanup() threadCleanup()
} }
}, [store, view]), }, [view, setMinimalShellMode]),
) )
const onPressReply = React.useCallback(() => { const onPressReply = React.useCallback(() => {
@@ -80,7 +83,7 @@ export const PostThreadScreen = withAuthRequired(
treeView={!!store.preferences.thread.lab_treeViewEnabled} treeView={!!store.preferences.thread.lab_treeViewEnabled}
/> />
</View> </View>
{isMobile && !store.shell.minimalShellMode && ( {isMobile && !minimalShellMode && (
<View <View
style={[ style={[
styles.prompt, styles.prompt,
src/view/screens/PrivacyPolicy.tsx
+4 -4
View File
@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
import {TextLink} from 'view/com/util/Link' import {TextLink} from 'view/com/util/Link'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index'
import {ScrollView} from 'view/com/util/Views' import {ScrollView} from 'view/com/util/Views'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PrivacyPolicy'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'PrivacyPolicy'>
export const PrivacyPolicyScreen = (_props: Props) => { export const PrivacyPolicyScreen = (_props: Props) => {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/Profile.tsx
+4 -2
View File
@@ -32,11 +32,13 @@ import {combinedDisplayName} from 'lib/strings/display-names'
import {logger} from '#/logger' import {logger} from '#/logger'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
export const ProfileScreen = withAuthRequired( export const ProfileScreen = withAuthRequired(
observer(function ProfileScreenImpl({route}: Props) { observer(function ProfileScreenImpl({route}: Props) {
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const {screen, track} = useAnalytics() const {screen, track} = useAnalytics()
const {_} = useLingui() const {_} = useLingui()
const viewSelectorRef = React.useRef<ViewSelectorHandle>(null) const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)
@@ -72,7 +74,7 @@ export const ProfileScreen = withAuthRequired(
React.useCallback(() => { React.useCallback(() => {
const softResetSub = store.onScreenSoftReset(onSoftReset) const softResetSub = store.onScreenSoftReset(onSoftReset)
let aborted = false let aborted = false
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
const feedCleanup = uiState.feed.registerListeners() const feedCleanup = uiState.feed.registerListeners()
if (!hasSetup) { if (!hasSetup) {
uiState.setup().then(() => { uiState.setup().then(() => {
@@ -87,7 +89,7 @@ export const ProfileScreen = withAuthRequired(
feedCleanup() feedCleanup()
softResetSub.remove() softResetSub.remove()
} }
}, [store, onSoftReset, uiState, hasSetup]), }, [store, onSoftReset, uiState, hasSetup, setMinimalShellMode]),
) )
// events // events
src/view/screens/ProfileFeed.tsx
+90 -76
View File
@@ -1,7 +1,14 @@
import React, {useMemo, useCallback} from 'react' import React, {useMemo, useCallback} from 'react'
import {FlatList, StyleSheet, View, ActivityIndicator} from 'react-native' import {
FlatList,
NativeScrollEvent,
StyleSheet,
View,
ActivityIndicator,
} from 'react-native'
import {NativeStackScreenProps} from '@react-navigation/native-stack' import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {useNavigation} from '@react-navigation/native' import {useNavigation} from '@react-navigation/native'
import {useAnimatedScrollHandler} from 'react-native-reanimated'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {HeartIcon, HeartIconSolid} from 'lib/icons' import {HeartIcon, HeartIconSolid} from 'lib/icons'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -26,7 +33,6 @@ import {EmptyState} from 'view/com/util/EmptyState'
import * as Toast from 'view/com/util/Toast' import * as Toast from 'view/com/util/Toast'
import {useSetTitle} from 'lib/hooks/useSetTitle' import {useSetTitle} from 'lib/hooks/useSetTitle'
import {useCustomFeed} from 'lib/hooks/useCustomFeed' import {useCustomFeed} from 'lib/hooks/useCustomFeed'
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {shareUrl} from 'lib/sharing' import {shareUrl} from 'lib/sharing'
import {toShareUrl} from 'lib/strings/url-helpers' import {toShareUrl} from 'lib/strings/url-helpers'
import {Haptics} from 'lib/haptics' import {Haptics} from 'lib/haptics'
@@ -337,11 +343,11 @@ export const ProfileFeedScreenInner = observer(
<View style={s.hContentRegion}> <View style={s.hContentRegion}>
<PagerWithHeader <PagerWithHeader
items={SECTION_TITLES} items={SECTION_TITLES}
isHeaderReady={feedInfo?.hasLoaded ?? false}
renderHeader={renderHeader} renderHeader={renderHeader}
onCurrentPageSelected={onCurrentPageSelected}> onCurrentPageSelected={onCurrentPageSelected}>
{({onScroll, headerHeight, isScrolledDown}) => ( {({onScroll, headerHeight, isScrolledDown}) => (
<FeedSection <FeedSection
key="1"
ref={feedSectionRef} ref={feedSectionRef}
feed={feed} feed={feed}
onScroll={onScroll} onScroll={onScroll}
@@ -350,18 +356,14 @@ export const ProfileFeedScreenInner = observer(
/> />
)} )}
{({onScroll, headerHeight}) => ( {({onScroll, headerHeight}) => (
<ScrollView <AboutSection
key="2" feedOwnerDid={feedOwnerDid}
feedRkey={rkey}
feedInfo={feedInfo}
headerHeight={headerHeight}
onToggleLiked={onToggleLiked}
onScroll={onScroll} onScroll={onScroll}
scrollEventThrottle={1} />
contentContainerStyle={{paddingTop: headerHeight}}>
<AboutSection
feedOwnerDid={feedOwnerDid}
feedRkey={rkey}
feedInfo={feedInfo}
onToggleLiked={onToggleLiked}
/>
</ScrollView>
)} )}
</PagerWithHeader> </PagerWithHeader>
<FAB <FAB
@@ -385,7 +387,7 @@ export const ProfileFeedScreenInner = observer(
interface FeedSectionProps { interface FeedSectionProps {
feed: PostsFeedModel feed: PostsFeedModel
onScroll: OnScrollCb onScroll: (e: NativeScrollEvent) => void
headerHeight: number headerHeight: number
isScrolledDown: boolean isScrolledDown: boolean
} }
@@ -410,12 +412,13 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
return <EmptyState icon="feed" message="This feed is empty!" /> return <EmptyState icon="feed" message="This feed is empty!" />
}, []) }, [])
const scrollHandler = useAnimatedScrollHandler({onScroll})
return ( return (
<View> <View>
<Feed <Feed
feed={feed} feed={feed}
scrollElRef={scrollElRef} scrollElRef={scrollElRef}
onScroll={onScroll} onScroll={scrollHandler}
scrollEventThrottle={5} scrollEventThrottle={5}
renderEmptyState={renderPostsEmpty} renderEmptyState={renderPostsEmpty}
headerOffset={headerHeight} headerOffset={headerHeight}
@@ -436,83 +439,94 @@ const AboutSection = observer(function AboutPageImpl({
feedOwnerDid, feedOwnerDid,
feedRkey, feedRkey,
feedInfo, feedInfo,
headerHeight,
onToggleLiked, onToggleLiked,
onScroll,
}: { }: {
feedOwnerDid: string feedOwnerDid: string
feedRkey: string feedRkey: string
feedInfo: FeedSourceModel | undefined feedInfo: FeedSourceModel | undefined
headerHeight: number
onToggleLiked: () => void onToggleLiked: () => void
onScroll: (e: NativeScrollEvent) => void
}) { }) {
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const scrollHandler = useAnimatedScrollHandler({onScroll})
if (!feedInfo) { if (!feedInfo) {
return <View /> return <View />
} }
return ( return (
<View <ScrollView
style={[ scrollEventThrottle={1}
{ contentContainerStyle={{paddingTop: headerHeight}}
borderTopWidth: 1, onScroll={scrollHandler}>
paddingVertical: 20, <View
paddingHorizontal: 20, style={[
gap: 12, {
}, borderTopWidth: 1,
pal.border, paddingVertical: 20,
]}> paddingHorizontal: 20,
{feedInfo.descriptionRT ? ( gap: 12,
<RichText },
testID="listDescription" pal.border,
type="lg" ]}>
style={pal.text} {feedInfo.descriptionRT ? (
richText={feedInfo.descriptionRT} <RichText
/> testID="listDescription"
) : ( type="lg"
<Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}> style={pal.text}
<Trans>No description</Trans> richText={feedInfo.descriptionRT}
</Text>
)}
<View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
<Button
type="default"
testID="toggleLikeBtn"
accessibilityLabel={_(msg`Like this feed`)}
accessibilityHint=""
onPress={onToggleLiked}
style={{paddingHorizontal: 10}}>
{feedInfo?.isLiked ? (
<HeartIconSolid size={19} style={styles.liked} />
) : (
<HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
)}
</Button>
{typeof feedInfo.likeCount === 'number' && (
<TextLink
href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')}
text={`Liked by ${feedInfo.likeCount} ${pluralize(
feedInfo.likeCount,
'user',
)}`}
style={[pal.textLight, s.semiBold]}
/> />
)}
</View>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
Created by{' '}
{feedInfo.isOwner ? (
'you'
) : ( ) : (
<TextLink <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
text={sanitizeHandle(feedInfo.creatorHandle, '@')} No description
href={makeProfileLink({ </Text>
did: feedInfo.creatorDid,
handle: feedInfo.creatorHandle,
})}
style={pal.textLight}
/>
)} )}
</Text> <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
</View> <Button
type="default"
testID="toggleLikeBtn"
accessibilityLabel="Like this feed"
accessibilityHint=""
onPress={onToggleLiked}
style={{paddingHorizontal: 10}}>
{feedInfo?.isLiked ? (
<HeartIconSolid size={19} style={styles.liked} />
) : (
<HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
)}
</Button>
{typeof feedInfo.likeCount === 'number' && (
<TextLink
href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')}
text={`Liked by ${feedInfo.likeCount} ${pluralize(
feedInfo.likeCount,
'user',
)}`}
style={[pal.textLight, s.semiBold]}
/>
)}
</View>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
Created by{' '}
{feedInfo.isOwner ? (
'you'
) : (
<TextLink
text={sanitizeHandle(feedInfo.creatorHandle, '@')}
href={makeProfileLink({
did: feedInfo.creatorDid,
handle: feedInfo.creatorHandle,
})}
style={pal.textLight}
/>
)}
</Text>
</View>
</ScrollView>
) )
}) })
src/view/screens/ProfileFeedLikedBy.tsx
+4 -4
View File
@@ -5,19 +5,19 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
import {useStores} from 'state/index'
import {makeRecordUri} from 'lib/strings/url-helpers' import {makeRecordUri} from 'lib/strings/url-helpers'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeedLikedBy'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeedLikedBy'>
export const ProfileFeedLikedByScreen = withAuthRequired(({route}: Props) => { export const ProfileFeedLikedByScreen = withAuthRequired(({route}: Props) => {
const store = useStores() const setMinimalShellMode = useSetMinimalShellMode()
const {name, rkey} = route.params const {name, rkey} = route.params
const uri = makeRecordUri(name, 'app.bsky.feed.generator', rkey) const uri = makeRecordUri(name, 'app.bsky.feed.generator', rkey)
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/ProfileFollowers.tsx
+4 -4
View File
@@ -5,17 +5,17 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers' import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
import {useStores} from 'state/index' import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
export const ProfileFollowersScreen = withAuthRequired(({route}: Props) => { export const ProfileFollowersScreen = withAuthRequired(({route}: Props) => {
const store = useStores()
const {name} = route.params const {name} = route.params
const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/ProfileFollows.tsx
+4 -4
View File
@@ -5,17 +5,17 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows' import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
import {useStores} from 'state/index' import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
export const ProfileFollowsScreen = withAuthRequired(({route}: Props) => { export const ProfileFollowsScreen = withAuthRequired(({route}: Props) => {
const store = useStores()
const {name} = route.params const {name} = route.params
const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/ProfileList.tsx
+15 -11
View File
@@ -2,6 +2,7 @@ import React, {useCallback, useMemo} from 'react'
import { import {
ActivityIndicator, ActivityIndicator,
FlatList, FlatList,
NativeScrollEvent,
Pressable, Pressable,
StyleSheet, StyleSheet,
View, View,
@@ -10,6 +11,7 @@ import {useFocusEffect} from '@react-navigation/native'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {useNavigation} from '@react-navigation/native' import {useNavigation} from '@react-navigation/native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useAnimatedScrollHandler} from 'react-native-reanimated'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {RichText as RichTextAPI} from '@atproto/api' import {RichText as RichTextAPI} from '@atproto/api'
import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@@ -33,7 +35,6 @@ import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useSetTitle} from 'lib/hooks/useSetTitle' import {useSetTitle} from 'lib/hooks/useSetTitle'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {NavigationProp} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types'
import {toShareUrl} from 'lib/strings/url-helpers' import {toShareUrl} from 'lib/strings/url-helpers'
import {shareUrl} from 'lib/sharing' import {shareUrl} from 'lib/sharing'
@@ -46,6 +47,7 @@ import {ListItems} from 'view/com/lists/ListItems'
import {logger} from '#/logger' import {logger} from '#/logger'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSetMinimalShellMode} from '#/state/shell'
const SECTION_TITLES_CURATE = ['Posts', 'About'] const SECTION_TITLES_CURATE = ['Posts', 'About']
const SECTION_TITLES_MOD = ['About'] const SECTION_TITLES_MOD = ['About']
@@ -107,6 +109,7 @@ export const ProfileListScreenInner = observer(
}: Props & {listOwnerDid: string}) { }: Props & {listOwnerDid: string}) {
const store = useStores() const store = useStores()
const {_} = useLingui() const {_} = useLingui()
const setMinimalShellMode = useSetMinimalShellMode()
const {rkey} = route.params const {rkey} = route.params
const feedSectionRef = React.useRef<SectionRef>(null) const feedSectionRef = React.useRef<SectionRef>(null)
const aboutSectionRef = React.useRef<SectionRef>(null) const aboutSectionRef = React.useRef<SectionRef>(null)
@@ -126,13 +129,13 @@ export const ProfileListScreenInner = observer(
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
list.loadMore(true).then(() => { list.loadMore(true).then(() => {
if (list.isCuratelist) { if (list.isCuratelist) {
feed.setup() feed.setup()
} }
}) })
}, [store, list, feed]), }, [setMinimalShellMode, list, feed]),
) )
const onPressAddUser = useCallback(() => { const onPressAddUser = useCallback(() => {
@@ -168,11 +171,11 @@ export const ProfileListScreenInner = observer(
<View style={s.hContentRegion}> <View style={s.hContentRegion}>
<PagerWithHeader <PagerWithHeader
items={SECTION_TITLES_CURATE} items={SECTION_TITLES_CURATE}
isHeaderReady={list.hasLoaded}
renderHeader={renderHeader} renderHeader={renderHeader}
onCurrentPageSelected={onCurrentPageSelected}> onCurrentPageSelected={onCurrentPageSelected}>
{({onScroll, headerHeight, isScrolledDown}) => ( {({onScroll, headerHeight, isScrolledDown}) => (
<FeedSection <FeedSection
key="1"
ref={feedSectionRef} ref={feedSectionRef}
feed={feed} feed={feed}
onScroll={onScroll} onScroll={onScroll}
@@ -182,7 +185,6 @@ export const ProfileListScreenInner = observer(
)} )}
{({onScroll, headerHeight, isScrolledDown}) => ( {({onScroll, headerHeight, isScrolledDown}) => (
<AboutSection <AboutSection
key="2"
ref={aboutSectionRef} ref={aboutSectionRef}
list={list} list={list}
descriptionRT={list.descriptionRT} descriptionRT={list.descriptionRT}
@@ -218,10 +220,10 @@ export const ProfileListScreenInner = observer(
<View style={s.hContentRegion}> <View style={s.hContentRegion}>
<PagerWithHeader <PagerWithHeader
items={SECTION_TITLES_MOD} items={SECTION_TITLES_MOD}
isHeaderReady={list.hasLoaded}
renderHeader={renderHeader}> renderHeader={renderHeader}>
{({onScroll, headerHeight, isScrolledDown}) => ( {({onScroll, headerHeight, isScrolledDown}) => (
<AboutSection <AboutSection
key="2"
list={list} list={list}
descriptionRT={list.descriptionRT} descriptionRT={list.descriptionRT}
creator={list.data ? list.data.creator : undefined} creator={list.data ? list.data.creator : undefined}
@@ -254,7 +256,7 @@ export const ProfileListScreenInner = observer(
return ( return (
<CenteredView sideBorders style={s.hContentRegion}> <CenteredView sideBorders style={s.hContentRegion}>
<Header rkey={rkey} list={list} /> <Header rkey={rkey} list={list} />
{list.error && <ErrorScreen error={list.error} />} {list.error ? <ErrorScreen error={list.error} /> : null}
</CenteredView> </CenteredView>
) )
}, },
@@ -551,7 +553,7 @@ const Header = observer(function HeaderImpl({
interface FeedSectionProps { interface FeedSectionProps {
feed: PostsFeedModel feed: PostsFeedModel
onScroll: OnScrollCb onScroll: (e: NativeScrollEvent) => void
headerHeight: number headerHeight: number
isScrolledDown: boolean isScrolledDown: boolean
} }
@@ -575,13 +577,14 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
return <EmptyState icon="feed" message="This feed is empty!" /> return <EmptyState icon="feed" message="This feed is empty!" />
}, []) }, [])
const scrollHandler = useAnimatedScrollHandler({onScroll})
return ( return (
<View> <View>
<Feed <Feed
testID="listFeed" testID="listFeed"
feed={feed} feed={feed}
scrollElRef={scrollElRef} scrollElRef={scrollElRef}
onScroll={onScroll} onScroll={scrollHandler}
scrollEventThrottle={1} scrollEventThrottle={1}
renderEmptyState={renderPostsEmpty} renderEmptyState={renderPostsEmpty}
headerOffset={headerHeight} headerOffset={headerHeight}
@@ -605,7 +608,7 @@ interface AboutSectionProps {
isCurateList: boolean | undefined isCurateList: boolean | undefined
isOwner: boolean | undefined isOwner: boolean | undefined
onPressAddUser: () => void onPressAddUser: () => void
onScroll: OnScrollCb onScroll: (e: NativeScrollEvent) => void
headerHeight: number headerHeight: number
isScrolledDown: boolean isScrolledDown: boolean
} }
@@ -736,6 +739,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
) )
}, []) }, [])
const scrollHandler = useAnimatedScrollHandler({onScroll})
return ( return (
<View> <View>
<ListItems <ListItems
@@ -745,7 +749,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
renderEmptyState={renderEmptyState} renderEmptyState={renderEmptyState}
list={list} list={list}
headerOffset={headerHeight} headerOffset={headerHeight}
onScroll={onScroll} onScroll={scrollHandler}
scrollEventThrottle={1} scrollEventThrottle={1}
/> />
{isScrolledDown && ( {isScrolledDown && (
src/view/screens/SavedFeeds.tsx
+4 -2
View File
@@ -27,6 +27,7 @@ import * as Toast from 'view/com/util/Toast'
import {Haptics} from 'lib/haptics' import {Haptics} from 'lib/haptics'
import {TextLink} from 'view/com/util/Link' import {TextLink} from 'view/com/util/Link'
import {logger} from '#/logger' import {logger} from '#/logger'
import {useSetMinimalShellMode} from '#/state/shell'
const HITSLOP_TOP = { const HITSLOP_TOP = {
top: 20, top: 20,
@@ -48,6 +49,7 @@ export const SavedFeeds = withAuthRequired(
const store = useStores() const store = useStores()
const {isMobile, isTabletOrDesktop} = useWebMediaQueries() const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
const {screen} = useAnalytics() const {screen} = useAnalytics()
const setMinimalShellMode = useSetMinimalShellMode()
const savedFeeds = useMemo(() => { const savedFeeds = useMemo(() => {
const model = new SavedFeedsModel(store) const model = new SavedFeedsModel(store)
@@ -57,9 +59,9 @@ export const SavedFeeds = withAuthRequired(
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
screen('SavedFeeds') screen('SavedFeeds')
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
savedFeeds.refresh() savedFeeds.refresh()
}, [screen, store, savedFeeds]), }, [screen, setMinimalShellMode, savedFeeds]),
) )
return ( return (
src/view/screens/SearchMobile.tsx
+17 -7
View File
@@ -27,15 +27,18 @@ import {ProfileCard} from 'view/com/profile/ProfileCard'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {isAndroid, isIOS} from 'platform/detection' import {isAndroid, isIOS} from 'platform/detection'
import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'> type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
export const SearchScreen = withAuthRequired( export const SearchScreen = withAuthRequired(
observer<Props>(function SearchScreenImpl({}: Props) { observer<Props>(function SearchScreenImpl({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode()
const setIsDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
const scrollViewRef = React.useRef<ScrollView>(null) const scrollViewRef = React.useRef<ScrollView>(null)
const flatListRef = React.useRef<FlatList>(null) const flatListRef = React.useRef<FlatList>(null)
const [onMainScroll] = useOnMainScroll(store) const [onMainScroll] = useOnMainScroll()
const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false) const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
const [query, setQuery] = React.useState<string>('') const [query, setQuery] = React.useState<string>('')
const autocompleteView = React.useMemo<UserAutocompleteModel>( const autocompleteView = React.useMemo<UserAutocompleteModel>(
@@ -75,8 +78,8 @@ export const SearchScreen = withAuthRequired(
setQuery('') setQuery('')
autocompleteView.setActive(false) autocompleteView.setActive(false)
setSearchUIModel(undefined) setSearchUIModel(undefined)
store.shell.setIsDrawerSwipeDisabled(false) setIsDrawerSwipeDisabled(false)
}, [setQuery, autocompleteView, store]) }, [setQuery, autocompleteView, setIsDrawerSwipeDisabled])
const onSubmitQuery = React.useCallback(() => { const onSubmitQuery = React.useCallback(() => {
if (query.length === 0) { if (query.length === 0) {
@@ -86,8 +89,8 @@ export const SearchScreen = withAuthRequired(
const model = new SearchUIModel(store) const model = new SearchUIModel(store)
model.fetch(query) model.fetch(query)
setSearchUIModel(model) setSearchUIModel(model)
store.shell.setIsDrawerSwipeDisabled(true) setIsDrawerSwipeDisabled(true)
}, [query, setSearchUIModel, store]) }, [query, setSearchUIModel, store, setIsDrawerSwipeDisabled])
const onSoftReset = React.useCallback(() => { const onSoftReset = React.useCallback(() => {
scrollViewRef.current?.scrollTo({x: 0, y: 0}) scrollViewRef.current?.scrollTo({x: 0, y: 0})
@@ -102,7 +105,7 @@ export const SearchScreen = withAuthRequired(
softResetSub.remove() softResetSub.remove()
} }
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
autocompleteView.setup() autocompleteView.setup()
if (!foafs.hasData) { if (!foafs.hasData) {
foafs.fetch() foafs.fetch()
@@ -112,7 +115,14 @@ export const SearchScreen = withAuthRequired(
} }
return cleanup return cleanup
}, [store, autocompleteView, foafs, suggestedActors, onSoftReset]), }, [
store,
autocompleteView,
foafs,
suggestedActors,
onSoftReset,
setMinimalShellMode,
]),
) )
const onPress = useCallback(() => { const onPress = useCallback(() => {
src/view/screens/Settings.tsx
+16 -8
View File
@@ -46,6 +46,11 @@ import Clipboard from '@react-native-clipboard/clipboard'
import {makeProfileLink} from 'lib/routes/links' import {makeProfileLink} from 'lib/routes/links'
import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn'
import {logger} from '#/logger' import {logger} from '#/logger'
import {
useSetMinimalShellMode,
useColorMode,
useSetColorMode,
} from '#/state/shell'
// TEMPORARY (APP-700) // TEMPORARY (APP-700)
// remove after backend testing finishes // remove after backend testing finishes
@@ -58,9 +63,12 @@ import {useLingui} from '@lingui/react'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
export const SettingsScreen = withAuthRequired( export const SettingsScreen = withAuthRequired(
observer(function Settings({}: Props) { observer(function Settings({}: Props) {
const colorMode = useColorMode()
const setColorMode = useSetColorMode()
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const {_} = useLingui() const {_} = useLingui()
const setMinimalShellMode = useSetMinimalShellMode()
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const {screen, track} = useAnalytics() const {screen, track} = useAnalytics()
@@ -91,8 +99,8 @@ export const SettingsScreen = withAuthRequired(
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
screen('Settings') screen('Settings')
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [screen, store]), }, [screen, setMinimalShellMode]),
) )
const onPressAddAccount = React.useCallback(() => { const onPressAddAccount = React.useCallback(() => {
@@ -380,23 +388,23 @@ export const SettingsScreen = withAuthRequired(
<View> <View>
<View style={[styles.linkCard, pal.view, styles.selectableBtns]}> <View style={[styles.linkCard, pal.view, styles.selectableBtns]}>
<SelectableBtn <SelectableBtn
selected={store.shell.colorMode === 'system'} selected={colorMode === 'system'}
label="System" label="System"
left left
onSelect={() => store.shell.setColorMode('system')} onSelect={() => setColorMode('system')}
accessibilityHint="Set color theme to system setting" accessibilityHint="Set color theme to system setting"
/> />
<SelectableBtn <SelectableBtn
selected={store.shell.colorMode === 'light'} selected={colorMode === 'light'}
label="Light" label="Light"
onSelect={() => store.shell.setColorMode('light')} onSelect={() => setColorMode('light')}
accessibilityHint="Set color theme to light" accessibilityHint="Set color theme to light"
/> />
<SelectableBtn <SelectableBtn
selected={store.shell.colorMode === 'dark'} selected={colorMode === 'dark'}
label="Dark" label="Dark"
right right
onSelect={() => store.shell.setColorMode('dark')} onSelect={() => setColorMode('dark')}
accessibilityHint="Set color theme to dark" accessibilityHint="Set color theme to dark"
/> />
</View> </View>
src/view/screens/Support.tsx
+4 -4
View File
@@ -3,23 +3,23 @@ import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native' import {useFocusEffect} from '@react-navigation/native'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index'
import {Text} from 'view/com/util/text/Text' import {Text} from 'view/com/util/text/Text'
import {TextLink} from 'view/com/util/Link' import {TextLink} from 'view/com/util/Link'
import {CenteredView} from 'view/com/util/Views' import {CenteredView} from 'view/com/util/Views'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {HELP_DESK_URL} from 'lib/constants' import {HELP_DESK_URL} from 'lib/constants'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'>
export const SupportScreen = (_props: Props) => { export const SupportScreen = (_props: Props) => {
const store = useStores()
const pal = usePalette('default') const pal = usePalette('default')
const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/screens/TermsOfService.tsx
+4 -4
View File
@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
import {TextLink} from 'view/com/util/Link' import {TextLink} from 'view/com/util/Link'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index'
import {ScrollView} from 'view/com/util/Views' import {ScrollView} from 'view/com/util/Views'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useSetMinimalShellMode} from '#/state/shell'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'TermsOfService'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'TermsOfService'>
export const TermsOfServiceScreen = (_props: Props) => { export const TermsOfServiceScreen = (_props: Props) => {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const setMinimalShellMode = useSetMinimalShellMode()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
store.shell.setMinimalShellMode(false) setMinimalShellMode(false)
}, [store]), }, [setMinimalShellMode]),
) )
return ( return (
src/view/shell/Drawer.tsx
+13 -10
View File
@@ -45,12 +45,14 @@ import {isWeb} from 'platform/detection'
import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format' import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSetDrawerOpen} from '#/state/shell'
export const DrawerContent = observer(function DrawerContentImpl() { export const DrawerContent = observer(function DrawerContentImpl() {
const theme = useTheme() const theme = useTheme()
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const {_} = useLingui() const {_} = useLingui()
const setDrawerOpen = useSetDrawerOpen()
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const {track} = useAnalytics() const {track} = useAnalytics()
const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
@@ -65,7 +67,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
(tab: string) => { (tab: string) => {
track('Menu:ItemClicked', {url: tab}) track('Menu:ItemClicked', {url: tab})
const state = navigation.getState() const state = navigation.getState()
store.shell.closeDrawer() setDrawerOpen(false)
if (isWeb) { if (isWeb) {
// hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh // hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh
if (tab === 'MyProfile') { if (tab === 'MyProfile') {
@@ -86,7 +88,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
} }
} }
}, },
[store, track, navigation], [store, track, navigation, setDrawerOpen],
) )
const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab]) const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
@@ -113,20 +115,20 @@ export const DrawerContent = observer(function DrawerContentImpl() {
const onPressLists = React.useCallback(() => { const onPressLists = React.useCallback(() => {
track('Menu:ItemClicked', {url: 'Lists'}) track('Menu:ItemClicked', {url: 'Lists'})
navigation.navigate('Lists') navigation.navigate('Lists')
store.shell.closeDrawer() setDrawerOpen(false)
}, [navigation, track, store.shell]) }, [navigation, track, setDrawerOpen])
const onPressModeration = React.useCallback(() => { const onPressModeration = React.useCallback(() => {
track('Menu:ItemClicked', {url: 'Moderation'}) track('Menu:ItemClicked', {url: 'Moderation'})
navigation.navigate('Moderation') navigation.navigate('Moderation')
store.shell.closeDrawer() setDrawerOpen(false)
}, [navigation, track, store.shell]) }, [navigation, track, setDrawerOpen])
const onPressSettings = React.useCallback(() => { const onPressSettings = React.useCallback(() => {
track('Menu:ItemClicked', {url: 'Settings'}) track('Menu:ItemClicked', {url: 'Settings'})
navigation.navigate('Settings') navigation.navigate('Settings')
store.shell.closeDrawer() setDrawerOpen(false)
}, [navigation, track, store.shell]) }, [navigation, track, setDrawerOpen])
const onPressFeedback = React.useCallback(() => { const onPressFeedback = React.useCallback(() => {
track('Menu:FeedbackClicked') track('Menu:FeedbackClicked')
@@ -440,13 +442,14 @@ const InviteCodes = observer(function InviteCodesImpl({
}) { }) {
const {track} = useAnalytics() const {track} = useAnalytics()
const store = useStores() const store = useStores()
const setDrawerOpen = useSetDrawerOpen()
const pal = usePalette('default') const pal = usePalette('default')
const {invitesAvailable} = store.me const {invitesAvailable} = store.me
const onPress = React.useCallback(() => { const onPress = React.useCallback(() => {
track('Menu:ItemClicked', {url: '#invite-codes'}) track('Menu:ItemClicked', {url: '#invite-codes'})
store.shell.closeDrawer() setDrawerOpen(false)
store.shell.openModal({name: 'invite-codes'}) store.shell.openModal({name: 'invite-codes'})
}, [store, track]) }, [store, track, setDrawerOpen])
return ( return (
<TouchableOpacity <TouchableOpacity
testID="menuItemInviteCodes" testID="menuItemInviteCodes"
src/view/shell/bottom-bar/BottomBar.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ export const BottomBar = observer(function BottomBarImpl({
const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
useNavigationTabState() useNavigationTabState()
const {footerMinimalShellTransform} = useMinimalShellMode() const {minimalShellMode, footerMinimalShellTransform} = useMinimalShellMode()
const {notifications} = store.me const {notifications} = store.me
const onPressTab = React.useCallback( const onPressTab = React.useCallback(
@@ -86,7 +86,7 @@ export const BottomBar = observer(function BottomBarImpl({
pal.border, pal.border,
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)}, {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
footerMinimalShellTransform, footerMinimalShellTransform,
store.shell.minimalShellMode && styles.disabled, minimalShellMode && styles.disabled,
]}> ]}>
<Btn <Btn
testID="bottomBarHomeBtn" testID="bottomBarHomeBtn"
src/view/shell/index.tsx
+26 -13
View File
@@ -6,6 +6,7 @@ import {
StyleSheet, StyleSheet,
useWindowDimensions, useWindowDimensions,
View, View,
BackHandler,
} from 'react-native' } from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {Drawer} from 'react-native-drawer-layout' import {Drawer} from 'react-native-drawer-layout'
@@ -18,7 +19,6 @@ import {DrawerContent} from './Drawer'
import {Composer} from './Composer' import {Composer} from './Composer'
import {useTheme} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import * as backHandler from 'lib/routes/back-handler'
import {RoutesContainer, TabsNavigator} from '../../Navigation' import {RoutesContainer, TabsNavigator} from '../../Navigation'
import {isStateAtTabRoot} from 'lib/routes/helpers' import {isStateAtTabRoot} from 'lib/routes/helpers'
import { import {
@@ -26,9 +26,18 @@ import {
initialWindowMetrics, initialWindowMetrics,
} from 'react-native-safe-area-context' } from 'react-native-safe-area-context'
import {useOTAUpdate} from 'lib/hooks/useOTAUpdate' import {useOTAUpdate} from 'lib/hooks/useOTAUpdate'
import {
useIsDrawerOpen,
useSetDrawerOpen,
useIsDrawerSwipeDisabled,
} from '#/state/shell'
import {isAndroid} from 'platform/detection'
const ShellInner = observer(function ShellInnerImpl() { const ShellInner = observer(function ShellInnerImpl() {
const store = useStores() const store = useStores()
const isDrawerOpen = useIsDrawerOpen()
const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
const setIsDrawerOpen = useSetDrawerOpen()
useOTAUpdate() // this hook polls for OTA updates every few seconds useOTAUpdate() // this hook polls for OTA updates every few seconds
const winDim = useWindowDimensions() const winDim = useWindowDimensions()
const safeAreaInsets = useSafeAreaInsets() const safeAreaInsets = useSafeAreaInsets()
@@ -38,20 +47,26 @@ const ShellInner = observer(function ShellInnerImpl() {
) )
const renderDrawerContent = React.useCallback(() => <DrawerContent />, []) const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
const onOpenDrawer = React.useCallback( const onOpenDrawer = React.useCallback(
() => store.shell.openDrawer(), () => setIsDrawerOpen(true),
[store], [setIsDrawerOpen],
) )
const onCloseDrawer = React.useCallback( const onCloseDrawer = React.useCallback(
() => store.shell.closeDrawer(), () => setIsDrawerOpen(false),
[store], [setIsDrawerOpen],
) )
const canGoBack = useNavigationState(state => !isStateAtTabRoot(state)) const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
React.useEffect(() => { React.useEffect(() => {
const listener = backHandler.init(store) let listener = {remove() {}}
return () => { if (isAndroid) {
listener() listener = BackHandler.addEventListener('hardwareBackPress', () => {
setIsDrawerOpen(false)
return store.shell.closeAnyActiveElement()
})
} }
}, [store]) return () => {
listener.remove()
}
}, [store, setIsDrawerOpen])
return ( return (
<> <>
@@ -59,14 +74,12 @@ const ShellInner = observer(function ShellInnerImpl() {
<ErrorBoundary> <ErrorBoundary>
<Drawer <Drawer
renderDrawerContent={renderDrawerContent} renderDrawerContent={renderDrawerContent}
open={store.shell.isDrawerOpen} open={isDrawerOpen}
onOpen={onOpenDrawer} onOpen={onOpenDrawer}
onClose={onCloseDrawer} onClose={onCloseDrawer}
swipeEdgeWidth={winDim.width / 2} swipeEdgeWidth={winDim.width / 2}
swipeEnabled={ swipeEnabled={
!canGoBack && !canGoBack && store.session.hasSession && !isDrawerSwipeDisabled
store.session.hasSession &&
!store.shell.isDrawerSwipeDisabled
}> }>
<TabsNavigator /> <TabsNavigator />
</Drawer> </Drawer>
src/view/shell/index.web.tsx
+7 -3
View File
@@ -18,18 +18,22 @@ import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types'
import {useAuxClick} from 'lib/hooks/useAuxClick' import {useAuxClick} from 'lib/hooks/useAuxClick'
import {t} from '@lingui/macro' import {t} from '@lingui/macro'
import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
const ShellInner = observer(function ShellInnerImpl() { const ShellInner = observer(function ShellInnerImpl() {
const store = useStores() const store = useStores()
const isDrawerOpen = useIsDrawerOpen()
const setDrawerOpen = useSetDrawerOpen()
const {isDesktop, isMobile} = useWebMediaQueries() const {isDesktop, isMobile} = useWebMediaQueries()
const navigator = useNavigation<NavigationProp>() const navigator = useNavigation<NavigationProp>()
useAuxClick() useAuxClick()
useEffect(() => { useEffect(() => {
navigator.addListener('state', () => { navigator.addListener('state', () => {
setDrawerOpen(false)
store.shell.closeAnyActiveElement() store.shell.closeAnyActiveElement()
}) })
}, [navigator, store.shell]) }, [navigator, store.shell, setDrawerOpen])
const showBottomBar = isMobile && !store.onboarding.isActive const showBottomBar = isMobile && !store.onboarding.isActive
const showSideNavs = const showSideNavs =
@@ -58,9 +62,9 @@ const ShellInner = observer(function ShellInnerImpl() {
{showBottomBar && <BottomBarWeb />} {showBottomBar && <BottomBarWeb />}
<ModalsContainer /> <ModalsContainer />
<Lightbox /> <Lightbox />
{!isDesktop && store.shell.isDrawerOpen && ( {!isDesktop && isDrawerOpen && (
<TouchableOpacity <TouchableOpacity
onPress={() => store.shell.closeDrawer()} onPress={() => setDrawerOpen(false)}
style={styles.drawerMask} style={styles.drawerMask}
accessibilityLabel={t`Close navigation footer`} accessibilityLabel={t`Close navigation footer`}
accessibilityHint="Closes bottom navigation bar"> accessibilityHint="Closes bottom navigation bar">