Upgrade React Navigation from 6 to 7

- Needed to use `npm i --force` to overcome a peer dependency issue, but i think this was a mistake, because running `npm i` again showed no warnings, and inspecting the package-lock.json changes I don't see any violations
- Remove explicit dependency on react-native-tab-view
  - https://reactnavigation.org/docs/upgrading-from-6.x#material-top-tab-navigator-no-longer-requires-installing-react-native-tab-view
- Update Theme to include fonts
  - Note that the top tab names changed from UPPERCASE to Titlecase and semibold to regular
  - Note that BottomTab labels no longer allow font scaling since the bottom tab bar height is fixed. So font scaling just causes the labels to be cut off.
  - https://reactnavigation.org/docs/upgrading-from-6.x#the-theme-prop-now-accepts-a-fonts-property
  - https://reactnavigation.org/docs/themes
- Update navigate to popTo when intending to goBack
  - https://reactnavigation.org/docs/upgrading-from-6.x/#the-navigate-method-no-longer-goes-back-use-popto-instead
- Add rnx-kit/align-deps overrides for react navigation 7
- This upgrade fixes a warning introduced during a previous react-native upgrade (8a6cee1) that happened when swiping between top tabs
  - react-navigation/react-navigation#12142

Author: High5Apps

app/Theme.ts

