forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {type JSX, useCallback, useRef} from 'react'
2import {Linking} from 'react-native'
3import * as Notifications from 'expo-notifications'
4import {i18n, type MessageDescriptor} from '@lingui/core'
5import {msg} from '@lingui/macro'
6import {
7 type BottomTabBarProps,
8 createBottomTabNavigator,
9} from '@react-navigation/bottom-tabs'
10import {
11 CommonActions,
12 createNavigationContainerRef,
13 DarkTheme,
14 DefaultTheme,
15 type LinkingOptions,
16 NavigationContainer,
17 StackActions,
18} from '@react-navigation/native'
19
20import {timeout} from '#/lib/async/timeout'
21import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
22import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
23import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
24import {
25 getNotificationPayload,
26 type NotificationPayload,
27 notificationToURL,
28 storePayloadForAccountSwitch,
29} from '#/lib/hooks/useNotificationHandler'
30import {useWebScrollRestoration} from '#/lib/hooks/useWebScrollRestoration'
31import {useCallOnce} from '#/lib/once'
32import {buildStateObject} from '#/lib/routes/helpers'
33import {
34 type AllNavigatorParams,
35 type BottomTabNavigatorParams,
36 type FlatNavigatorParams,
37 type HomeTabNavigatorParams,
38 type MessagesTabNavigatorParams,
39 type MyProfileTabNavigatorParams,
40 type NotificationsTabNavigatorParams,
41 type RouteParams,
42 type SearchTabNavigatorParams,
43 type State,
44} from '#/lib/routes/types'
45import {bskyTitle} from '#/lib/strings/headings'
46import {useUnreadNotifications} from '#/state/queries/notifications/unread'
47import {useSession} from '#/state/session'
48import {useLoggedOutViewControls} from '#/state/shell/logged-out'
49import {
50 shouldRequestEmailConfirmation,
51 snoozeEmailConfirmationPrompt,
52} from '#/state/shell/reminders'
53import {useCloseAllActiveElements} from '#/state/util'
54import {CommunityGuidelinesScreen} from '#/view/screens/CommunityGuidelines'
55import {CopyrightPolicyScreen} from '#/view/screens/CopyrightPolicy'
56import {DebugModScreen} from '#/view/screens/DebugMod'
57import {FeedsScreen} from '#/view/screens/Feeds'
58import {HomeScreen} from '#/view/screens/Home'
59import {ListsScreen} from '#/view/screens/Lists'
60import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts'
61import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists'
62import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts'
63import {NotFoundScreen} from '#/view/screens/NotFound'
64import {NotificationsScreen} from '#/view/screens/Notifications'
65import {PostThreadScreen} from '#/view/screens/PostThread'
66import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
67import {ProfileScreen} from '#/view/screens/Profile'
68import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
69import {StorybookScreen} from '#/view/screens/Storybook'
70import {SupportScreen} from '#/view/screens/Support'
71import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
72import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
73import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
74import {BookmarksScreen} from '#/screens/Bookmarks'
75import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen'
76import {FindContactsFlowScreen} from '#/screens/FindContactsFlowScreen'
77import HashtagScreen from '#/screens/Hashtag'
78import {LogScreen} from '#/screens/Log'
79import {MessagesScreen} from '#/screens/Messages/ChatList'
80import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
81import {MessagesInboxScreen} from '#/screens/Messages/Inbox'
82import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
83import {ModerationScreen} from '#/screens/Moderation'
84import {Screen as ModerationVerificationSettings} from '#/screens/Moderation/VerificationSettings'
85import {Screen as ModerationInteractionSettings} from '#/screens/ModerationInteractionSettings'
86import {NotificationsActivityListScreen} from '#/screens/Notifications/ActivityList'
87import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
88import {PostQuotesScreen} from '#/screens/Post/PostQuotes'
89import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy'
90import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
91import {ProfileFeedScreen} from '#/screens/Profile/ProfileFeed'
92import {ProfileFollowersScreen} from '#/screens/Profile/ProfileFollowers'
93import {ProfileFollowsScreen} from '#/screens/Profile/ProfileFollows'
94import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
95import {ProfileSearchScreen} from '#/screens/Profile/ProfileSearch'
96import {ProfileListScreen} from '#/screens/ProfileList'
97import {SavedFeeds} from '#/screens/SavedFeeds'
98import {SearchScreen} from '#/screens/Search'
99import {AboutSettingsScreen} from '#/screens/Settings/AboutSettings'
100import {AccessibilitySettingsScreen} from '#/screens/Settings/AccessibilitySettings'
101import {AccountSettingsScreen} from '#/screens/Settings/AccountSettings'
102import {ActivityPrivacySettingsScreen} from '#/screens/Settings/ActivityPrivacySettings'
103import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
104import {AppIconSettingsScreen} from '#/screens/Settings/AppIconSettings'
105import {AppPasswordsScreen} from '#/screens/Settings/AppPasswords'
106import {ContentAndMediaSettingsScreen} from '#/screens/Settings/ContentAndMediaSettings'
107import {ExternalMediaPreferencesScreen} from '#/screens/Settings/ExternalMediaPreferences'
108import {FindContactsSettingsScreen} from '#/screens/Settings/FindContactsSettings'
109import {FollowingFeedPreferencesScreen} from '#/screens/Settings/FollowingFeedPreferences'
110import {InterestsSettingsScreen} from '#/screens/Settings/InterestsSettings'
111import {LanguageSettingsScreen} from '#/screens/Settings/LanguageSettings'
112import {LegacyNotificationSettingsScreen} from '#/screens/Settings/LegacyNotificationSettings'
113import {NotificationSettingsScreen} from '#/screens/Settings/NotificationSettings'
114import {ActivityNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/ActivityNotificationSettings'
115import {LikeNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/LikeNotificationSettings'
116import {LikesOnRepostsNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/LikesOnRepostsNotificationSettings'
117import {MentionNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/MentionNotificationSettings'
118import {MiscellaneousNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/MiscellaneousNotificationSettings'
119import {NewFollowerNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/NewFollowerNotificationSettings'
120import {QuoteNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/QuoteNotificationSettings'
121import {ReplyNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/ReplyNotificationSettings'
122import {RepostNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/RepostNotificationSettings'
123import {RepostsOnRepostsNotificationSettingsScreen} from '#/screens/Settings/NotificationSettings/RepostsOnRepostsNotificationSettings'
124import {PrivacyAndSecuritySettingsScreen} from '#/screens/Settings/PrivacyAndSecuritySettings'
125import {SettingsScreen} from '#/screens/Settings/Settings'
126import {ThreadPreferencesScreen} from '#/screens/Settings/ThreadPreferences'
127import {
128 StarterPackScreen,
129 StarterPackScreenShort,
130} from '#/screens/StarterPack/StarterPackScreen'
131import {Wizard} from '#/screens/StarterPack/Wizard'
132import TopicScreen from '#/screens/Topic'
133import {VideoFeed} from '#/screens/VideoFeed'
134import {type Theme, useTheme} from '#/alf'
135import {
136 EmailDialogScreenID,
137 useEmailDialogControl,
138} from '#/components/dialogs/EmailDialog'
139import {useAnalytics} from '#/analytics'
140import {setNavigationMetadata} from '#/analytics/metadata'
141import {IS_NATIVE, IS_WEB} from '#/env'
142import {router} from '#/routes'
143import {Referrer} from '../modules/expo-bluesky-swiss-army'
144
145const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
146
147const HomeTab = createNativeStackNavigatorWithAuth<HomeTabNavigatorParams>()
148const SearchTab = createNativeStackNavigatorWithAuth<SearchTabNavigatorParams>()
149const NotificationsTab =
150 createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
151const MyProfileTab =
152 createNativeStackNavigatorWithAuth<MyProfileTabNavigatorParams>()
153const MessagesTab =
154 createNativeStackNavigatorWithAuth<MessagesTabNavigatorParams>()
155const Flat = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
156const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()
157
158/**
159 * These "common screens" are reused across stacks.
160 */
161function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
162 const title = (page: MessageDescriptor) =>
163 bskyTitle(i18n._(page), unreadCountLabel)
164
165 return (
166 <>
167 <Stack.Screen
168 name="NotFound"
169 getComponent={() => NotFoundScreen}
170 options={{title: title(msg`Not Found`)}}
171 />
172 <Stack.Screen
173 name="Lists"
174 component={ListsScreen}
175 options={{title: title(msg`Lists`), requireAuth: true}}
176 />
177 <Stack.Screen
178 name="Moderation"
179 getComponent={() => ModerationScreen}
180 options={{title: title(msg`Moderation`), requireAuth: true}}
181 />
182 <Stack.Screen
183 name="ModerationModlists"
184 getComponent={() => ModerationModlistsScreen}
185 options={{title: title(msg`Moderation Lists`), requireAuth: true}}
186 />
187 <Stack.Screen
188 name="ModerationMutedAccounts"
189 getComponent={() => ModerationMutedAccounts}
190 options={{title: title(msg`Muted Accounts`), requireAuth: true}}
191 />
192 <Stack.Screen
193 name="ModerationBlockedAccounts"
194 getComponent={() => ModerationBlockedAccounts}
195 options={{title: title(msg`Blocked Accounts`), requireAuth: true}}
196 />
197 <Stack.Screen
198 name="ModerationInteractionSettings"
199 getComponent={() => ModerationInteractionSettings}
200 options={{
201 title: title(msg`Post Interaction Settings`),
202 requireAuth: true,
203 }}
204 />
205 <Stack.Screen
206 name="ModerationVerificationSettings"
207 getComponent={() => ModerationVerificationSettings}
208 options={{
209 title: title(msg`Verification Settings`),
210 requireAuth: true,
211 }}
212 />
213 <Stack.Screen
214 name="Settings"
215 getComponent={() => SettingsScreen}
216 options={{title: title(msg`Settings`), requireAuth: true}}
217 />
218 <Stack.Screen
219 name="LanguageSettings"
220 getComponent={() => LanguageSettingsScreen}
221 options={{title: title(msg`Language Settings`), requireAuth: true}}
222 />
223 <Stack.Screen
224 name="Profile"
225 getComponent={() => ProfileScreen}
226 options={({route}) => ({
227 title: bskyTitle(`@${route.params.name}`, unreadCountLabel),
228 })}
229 />
230 <Stack.Screen
231 name="ProfileFollowers"
232 getComponent={() => ProfileFollowersScreen}
233 options={({route}) => ({
234 title: title(msg`People following @${route.params.name}`),
235 })}
236 />
237 <Stack.Screen
238 name="ProfileFollows"
239 getComponent={() => ProfileFollowsScreen}
240 options={({route}) => ({
241 title: title(msg`People followed by @${route.params.name}`),
242 })}
243 />
244 <Stack.Screen
245 name="ProfileKnownFollowers"
246 getComponent={() => ProfileKnownFollowersScreen}
247 options={({route}) => ({
248 title: title(msg`Followers of @${route.params.name} that you know`),
249 })}
250 />
251 <Stack.Screen
252 name="ProfileList"
253 getComponent={() => ProfileListScreen}
254 options={{title: title(msg`List`), requireAuth: true}}
255 />
256 <Stack.Screen
257 name="ProfileSearch"
258 getComponent={() => ProfileSearchScreen}
259 options={({route}) => ({
260 title: title(msg`Search @${route.params.name}'s posts`),
261 })}
262 />
263 <Stack.Screen
264 name="PostThread"
265 getComponent={() => PostThreadScreen}
266 options={({route}) => ({
267 title: title(msg`Post by @${route.params.name}`),
268 })}
269 />
270 <Stack.Screen
271 name="PostLikedBy"
272 getComponent={() => PostLikedByScreen}
273 options={({route}) => ({
274 title: title(msg`Post by @${route.params.name}`),
275 })}
276 />
277 <Stack.Screen
278 name="PostRepostedBy"
279 getComponent={() => PostRepostedByScreen}
280 options={({route}) => ({
281 title: title(msg`Post by @${route.params.name}`),
282 })}
283 />
284 <Stack.Screen
285 name="PostQuotes"
286 getComponent={() => PostQuotesScreen}
287 options={({route}) => ({
288 title: title(msg`Post by @${route.params.name}`),
289 })}
290 />
291 <Stack.Screen
292 name="ProfileFeed"
293 getComponent={() => ProfileFeedScreen}
294 options={{title: title(msg`Feed`)}}
295 />
296 <Stack.Screen
297 name="ProfileFeedLikedBy"
298 getComponent={() => ProfileFeedLikedByScreen}
299 options={{title: title(msg`Liked by`)}}
300 />
301 <Stack.Screen
302 name="ProfileLabelerLikedBy"
303 getComponent={() => ProfileLabelerLikedByScreen}
304 options={{title: title(msg`Liked by`)}}
305 />
306 <Stack.Screen
307 name="Debug"
308 getComponent={() => StorybookScreen}
309 options={{title: title(msg`Storybook`), requireAuth: true}}
310 />
311 <Stack.Screen
312 name="DebugMod"
313 getComponent={() => DebugModScreen}
314 options={{title: title(msg`Moderation states`), requireAuth: true}}
315 />
316 <Stack.Screen
317 name="SharedPreferencesTester"
318 getComponent={() => SharedPreferencesTesterScreen}
319 options={{title: title(msg`Shared Preferences Tester`)}}
320 />
321 <Stack.Screen
322 name="Log"
323 getComponent={() => LogScreen}
324 options={{title: title(msg`Log`), requireAuth: true}}
325 />
326 <Stack.Screen
327 name="Support"
328 getComponent={() => SupportScreen}
329 options={{title: title(msg`Support`)}}
330 />
331 <Stack.Screen
332 name="PrivacyPolicy"
333 getComponent={() => PrivacyPolicyScreen}
334 options={{title: title(msg`Privacy Policy`)}}
335 />
336 <Stack.Screen
337 name="TermsOfService"
338 getComponent={() => TermsOfServiceScreen}
339 options={{title: title(msg`Terms of Service`)}}
340 />
341 <Stack.Screen
342 name="CommunityGuidelines"
343 getComponent={() => CommunityGuidelinesScreen}
344 options={{title: title(msg`Community Guidelines`)}}
345 />
346 <Stack.Screen
347 name="CopyrightPolicy"
348 getComponent={() => CopyrightPolicyScreen}
349 options={{title: title(msg`Copyright Policy`)}}
350 />
351 <Stack.Screen
352 name="AppPasswords"
353 getComponent={() => AppPasswordsScreen}
354 options={{title: title(msg`App Passwords`), requireAuth: true}}
355 />
356 <Stack.Screen
357 name="SavedFeeds"
358 getComponent={() => SavedFeeds}
359 options={{title: title(msg`Edit My Feeds`), requireAuth: true}}
360 />
361 <Stack.Screen
362 name="PreferencesFollowingFeed"
363 getComponent={() => FollowingFeedPreferencesScreen}
364 options={{
365 title: title(msg`Following Feed Preferences`),
366 requireAuth: true,
367 }}
368 />
369 <Stack.Screen
370 name="PreferencesThreads"
371 getComponent={() => ThreadPreferencesScreen}
372 options={{title: title(msg`Threads Preferences`), requireAuth: true}}
373 />
374 <Stack.Screen
375 name="PreferencesExternalEmbeds"
376 getComponent={() => ExternalMediaPreferencesScreen}
377 options={{
378 title: title(msg`External Media Preferences`),
379 requireAuth: true,
380 }}
381 />
382 <Stack.Screen
383 name="AccessibilitySettings"
384 getComponent={() => AccessibilitySettingsScreen}
385 options={{
386 title: title(msg`Accessibility Settings`),
387 requireAuth: true,
388 }}
389 />
390 <Stack.Screen
391 name="AppearanceSettings"
392 getComponent={() => AppearanceSettingsScreen}
393 options={{
394 title: title(msg`Appearance`),
395 requireAuth: true,
396 }}
397 />
398 <Stack.Screen
399 name="AccountSettings"
400 getComponent={() => AccountSettingsScreen}
401 options={{
402 title: title(msg`Account`),
403 requireAuth: true,
404 }}
405 />
406 <Stack.Screen
407 name="PrivacyAndSecuritySettings"
408 getComponent={() => PrivacyAndSecuritySettingsScreen}
409 options={{
410 title: title(msg`Privacy and Security`),
411 requireAuth: true,
412 }}
413 />
414 <Stack.Screen
415 name="ActivityPrivacySettings"
416 getComponent={() => ActivityPrivacySettingsScreen}
417 options={{
418 title: title(msg`Privacy and Security`),
419 requireAuth: true,
420 }}
421 />
422 <Stack.Screen
423 name="FindContactsSettings"
424 getComponent={() => FindContactsSettingsScreen}
425 options={{
426 title: title(msg`Find Contacts`),
427 requireAuth: true,
428 }}
429 />
430 <Stack.Screen
431 name="NotificationSettings"
432 getComponent={() => NotificationSettingsScreen}
433 options={{title: title(msg`Notification settings`), requireAuth: true}}
434 />
435 <Stack.Screen
436 name="ReplyNotificationSettings"
437 getComponent={() => ReplyNotificationSettingsScreen}
438 options={{
439 title: title(msg`Reply notifications`),
440 requireAuth: true,
441 }}
442 />
443 <Stack.Screen
444 name="MentionNotificationSettings"
445 getComponent={() => MentionNotificationSettingsScreen}
446 options={{
447 title: title(msg`Mention notifications`),
448 requireAuth: true,
449 }}
450 />
451 <Stack.Screen
452 name="QuoteNotificationSettings"
453 getComponent={() => QuoteNotificationSettingsScreen}
454 options={{
455 title: title(msg`Quote notifications`),
456 requireAuth: true,
457 }}
458 />
459 <Stack.Screen
460 name="LikeNotificationSettings"
461 getComponent={() => LikeNotificationSettingsScreen}
462 options={{
463 title: title(msg`Like notifications`),
464 requireAuth: true,
465 }}
466 />
467 <Stack.Screen
468 name="RepostNotificationSettings"
469 getComponent={() => RepostNotificationSettingsScreen}
470 options={{
471 title: title(msg`Repost notifications`),
472 requireAuth: true,
473 }}
474 />
475 <Stack.Screen
476 name="NewFollowerNotificationSettings"
477 getComponent={() => NewFollowerNotificationSettingsScreen}
478 options={{
479 title: title(msg`New follower notifications`),
480 requireAuth: true,
481 }}
482 />
483 <Stack.Screen
484 name="LikesOnRepostsNotificationSettings"
485 getComponent={() => LikesOnRepostsNotificationSettingsScreen}
486 options={{
487 title: title(msg`Likes of your reposts notifications`),
488 requireAuth: true,
489 }}
490 />
491 <Stack.Screen
492 name="RepostsOnRepostsNotificationSettings"
493 getComponent={() => RepostsOnRepostsNotificationSettingsScreen}
494 options={{
495 title: title(msg`Reposts of your reposts notifications`),
496 requireAuth: true,
497 }}
498 />
499 <Stack.Screen
500 name="ActivityNotificationSettings"
501 getComponent={() => ActivityNotificationSettingsScreen}
502 options={{
503 title: title(msg`Activity notifications`),
504 requireAuth: true,
505 }}
506 />
507 <Stack.Screen
508 name="MiscellaneousNotificationSettings"
509 getComponent={() => MiscellaneousNotificationSettingsScreen}
510 options={{
511 title: title(msg`Miscellaneous notifications`),
512 requireAuth: true,
513 }}
514 />
515 <Stack.Screen
516 name="ContentAndMediaSettings"
517 getComponent={() => ContentAndMediaSettingsScreen}
518 options={{
519 title: title(msg`Content and Media`),
520 requireAuth: true,
521 }}
522 />
523 <Stack.Screen
524 name="InterestsSettings"
525 getComponent={() => InterestsSettingsScreen}
526 options={{
527 title: title(msg`Your interests`),
528 requireAuth: true,
529 }}
530 />
531 <Stack.Screen
532 name="AboutSettings"
533 getComponent={() => AboutSettingsScreen}
534 options={{
535 title: title(msg`About`),
536 requireAuth: true,
537 }}
538 />
539 <Stack.Screen
540 name="AppIconSettings"
541 getComponent={() => AppIconSettingsScreen}
542 options={{
543 title: title(msg`App Icon`),
544 requireAuth: true,
545 }}
546 />
547 <Stack.Screen
548 name="Hashtag"
549 getComponent={() => HashtagScreen}
550 options={{title: title(msg`Hashtag`)}}
551 />
552 <Stack.Screen
553 name="Topic"
554 getComponent={() => TopicScreen}
555 options={{title: title(msg`Topic`)}}
556 />
557 <Stack.Screen
558 name="MessagesConversation"
559 getComponent={() => MessagesConversationScreen}
560 options={{title: title(msg`Chat`), requireAuth: true}}
561 />
562 <Stack.Screen
563 name="MessagesSettings"
564 getComponent={() => MessagesSettingsScreen}
565 options={{title: title(msg`Chat settings`), requireAuth: true}}
566 />
567 <Stack.Screen
568 name="MessagesInbox"
569 getComponent={() => MessagesInboxScreen}
570 options={{title: title(msg`Chat request inbox`), requireAuth: true}}
571 />
572 <Stack.Screen
573 name="NotificationsActivityList"
574 getComponent={() => NotificationsActivityListScreen}
575 options={{title: title(msg`Notifications`), requireAuth: true}}
576 />
577 <Stack.Screen
578 name="LegacyNotificationSettings"
579 getComponent={() => LegacyNotificationSettingsScreen}
580 options={{title: title(msg`Notification settings`), requireAuth: true}}
581 />
582 <Stack.Screen
583 name="Feeds"
584 getComponent={() => FeedsScreen}
585 options={{title: title(msg`Feeds`)}}
586 />
587 <Stack.Screen
588 name="StarterPack"
589 getComponent={() => StarterPackScreen}
590 options={{title: title(msg`Starter Pack`)}}
591 />
592 <Stack.Screen
593 name="StarterPackShort"
594 getComponent={() => StarterPackScreenShort}
595 options={{title: title(msg`Starter Pack`)}}
596 />
597 <Stack.Screen
598 name="StarterPackWizard"
599 getComponent={() => Wizard}
600 options={{title: title(msg`Create a starter pack`), requireAuth: true}}
601 />
602 <Stack.Screen
603 name="StarterPackEdit"
604 getComponent={() => Wizard}
605 options={{title: title(msg`Edit your starter pack`), requireAuth: true}}
606 />
607 <Stack.Screen
608 name="VideoFeed"
609 getComponent={() => VideoFeed}
610 options={{
611 title: title(msg`Video Feed`),
612 requireAuth: true,
613 }}
614 />
615 <Stack.Screen
616 name="Bookmarks"
617 getComponent={() => BookmarksScreen}
618 options={{
619 title: title(msg`Saved Posts`),
620 requireAuth: true,
621 }}
622 />
623 <Stack.Screen
624 name="FindContactsFlow"
625 getComponent={() => FindContactsFlowScreen}
626 options={{
627 title: title(msg`Find Contacts`),
628 requireAuth: true,
629 gestureEnabled: false,
630 }}
631 />
632 </>
633 )
634}
635
636/**
637 * The TabsNavigator is used by native mobile to represent the routes
638 * in 3 distinct tab-stacks with a different root screen on each.
639 */
640function TabsNavigator({
641 layout,
642}: {
643 layout: React.ComponentProps<typeof Tab.Navigator>['layout']
644}) {
645 const tabBar = useCallback(
646 (props: JSX.IntrinsicAttributes & BottomTabBarProps) => (
647 <BottomBar {...props} />
648 ),
649 [],
650 )
651
652 return (
653 <Tab.Navigator
654 initialRouteName="HomeTab"
655 backBehavior="initialRoute"
656 screenOptions={{headerShown: false, lazy: true}}
657 tabBar={tabBar}
658 layout={layout}>
659 <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
660 <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} />
661 <Tab.Screen
662 name="MessagesTab"
663 getComponent={() => MessagesTabNavigator}
664 />
665 <Tab.Screen
666 name="NotificationsTab"
667 getComponent={() => NotificationsTabNavigator}
668 />
669 <Tab.Screen
670 name="MyProfileTab"
671 getComponent={() => MyProfileTabNavigator}
672 />
673 </Tab.Navigator>
674 )
675}
676
677function screenOptions(t: Theme) {
678 return {
679 fullScreenGestureEnabled: true,
680 headerShown: false,
681 contentStyle: t.atoms.bg,
682 } as const
683}
684
685function HomeTabNavigator() {
686 const t = useTheme()
687
688 return (
689 <HomeTab.Navigator screenOptions={screenOptions(t)} initialRouteName="Home">
690 <HomeTab.Screen name="Home" getComponent={() => HomeScreen} />
691 <HomeTab.Screen name="Start" getComponent={() => HomeScreen} />
692 {commonScreens(HomeTab as typeof Flat)}
693 </HomeTab.Navigator>
694 )
695}
696
697function SearchTabNavigator() {
698 const t = useTheme()
699 return (
700 <SearchTab.Navigator
701 screenOptions={screenOptions(t)}
702 initialRouteName="Search">
703 <SearchTab.Screen name="Search" getComponent={() => SearchScreen} />
704 {commonScreens(SearchTab as typeof Flat)}
705 </SearchTab.Navigator>
706 )
707}
708
709function NotificationsTabNavigator() {
710 const t = useTheme()
711 return (
712 <NotificationsTab.Navigator
713 screenOptions={screenOptions(t)}
714 initialRouteName="Notifications">
715 <NotificationsTab.Screen
716 name="Notifications"
717 getComponent={() => NotificationsScreen}
718 options={{requireAuth: true}}
719 />
720 {commonScreens(NotificationsTab as typeof Flat)}
721 </NotificationsTab.Navigator>
722 )
723}
724
725function MyProfileTabNavigator() {
726 const t = useTheme()
727 return (
728 <MyProfileTab.Navigator
729 screenOptions={screenOptions(t)}
730 initialRouteName="MyProfile">
731 <MyProfileTab.Screen
732 // MyProfile is not in AllNavigationParams - asserting as Profile at least
733 // gives us typechecking for initialParams -sfn
734 name={'MyProfile' as 'Profile'}
735 getComponent={() => ProfileScreen}
736 initialParams={{name: 'me', hideBackButton: true}}
737 />
738 {commonScreens(MyProfileTab as unknown as typeof Flat)}
739 </MyProfileTab.Navigator>
740 )
741}
742
743function MessagesTabNavigator() {
744 const t = useTheme()
745 return (
746 <MessagesTab.Navigator
747 screenOptions={screenOptions(t)}
748 initialRouteName="Messages">
749 <MessagesTab.Screen
750 name="Messages"
751 getComponent={() => MessagesScreen}
752 options={({route}) => ({
753 requireAuth: true,
754 animationTypeForReplace: route.params?.animation ?? 'push',
755 })}
756 />
757 {commonScreens(MessagesTab as typeof Flat)}
758 </MessagesTab.Navigator>
759 )
760}
761
762/**
763 * The FlatNavigator is used by Web to represent the routes
764 * in a single ("flat") stack.
765 */
766const FlatNavigator = ({
767 layout,
768}: {
769 layout: React.ComponentProps<typeof Flat.Navigator>['layout']
770}) => {
771 const t = useTheme()
772 const numUnread = useUnreadNotifications()
773 const screenListeners = useWebScrollRestoration()
774 const title = (page: MessageDescriptor) => bskyTitle(i18n._(page), numUnread)
775
776 return (
777 <Flat.Navigator
778 layout={layout}
779 screenListeners={screenListeners}
780 screenOptions={screenOptions(t)}>
781 <Flat.Screen
782 name="Home"
783 getComponent={() => HomeScreen}
784 options={{title: title(msg`Home`)}}
785 />
786 <Flat.Screen
787 name="Search"
788 getComponent={() => SearchScreen}
789 options={{title: title(msg`Explore`)}}
790 />
791 <Flat.Screen
792 name="Notifications"
793 getComponent={() => NotificationsScreen}
794 options={{title: title(msg`Notifications`), requireAuth: true}}
795 />
796 <Flat.Screen
797 name="Messages"
798 getComponent={() => MessagesScreen}
799 options={{title: title(msg`Messages`), requireAuth: true}}
800 />
801 <Flat.Screen
802 name="Start"
803 getComponent={() => HomeScreen}
804 options={{title: title(msg`Home`)}}
805 />
806 {commonScreens(Flat, numUnread)}
807 </Flat.Navigator>
808 )
809}
810
811/**
812 * The RoutesContainer should wrap all components which need access
813 * to the navigation context.
814 */
815
816const LINKING = {
817 // TODO figure out what we are going to use
818 // note: `bluesky://` is what is used in app.config.js
819 prefixes: ['bsky://', 'bluesky://', 'https://bsky.app'],
820
821 getPathFromState(state: State) {
822 // find the current node in the navigation tree
823 let node = state.routes[state.index || 0]
824 while (node.state?.routes && typeof node.state?.index === 'number') {
825 node = node.state?.routes[node.state?.index]
826 }
827
828 // build the path
829 const route = router.matchName(node.name)
830 if (typeof route === 'undefined') {
831 return '/' // default to home
832 }
833 return route.build((node.params || {}) as RouteParams)
834 },
835
836 getStateFromPath(path: string) {
837 const [name, params] = router.matchPath(path)
838
839 // Any time we receive a url that starts with `intent/` we want to ignore it here. It will be handled in the
840 // intent handler hook. We should check for the trailing slash, because if there isn't one then it isn't a valid
841 // intent
842 // On web, there is no route state that's created by default, so we should initialize it as the home route. On
843 // native, since the home tab and the home screen are defined as initial routes, we don't need to return a state
844 // since it will be created by react-navigation.
845 if (path.includes('intent/')) {
846 if (IS_NATIVE) return
847 return buildStateObject('Flat', 'Home', params)
848 }
849
850 if (IS_NATIVE) {
851 if (name === 'Search') {
852 return buildStateObject('SearchTab', 'Search', params)
853 }
854 if (name === 'Notifications') {
855 return buildStateObject('NotificationsTab', 'Notifications', params)
856 }
857 if (name === 'Home') {
858 return buildStateObject('HomeTab', 'Home', params)
859 }
860 if (name === 'Messages') {
861 return buildStateObject('MessagesTab', 'Messages', params)
862 }
863 // if the path is something else, like a post, profile, or even settings, we need to initialize the home tab as pre-existing state otherwise the back button will not work
864 return buildStateObject('HomeTab', name, params, [
865 {
866 name: 'Home',
867 params: {},
868 },
869 ])
870 } else {
871 const res = buildStateObject('Flat', name, params)
872 return res
873 }
874 },
875} satisfies LinkingOptions<AllNavigatorParams>
876
877/**
878 * Used to ensure we don't handle the same notification twice
879 */
880let lastHandledNotificationDateDedupe: number | undefined
881
882function RoutesContainer({children}: React.PropsWithChildren<{}>) {
883 const ax = useAnalytics()
884 const notyLogger = ax.logger.useChild(ax.logger.Context.Notifications)
885 const theme = useColorSchemeStyle(DefaultTheme, DarkTheme)
886 const {currentAccount, accounts} = useSession()
887 const {onPressSwitchAccount} = useAccountSwitcher()
888 const {setShowLoggedOut} = useLoggedOutViewControls()
889 const previousScreen = useRef<string | undefined>(undefined)
890 const emailDialogControl = useEmailDialogControl()
891 const closeAllActiveElements = useCloseAllActiveElements()
892
893 /**
894 * Handle navigation to a conversation, or prepares for account switch.
895 *
896 * Non-reactive because we need the latest data from some hooks
897 * after an async call - sfn
898 */
899 const handleChatMessage = useNonReactiveCallback(
900 (payload: Extract<NotificationPayload, {reason: 'chat-message'}>) => {
901 notyLogger.debug(`handleChatMessage`, {payload})
902
903 if (payload.recipientDid !== currentAccount?.did) {
904 // handled in useNotificationHandler after account switch finishes
905 storePayloadForAccountSwitch(payload)
906 closeAllActiveElements()
907
908 const account = accounts.find(a => a.did === payload.recipientDid)
909 if (account) {
910 onPressSwitchAccount(account, 'Notification')
911 } else {
912 setShowLoggedOut(true)
913 }
914 } else {
915 // @ts-expect-error nested navigators aren't typed -sfn
916 navigate('MessagesTab', {
917 screen: 'Messages',
918 params: {
919 pushToConversation: payload.convoId,
920 },
921 })
922 }
923 },
924 )
925
926 async function handlePushNotificationEntry() {
927 if (!IS_NATIVE) return
928
929 // deep links take precedence - on android,
930 // getLastNotificationResponseAsync returns a "notification"
931 // that is actually a deep link. avoid handling it twice -sfn
932 if (await Linking.getInitialURL()) {
933 return
934 }
935
936 /**
937 * The notification that caused the app to open, if applicable
938 */
939 const response = await Notifications.getLastNotificationResponseAsync()
940
941 if (response) {
942 notyLogger.debug(`handlePushNotificationEntry: response`, {response})
943
944 if (response.notification.date === lastHandledNotificationDateDedupe)
945 return
946 lastHandledNotificationDateDedupe = response.notification.date
947
948 const payload = getNotificationPayload(response.notification)
949
950 if (payload) {
951 ax.metric('notifications:openApp', {
952 reason: payload.reason,
953 causedBoot: true,
954 })
955
956 if (payload.reason === 'chat-message') {
957 handleChatMessage(payload)
958 } else {
959 const path = notificationToURL(payload)
960
961 if (path === '/notifications') {
962 resetToTab('NotificationsTab')
963 notyLogger.debug(`handlePushNotificationEntry: default navigate`)
964 } else if (path) {
965 const [screen, params] = router.matchPath(path)
966 // @ts-expect-error nested navigators aren't typed -sfn
967 navigate('HomeTab', {screen, params})
968 notyLogger.debug(`handlePushNotificationEntry: navigate`, {
969 screen,
970 params,
971 })
972 }
973 }
974 }
975 }
976 }
977
978 const onNavigationReady = useCallOnce(() => {
979 const currentScreen = getCurrentRouteName()
980 setNavigationMetadata({
981 previousScreen: currentScreen,
982 currentScreen,
983 })
984 previousScreen.current = currentScreen
985
986 handlePushNotificationEntry()
987
988 ax.metric('router:navigate', {})
989
990 if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) {
991 emailDialogControl.open({
992 id: EmailDialogScreenID.VerificationReminder,
993 })
994 snoozeEmailConfirmationPrompt()
995 }
996
997 ax.metric('init', {
998 initMs: Math.round(
999 // @ts-ignore Emitted by Metro in the bundle prelude
1000 performance.now() - global.__BUNDLE_START_TIME__,
1001 ),
1002 })
1003
1004 if (IS_WEB) {
1005 const referrerInfo = Referrer.getReferrerInfo()
1006 if (referrerInfo && referrerInfo.hostname !== 'bsky.app') {
1007 ax.metric('deepLink:referrerReceived', {
1008 to: window.location.href,
1009 referrer: referrerInfo?.referrer,
1010 hostname: referrerInfo?.hostname,
1011 })
1012 }
1013 }
1014 })
1015
1016 return (
1017 <NavigationContainer
1018 ref={navigationRef}
1019 linking={LINKING}
1020 theme={theme}
1021 onStateChange={() => {
1022 const currentScreen = getCurrentRouteName()
1023 // do this before metric
1024 setNavigationMetadata({
1025 previousScreen: previousScreen.current,
1026 currentScreen,
1027 })
1028 ax.metric('router:navigate', {from: previousScreen.current})
1029 previousScreen.current = currentScreen
1030 }}
1031 onReady={onNavigationReady}
1032 // WARNING: Implicit navigation to nested navigators is depreciated in React Navigation 7.x
1033 // However, there's a fair amount of places we do that, especially in when popping to the top of stacks.
1034 // See BottomBar.tsx for an example of how to handle nested navigators in the tabs correctly.
1035 // I'm scared of missing a spot (esp. with push notifications etc) so let's enable this legacy behaviour for now.
1036 // We will need to confirm we handle nested navigators correctly by the time we migrate to React Navigation 8.x
1037 // -sfn
1038 navigationInChildEnabled>
1039 {children}
1040 </NavigationContainer>
1041 )
1042}
1043
1044function getCurrentRouteName() {
1045 if (navigationRef.isReady()) {
1046 return navigationRef.getCurrentRoute()?.name
1047 } else {
1048 return undefined
1049 }
1050}
1051
1052/**
1053 * These helpers can be used from outside of the RoutesContainer
1054 * (eg in the state models).
1055 */
1056
1057function navigate<K extends keyof AllNavigatorParams>(
1058 name: K,
1059 params?: AllNavigatorParams[K],
1060) {
1061 if (navigationRef.isReady()) {
1062 return Promise.race([
1063 new Promise<void>(resolve => {
1064 const handler = () => {
1065 resolve()
1066 navigationRef.removeListener('state', handler)
1067 }
1068 navigationRef.addListener('state', handler)
1069
1070 // @ts-ignore I dont know what would make typescript happy but I have a life -prf
1071 navigationRef.navigate(name, params)
1072 }),
1073 timeout(1e3),
1074 ])
1075 }
1076 return Promise.resolve()
1077}
1078
1079function resetToTab(
1080 tabName: 'HomeTab' | 'SearchTab' | 'MessagesTab' | 'NotificationsTab',
1081) {
1082 if (navigationRef.isReady()) {
1083 navigate(tabName)
1084 if (navigationRef.canGoBack()) {
1085 navigationRef.dispatch(StackActions.popToTop()) //we need to check .canGoBack() before calling it
1086 }
1087 }
1088}
1089
1090// returns a promise that resolves after the state reset is complete
1091function reset(): Promise<void> {
1092 if (navigationRef.isReady()) {
1093 navigationRef.dispatch(
1094 CommonActions.reset({
1095 index: 0,
1096 routes: [{name: IS_NATIVE ? 'HomeTab' : 'Home'}],
1097 }),
1098 )
1099 return Promise.race([
1100 timeout(1e3),
1101 new Promise<void>(resolve => {
1102 const handler = () => {
1103 resolve()
1104 navigationRef.removeListener('state', handler)
1105 }
1106 navigationRef.addListener('state', handler)
1107 }),
1108 ])
1109 } else {
1110 return Promise.resolve()
1111 }
1112}
1113
1114export {
1115 FlatNavigator,
1116 navigate,
1117 reset,
1118 resetToTab,
1119 RoutesContainer,
1120 TabsNavigator,
1121}