nav: Fix navigation-prop types; switch most NavigationService use to navigation props

src/account-info/CustomProfileFields.js

@@ -15,7 +15,6 @@ import {
 } from '../users/userSelectors';
 import UserItem from '../users/UserItem';
 import { useNavigation } from '../react-navigation';
-import { navigateToAccountDetails } from '../nav/navActions';
 
 /* eslint-disable no-shadow */
 
@@ -30,7 +29,7 @@ function CustomProfileFieldUser(props: {| +userId: UserId |}): React.Node {
   const navigation = useNavigation();
   const onPress = React.useCallback(
     (user: UserOrBot) => {
-      navigation.dispatch(navigateToAccountDetails(user.user_id));
+      navigation.push('account-details', { userId: user.user_id });
     },
     [navigation],
   );

src/account-info/ProfileScreen.js

@@ -7,22 +7,16 @@ import { type UserId } from '../api/idTypes';
 import { TranslationContext } from '../boot/TranslationProvider';
 import type { RouteProp } from '../react-navigation';
 import type { MainTabsNavigationProp } from '../main/MainTabsScreen';
-import * as NavigationService from '../nav/NavigationService';
 import { createStyleSheet } from '../styles';
 import { useDispatch, useSelector } from '../react-redux';
 import ZulipButton from '../common/ZulipButton';
-import {
-  logout,
-  navigateToAccountPicker,
-  navigateToUserStatus,
-  navigateToSettings,
-} from '../actions';
+import { logout } from '../actions';
 import { tryStopNotifications } from '../notification/notifTokens';
 import AccountDetails from './AccountDetails';
 import AwayStatusSwitch from './AwayStatusSwitch';
 import { getOwnUser } from '../users/userSelectors';
 import { getIdentity } from '../account/accountsSelectors';
-import { navigateToAccountDetails } from '../nav/navActions';
+import { useNavigation } from '../react-navigation';
 
 const styles = createStyleSheet({
   buttonRow: {
@@ -36,52 +30,56 @@ const styles = createStyleSheet({
 });
 
 function SetStatusButton(props: {||}) {
+  const navigation = useNavigation();
   return (
     <ZulipButton
       style={styles.button}
       secondary
       text="Set a status"
       onPress={() => {
-        NavigationService.dispatch(navigateToUserStatus());
+        navigation.push('user-status');
       }}
     />
   );
 }
 
 function ProfileButton(props: {| +ownUserId: UserId |}) {
+  const navigation = useNavigation();
   return (
     <ZulipButton
       style={styles.button}
       secondary
       text="Full profile"
       onPress={() => {
-        NavigationService.dispatch(navigateToAccountDetails(props.ownUserId));
+        navigation.push('account-details', { userId: props.ownUserId });
       }}
     />
   );
 }
 
 function SettingsButton(props: {||}) {
+  const navigation = useNavigation();
   return (
     <ZulipButton
       style={styles.button}
       secondary
       text="Settings"
       onPress={() => {
-        NavigationService.dispatch(navigateToSettings());
+        navigation.push('settings');
       }}
     />
   );
 }
 
 function SwitchAccountButton(props: {||}) {
+  const navigation = useNavigation();
   return (
     <ZulipButton
       style={styles.button}
       secondary
       text="Switch account"
       onPress={() => {
-        NavigationService.dispatch(navigateToAccountPicker());
+        navigation.push('account-pick');
       }}
     />
   );

src/account/AccountPickScreen.js

@@ -8,7 +8,6 @@ import * as api from '../api';
 import { TranslationContext } from '../boot/TranslationProvider';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import * as NavigationService from '../nav/NavigationService';
 import { useGlobalSelector, useGlobalDispatch } from '../react-redux';
 import { getAccountStatuses } from '../selectors';
 import Centerer from '../common/Centerer';
@@ -17,12 +16,7 @@ import Logo from '../common/Logo';
 import Screen from '../common/Screen';
 import ViewPlaceholder from '../common/ViewPlaceholder';
 import AccountList from './AccountList';
-import {
-  navigateToRealmInputScreen,
-  accountSwitch,
-  removeAccount,
-  navigateToAuth,
-} from '../actions';
+import { accountSwitch, removeAccount } from '../actions';
 import type { ApiResponseServerSettings } from '../api/settings/getServerSettings';
 import { showErrorAlert } from '../utils/info';
 
@@ -47,14 +41,14 @@ export default function AccountPickScreen(props: Props): Node {
       } else {
         try {
           const serverSettings: ApiResponseServerSettings = await api.getServerSettings(realm);
-          NavigationService.dispatch(navigateToAuth(serverSettings));
+          navigation.push('auth', { serverSettings });
         } catch {
           // TODO: show specific error message from error object
           showErrorAlert(_('Failed to connect to server: {realm}', { realm: realm.toString() }));
         }
       }
     },
-    [accounts, _, dispatch],
+    [accounts, dispatch, navigation, _],
   );
 
   const handleAccountRemove = useCallback(
@@ -101,7 +95,7 @@ export default function AccountPickScreen(props: Props): Node {
         <ZulipButton
           text="Add new account"
           onPress={() => {
-            NavigationService.dispatch(navigateToRealmInputScreen());
+            navigation.push('realm-input', { initial: undefined });
           }}
         />
       </Centerer>

src/chat/PmConversationDetailsScreen.js

@@ -5,13 +5,11 @@ import { FlatList } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import * as NavigationService from '../nav/NavigationService';
 import { useSelector } from '../react-redux';
 import type { UserOrBot } from '../types';
 import { pmUiRecipientsFromKeyRecipients, type PmKeyRecipients } from '../utils/recipient';
 import Screen from '../common/Screen';
 import UserItem from '../users/UserItem';
-import { navigateToAccountDetails } from '../actions';
 import { getOwnUserId } from '../selectors';
 
 type Props = $ReadOnly<{|
@@ -20,12 +18,16 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function PmConversationDetailsScreen(props: Props): Node {
+  const { navigation } = props;
   const { recipients } = props.route.params;
   const ownUserId = useSelector(getOwnUserId);
 
-  const handlePress = useCallback((user: UserOrBot) => {
-    NavigationService.dispatch(navigateToAccountDetails(user.user_id));
-  }, []);
+  const handlePress = useCallback(
+    (user: UserOrBot) => {
+      navigation.push('account-details', { userId: user.user_id });
+    },
+    [navigation],
+  );
 
   return (
     <Screen title="Recipients" scrollEnabled={false}>

src/common/InputRowRadioButtons.js

@@ -12,7 +12,7 @@ import { BRAND_COLOR, createStyleSheet } from '../styles';
 import Touchable from './Touchable';
 import ZulipTextIntl from './ZulipTextIntl';
 import { IconRight } from './Icons';
-import type { AppNavigationProp } from '../nav/AppNavigator';
+import type { AppNavigationMethods } from '../nav/AppNavigator';
 
 type Item<TKey> = $ReadOnly<{|
   key: TKey,
@@ -33,7 +33,7 @@ type Props<TItemKey> = $ReadOnly<{|
    *
    * Pass this down from props or `useNavigation`.
    */
-  navigation: AppNavigationProp<>,
+  navigation: AppNavigationMethods,
 
   /** What the setting is about, e.g., "Theme". */
   label: LocalizableText,

src/diagnostics/DiagnosticsScreen.js

@@ -6,18 +6,11 @@ import { nativeApplicationVersion } from 'expo-application';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import * as NavigationService from '../nav/NavigationService';
 import { createStyleSheet } from '../styles';
 import NestedNavRow from '../common/NestedNavRow';
 import OptionDivider from '../common/OptionDivider';
 import Screen from '../common/Screen';
 import ZulipText from '../common/ZulipText';
-import {
-  navigateToDebug,
-  navigateToStorage,
-  navigateToTiming,
-  navigateToVariables,
-} from '../actions';
 
 const styles = createStyleSheet({
   versionLabel: {
@@ -40,25 +33,25 @@ export default class DiagnosticsScreen extends PureComponent<Props> {
         <NestedNavRow
           label="Variables"
           onPress={() => {
-            NavigationService.dispatch(navigateToVariables());
+            this.props.navigation.push('variables');
           }}
         />
         <NestedNavRow
           label="Timing"
           onPress={() => {
-            NavigationService.dispatch(navigateToTiming());
+            this.props.navigation.push('timing');
           }}
         />
         <NestedNavRow
           label="Storage"
           onPress={() => {
-            NavigationService.dispatch(navigateToStorage());
+            this.props.navigation.push('storage');
           }}
         />
         <NestedNavRow
           label="Debug"
           onPress={() => {
-            NavigationService.dispatch(navigateToDebug());
+            this.props.navigation.push('debug');
           }}
         />
       </Screen>

src/lightbox/Lightbox.js

@@ -8,7 +8,6 @@ import PhotoView from 'react-native-photo-view';
 // $FlowFixMe[untyped-import]
 import { useActionSheet } from '@expo/react-native-action-sheet';
 
-import * as NavigationService from '../nav/NavigationService';
 import type { Message } from '../types';
 import { useGlobalSelector, useSelector } from '../react-redux';
 import type { ShowActionSheetWithOptions } from '../action-sheets';
@@ -21,6 +20,7 @@ import { createStyleSheet } from '../styles';
 import { navigateBack } from '../actions';
 import { streamNameOfStreamMessage } from '../utils/recipient';
 import ZulipStatusBar from '../common/ZulipStatusBar';
+import { useNavigation } from '../react-navigation';
 
 const styles = createStyleSheet({
   img: {
@@ -46,6 +46,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function Lightbox(props: Props): Node {
+  const navigation = useNavigation();
   const [headerFooterVisible, setHeaderFooterVisible] = useState<boolean>(true);
   const showActionSheetWithOptions: ShowActionSheetWithOptions =
     useActionSheet().showActionSheetWithOptions;
@@ -102,7 +103,7 @@ export default function Lightbox(props: Props): Node {
         >
           <LightboxHeader
             onPressBack={() => {
-              NavigationService.dispatch(navigateBack());
+              navigation.dispatch(navigateBack());
             }}
             timestamp={message.timestamp}
             avatarUrl={message.avatar_url}

src/main/HomeScreen.js

@@ -6,12 +6,11 @@ import { View } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
 import type { MainTabsNavigationProp } from './MainTabsScreen';
-import * as NavigationService from '../nav/NavigationService';
 import { useDispatch } from '../react-redux';
 import { HOME_NARROW, MENTIONED_NARROW, STARRED_NARROW } from '../utils/narrow';
 import { TopTabButton, TopTabButtonGeneral } from '../nav/TopTabButton';
 import UnreadCards from '../unread/UnreadCards';
-import { doNarrow, navigateToSearch } from '../actions';
+import { doNarrow } from '../actions';
 import IconUnreadMentions from '../nav/IconUnreadMentions';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
 import LoadingBanner from '../common/LoadingBanner';
@@ -35,6 +34,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function HomeScreen(props: Props): Node {
+  const { navigation } = props;
   const dispatch = useDispatch();
 
   return (
@@ -62,7 +62,7 @@ export default function HomeScreen(props: Props): Node {
         <TopTabButton
           name="search"
           onPress={() => {
-            NavigationService.dispatch(navigateToSearch());
+            navigation.push('search-messages');
           }}
         />
       </View>

src/main/MainTabsScreen.js

@@ -10,8 +10,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import type { RouteProp, RouteParamsOf } from '../react-navigation';
 import { getUnreadHuddlesTotal, getUnreadPmsTotal } from '../selectors';
 import { useSelector } from '../react-redux';
-import type { AppNavigationProp } from '../nav/AppNavigator';
-import type { GlobalParamList } from '../nav/globalTypes';
+import type { AppNavigationMethods, AppNavigationProp } from '../nav/AppNavigator';
 import { bottomTabNavigatorConfig } from '../styles/tabs';
 import HomeScreen from './HomeScreen';
 import StreamTabsScreen from './StreamTabsScreen';
@@ -31,10 +30,15 @@ export type MainTabsNavigatorParamList = {|
 
 export type MainTabsNavigationProp<
   +RouteName: $Keys<MainTabsNavigatorParamList> = $Keys<MainTabsNavigatorParamList>,
-> = BottomTabNavigationProp<GlobalParamList, RouteName>;
+> =
+  // Screens on this navigator will get a `navigation` prop that reflects
+  // this navigator itself…
+  BottomTabNavigationProp<MainTabsNavigatorParamList, RouteName> &
+    // … plus the methods it gets from its parent navigator.
+    AppNavigationMethods;
 
 const Tab = createBottomTabNavigator<
-  GlobalParamList,
+  MainTabsNavigatorParamList,
   MainTabsNavigatorParamList,
   MainTabsNavigationProp<>,
 >();

src/main/StreamTabsScreen.js

@@ -10,10 +10,10 @@ import ZulipTextIntl from '../common/ZulipTextIntl';
 import { createStyleSheet } from '../styles';
 import type { RouteProp, RouteParamsOf } from '../react-navigation';
 import type { MainTabsNavigationProp } from './MainTabsScreen';
-import type { GlobalParamList } from '../nav/globalTypes';
 import { materialTopTabNavigatorConfig } from '../styles/tabs';
 import SubscriptionsCard from '../streams/SubscriptionsCard';
 import StreamListCard from '../subscriptions/StreamListCard';
+import type { AppNavigationMethods } from '../nav/AppNavigator';
 
 export type StreamTabsNavigatorParamList = {|
   +subscribed: RouteParamsOf<typeof SubscriptionsCard>,
@@ -22,9 +22,14 @@ export type StreamTabsNavigatorParamList = {|
 
 export type StreamTabsNavigationProp<
   +RouteName: $Keys<StreamTabsNavigatorParamList> = $Keys<StreamTabsNavigatorParamList>,
-> = MaterialTopTabNavigationProp<GlobalParamList, RouteName>;
+> =
+  // Screens on this navigator will get a `navigation` prop that reflects
+  // this navigator itself…
+  MaterialTopTabNavigationProp<StreamTabsNavigatorParamList, RouteName> &
+    // … plus the methods it gets from its parent navigator.
+    AppNavigationMethods;
 
-const Tab = createMaterialTopTabNavigator<GlobalParamList>();
+const Tab = createMaterialTopTabNavigator<StreamTabsNavigatorParamList>();
 
 const styles = createStyleSheet({
   tab: {