@@ -133,7 +133,7 @@ export type Theme = ReturnType<typeof useTheme>;
 export type ThemeColors = Theme['colors'];
 
 export const useNavigationTheme = () => {
-  const { colors, isDarkMode } = useTheme();
+  const { colors, font, isDarkMode } = useTheme();
   return {
     colors: {
       background: colors.background,
@@ -144,5 +144,23 @@ export const useNavigationTheme = () => {
       text: colors.label,
     },
     dark: isDarkMode,
+    fonts: {
+      regular: {
+        fontFamily: font.weights.regular,
+        fontWeight: '400' as const,
+      },
+      medium: {
+        fontFamily: font.weights.medium,
+        fontWeight: '500' as const,
+      },
+      bold: {
+        fontFamily: font.weights.semiBold,
+        fontWeight: '600' as const,
+      },
+      heavy: {
+        fontFamily: font.weights.bold,
+        fontWeight: '700' as const,
+      },
+    },
   };
 };

app/navigation/DefaultTopTabOptions.ts

@@ -4,9 +4,7 @@ import {
 import useTheme from '../Theme';
 
 export default function useDefaultTopTabOptions() {
-  const {
-    colors, font, sizes, spacing,
-  } = useTheme();
+  const { colors, sizes, spacing } = useTheme();
 
   const screenPaddingStart = spacing.m;
   const screenOptions: MaterialTopTabNavigationOptions = {
@@ -21,9 +19,6 @@ export default function useDefaultTopTabOptions() {
       paddingHorizontal: 0,
       width: 'auto',
     },
-    tabBarLabelStyle: {
-      fontFamily: font.weights.semiBold,
-    },
     tabBarScrollEnabled: true,
     tabBarStyle: {
       paddingLeft: screenPaddingStart,

app/navigation/OrgTabs.tsx

@@ -1,41 +1,24 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import ConnectStack from './ConnectStack';
 import { OrgTabsParamList } from './types';
-import useTheme from '../Theme';
 import { TabBarIcon } from '../components';
 import DiscussStack from './DiscussStack';
 import VoteStack from './VoteStack';
 import OrgStack from './OrgStack';
 import LeadStack from './LeadStack';
 import { useCurrentUser } from '../model';
 
-const useStyles = () => {
-  const { font, spacing } = useTheme();
-
-  const styles = StyleSheet.create({
-    tabBarIconLabel: {
-      fontFamily: font.weights.semiBold,
-      marginBottom: spacing.xxs,
-    },
-  });
-
-  return { styles };
-};
-
 const Tab = createBottomTabNavigator<OrgTabsParamList>();
 
 export default function OrgTabs() {
-  const { styles } = useStyles();
-
   const { currentUser } = useCurrentUser();
 
   return (
     <Tab.Navigator
       screenOptions={{
+        tabBarAllowFontScaling: false,
         headerShown: false,
-        tabBarLabelStyle: styles.tabBarIconLabel,
         tabBarHideOnKeyboard: true,
       }}
     >

app/screens/discuss/NewCommentScreen.tsx

@@ -26,7 +26,7 @@ export default function NewCommentScreen({
     <NewCommentScreenBase
       HeaderComponent={HeaderComponent}
       onCommentCreated={(commentId) => {
-        navigation.navigate('Post', {
+        navigation.popTo('Post', {
           insertedComments: [{ commentId }],
           postId: post.id,
         });

app/screens/discuss/NewPostScreen.tsx

@@ -21,7 +21,7 @@ export default function NewPostScreen({
   const onPostCreated = useCallback((post: Post) => {
     const params = { prependedPostId: post.id };
     const screen = getNextScreenName(maybeCategory);
-    navigation.navigate('DiscussTabs', { screen, params });
+    navigation.popTo('DiscussTabs', { screen, params });
   }, []);
 
   return (

app/screens/discuss/NewReplyScreen.tsx

@@ -29,7 +29,7 @@ export default function NewReplyScreen({
       commentId={commentId}
       HeaderComponent={HeaderComponent}
       onCommentCreated={(newCommentId) => {
-        navigation.navigate('Post', {
+        navigation.popTo('Post', {
           insertedComments: [
             { commentId: newCommentId, parentCommentId: commentId },
           ],

app/screens/lead/BlockMemberScreen.tsx

@@ -52,7 +52,7 @@ export default function BlockMemberScreen({
         action: 'block', moderatable,
       });
       setResult('success');
-      navigation.navigate('BlockedMembers', {
+      navigation.popTo('BlockedMembers', {
         prependedModerationEventId: moderationEvent.id,
       });
     } catch (error) {

app/screens/onboarding/NewOrg/NewOrgStepNavigator.ts

@@ -5,32 +5,25 @@ import type {
 
 const name = 'NewOrg';
 
-const NewOrgStepNavigator = (navigation: NewOrgScreenNavigationProp) => {
-  function navigateToStep(step: number, params: NewOrgScreenParams) {
-    navigation.navigate(name, { ...params, step });
-  }
-
-  return {
-    navigateToStep,
-    navigateToNext: (currentStep: number, params: NewOrgScreenParams) => {
-      if (currentStep < NewOrgSteps.length - 1) {
-        navigateToStep(currentStep + 1, params);
-      } else {
-        navigation.navigate({
-          name: 'OrgReview',
-          params: (params as OrgReviewParams),
-        });
-      }
-    },
-    navigateToPrevious: (currentStep: number, params: NewOrgScreenParams) => {
-      if (currentStep > 0) {
-        navigateToStep(currentStep - 1, params);
-      } else {
-        navigation.goBack();
-      }
-    },
-  };
-};
+const NewOrgStepNavigator = (navigation: NewOrgScreenNavigationProp) => ({
+  navigateToNext: (currentStep: number, params: NewOrgScreenParams) => {
+    if (currentStep < NewOrgSteps.length - 1) {
+      navigation.navigate(name, { ...params, step: currentStep + 1 });
+    } else {
+      navigation.navigate({
+        name: 'OrgReview',
+        params: (params as OrgReviewParams),
+      });
+    }
+  },
+  navigateToPrevious: (currentStep: number, params: NewOrgScreenParams) => {
+    if (currentStep > 0) {
+      navigation.popTo(name, { ...params, step: currentStep - 1 });
+    } else {
+      navigation.goBack();
+    }
+  },
+});
 
 export default NewOrgStepNavigator;
 

app/screens/org/TransparencyLogScreen.tsx

@@ -17,7 +17,7 @@ export default function TransparencyLogScreen({
         screen: 'Post', initial: false, params: { postId: id },
       });
     } else if (category === 'User') {
-      navigation.navigate('Org', { selectedUserId: id });
+      navigation.popTo('Org', { selectedUserId: id });
     } else if (category === 'Comment') {
       navigation.navigate('DiscussStack', {
         screen: 'CommentThread', initial: false, params: { commentId: id },

app/screens/vote/NewElectionBallotScreen.tsx

@@ -107,7 +107,7 @@ export default function NewElectionBallotScreen({
       });
       resetForm();
       setResult('success');
-      navigation.navigate('BallotPreviews', {
+      navigation.popTo('BallotPreviews', {
         prependedBallotId: ballotPreview.id,
       });
     } catch (error) {