Clean up navigation logic (1/x).

src/account-info/ProfileCard.js → src/account-info/ProfileScreen.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { ScrollView, View } from 'react-native';
 
-import type { MainTabsNavigationProp, MainTabsRouteProp } from '../main/MainTabs';
+import type { MainTabsNavigationProp, MainTabsRouteProp } from '../main/MainTabsScreen';
 import * as NavigationService from '../nav/NavigationService';
 import { createStyleSheet } from '../styles';
 import { useDispatch, useSelector } from '../react-redux';
@@ -80,7 +80,7 @@ type Props = $ReadOnly<{|
  *
  * The user can still open `AccountDetails` on themselves via the (i) icon in a chat screen.
  */
-export default function ProfileCard(props: Props) {
+export default function ProfileScreen(props: Props) {
   const ownUser = useSelector(getOwnUser);
 
   return (

src/account/AccountPickScreen.js

@@ -10,11 +10,11 @@ import { hasAuth, getAccountStatuses } from '../selectors';
 import type { AccountStatus } from './accountsSelectors';
 import { Centerer, ZulipButton, Logo, Screen, ViewPlaceholder } from '../common';
 import AccountList from './AccountList';
-import { navigateToRealmScreen, accountSwitch, removeAccount } from '../actions';
+import { navigateToRealmInputScreen, accountSwitch, removeAccount } from '../actions';
 
 type Props = $ReadOnly<{|
-  navigation: AppNavigationProp<'account'>,
-  route: AppNavigationRouteProp<'account'>,
+  navigation: AppNavigationProp<'account-pick'>,
+  route: AppNavigationRouteProp<'account-pick'>,
 
   accounts: $ReadOnlyArray<AccountStatus>,
   dispatch: Dispatch,
@@ -30,7 +30,7 @@ class AccountPickScreen extends PureComponent<Props> {
         dispatch(accountSwitch(index));
       });
     } else {
-      NavigationService.dispatch(navigateToRealmScreen({ realm }));
+      NavigationService.dispatch(navigateToRealmInputScreen({ realm }));
     }
   };
 
@@ -72,7 +72,7 @@ class AccountPickScreen extends PureComponent<Props> {
           <ZulipButton
             text="Add new account"
             onPress={() => {
-              NavigationService.dispatch(navigateToRealmScreen());
+              NavigationService.dispatch(navigateToRealmInputScreen());
             }}
           />
         </Centerer>

src/main/HomeTab.js → src/main/HomeScreen.js

@@ -3,7 +3,7 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
-import type { MainTabsNavigationProp, MainTabsRouteProp } from './MainTabs';
+import type { MainTabsNavigationProp, MainTabsRouteProp } from './MainTabsScreen';
 import * as NavigationService from '../nav/NavigationService';
 import type { Dispatch } from '../types';
 import { connect } from '../react-redux';
@@ -34,7 +34,7 @@ type Props = $ReadOnly<{|
   dispatch: Dispatch,
 |}>;
 
-class HomeTab extends PureComponent<Props> {
+class HomeScreen extends PureComponent<Props> {
   render() {
     const { dispatch } = this.props;
 
@@ -74,4 +74,4 @@ class HomeTab extends PureComponent<Props> {
   }
 }
 
-export default connect<{||}, _, _>()(HomeTab);
+export default connect<{||}, _, _>()(HomeScreen);

src/main/MainTabsScreen.js

@@ -0,0 +1,121 @@
+/* @flow strict-local */
+import React, { useContext } from 'react';
+import { Platform, View } from 'react-native';
+import {
+  createBottomTabNavigator,
+  type BottomTabNavigationProp,
+} from '@react-navigation/bottom-tabs';
+import type { RouteProp } from '@react-navigation/native';
+
+import type { AppNavigationProp, AppNavigationRouteProp } from '../nav/AppNavigator';
+import type { GlobalParamList } from '../nav/globalTypes';
+import { bottomTabNavigatorConfig } from '../styles/tabs';
+import HomeScreen from './HomeScreen';
+import StreamTabsScreen from './StreamTabsScreen';
+import PmConversationsScreen from '../pm-conversations/PmConversationsScreen';
+import SettingsScreen from '../settings/SettingsScreen';
+import { IconInbox, IconSettings, IconStream } from '../common/Icons';
+import { OwnAvatar, OfflineNotice, ZulipStatusBar } from '../common';
+import IconUnreadConversations from '../nav/IconUnreadConversations';
+import ProfileScreen from '../account-info/ProfileScreen';
+import { useSelector } from '../react-redux';
+import { getHaveServerData } from '../selectors';
+import styles, { ThemeContext } from '../styles';
+
+export type MainTabsNavigatorParamList = {|
+  home: void,
+  'stream-tabs': void,
+  'pm-conversations': void,
+  settings: void,
+  profile: void,
+|};
+
+export type MainTabsNavigationProp<
+  +RouteName: $Keys<MainTabsNavigatorParamList> = $Keys<MainTabsNavigatorParamList>,
+> = BottomTabNavigationProp<GlobalParamList, RouteName>;
+
+export type MainTabsRouteProp<
+  RouteName: $Keys<MainTabsNavigatorParamList> = $Keys<MainTabsNavigatorParamList>,
+> = RouteProp<GlobalParamList, RouteName>;
+
+const Tab = createBottomTabNavigator<
+  GlobalParamList,
+  MainTabsNavigatorParamList,
+  MainTabsNavigationProp<>,
+>();
+
+type Props = $ReadOnly<{|
+  navigation: AppNavigationProp<'main-tabs'>,
+  route: AppNavigationRouteProp<'main-tabs'>,
+|}>;
+
+export default function MainTabsScreen(props: Props) {
+  const { backgroundColor } = useContext(ThemeContext);
+  const haveServerData = useSelector(getHaveServerData);
+
+  if (!haveServerData) {
+    // This can happen if the user has just logged out; this screen
+    // is still visible for the duration of the nav transition, and
+    // it's legitimate for its `render` to get called again.
+    // See our #4275.
+    //
+    // Avoid rendering any of our main UI in this case, to maintain
+    // the guarantee that it can all rely on server data existing.
+    return null;
+  }
+
+  return (
+    <View style={[styles.flexed, { backgroundColor }]}>
+      <ZulipStatusBar />
+      <OfflineNotice />
+      <Tab.Navigator
+        {...bottomTabNavigatorConfig({
+          showLabel: !!Platform.isPad,
+          showIcon: true,
+        })}
+        backBehavior="none"
+      >
+        <Tab.Screen
+          name="home"
+          component={HomeScreen}
+          options={{
+            tabBarLabel: 'Home',
+            tabBarIcon: ({ color }) => <IconInbox size={24} color={color} />,
+          }}
+        />
+        <Tab.Screen
+          name="stream-tabs"
+          component={StreamTabsScreen}
+          options={{
+            tabBarLabel: 'Streams',
+            tabBarIcon: ({ color }) => <IconStream size={24} color={color} />,
+          }}
+        />
+        <Tab.Screen
+          name="pm-conversations"
+          component={PmConversationsScreen}
+          options={{
+            tabBarLabel: 'Conversations',
+            tabBarIcon: ({ color }) => <IconUnreadConversations color={color} />,
+          }}
+        />
+        <Tab.Screen
+          name="settings"
+          component={SettingsScreen}
+          options={{
+            tabBarLabel: 'Settings',
+            tabBarIcon: ({ color }) => <IconSettings size={24} color={color} />,
+          }}
+        />
+        <Tab.Screen
+          name="profile"
+          component={ProfileScreen}
+          options={{
+            tabBarLabel: 'Profile',
+            tabBarIcon: ({ color }) => <OwnAvatar size={24} />,
+          }}
+        />
+      </Tab.Navigator>
+    </View>
+  );
+}

src/main/StreamTabs.js → src/main/StreamTabsScreen.js

@@ -9,7 +9,7 @@ import {
 import type { RouteProp } from '@react-navigation/native';
 
 import { createStyleSheet } from '../styles';
-import type { MainTabsNavigationProp, MainTabsRouteProp } from './MainTabs';
+import type { MainTabsNavigationProp, MainTabsRouteProp } from './MainTabsScreen';
 import type { GlobalParamList } from '../nav/globalTypes';
 import { materialTopTabNavigatorConfig } from '../styles/tabs';
 import SubscriptionsCard from '../streams/SubscriptionsCard';
@@ -42,11 +42,11 @@ const styles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  navigation: MainTabsNavigationProp<'streams'>,
-  route: MainTabsRouteProp<'streams'>,
+  navigation: MainTabsNavigationProp<'stream-tabs'>,
+  route: MainTabsRouteProp<'stream-tabs'>,
 |}>;
 
-export default function StreamTabs(props: Props) {
+export default function StreamTabsScreen(props: Props) {
   return (
     <Tab.Navigator
       {...materialTopTabNavigatorConfig({