Upgrade react-native from 77.0 to 79.1

- Package and file updates
  - Perform changes recommended by the Upgrade Helper
    - https://react-native-community.github.io/upgrade-helper/?from=0.77.0&to=0.79.1&package=app.getorganize.organize&name=Organize
  - Ignore binary changes to gradle-wrapper.jar
  - Update @rnx-kit/align-deps and rnx-kit-overrides
  - Manually update react-native patch that couldn't be applied due to merge conflicts, since my PR was included in 79.1. Now only the transform fix remains
    - facebook/react-native@e3d607f
    - 1f6b314
- iOS
  - Running `cd ios && pod install` is now deprecated. `npm run ios` should run it under-the-hood if needed
  - Update react-native-safe-area-context from 5.1.0 to 5.4.0 to fix a build error
  - Update react-native-reanimated from 3.16.7 to 3.17.4 to fix a build error
  - `npm run ios:device:release` works again!
    - Thanks to a fix in  react-native-community/cli@17
    - It had been broken since the RN upgrade from 0.73.6 to 0.75.3
- Android
  - Upgraded Android Studio from Ladybug to Meerkat to meet the new Android Gradle Plugin 8.8.2 version requirement
  - Updated react-native-pager-view from 6.7.0 to 6.7.1 to fix a build issue
  - Added a dependency on react-native-edge-to-edge to fix an issue where the nav bar header was twice as tall as it should be on s10 physical device
    - react-native-community/discussions-and-proposals#827
    - https://github.com/zoontek/react-native-edge-to-edge
    - Update Android AppTheme to be Theme.EdgeToEdge
    - Replaced RN StatusBar with edge-to-edge SystemBars
- Testing
  - Manual smoke test succeeded on i13m, s10, SE simulator, and Android small phone emulator
  - Fixed a few ref type issues by adding null or undefined as explicit initial values and types
    - Inspired by software-mansion/react-native-reanimated@ca7d531
  - Fixed two linting deprecation issues by completely removing react-test-renderer and replacing functionality with @testing-library/react-native
    - https://react.dev/warnings/react-test-renderer
    - https://callstack.github.io/react-native-testing-library/docs/advanced/understanding-act#solution-with-real-timers
  - `npm t` succeeded

Author: High5Apps

.gitignore

@@ -33,6 +33,7 @@ local.properties
 .cxx/
 *.keystore
 !debug.keystore
+.kotlin/
 
 # node.js
 #

Gemfile

@@ -8,3 +8,9 @@ gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
 gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
 gem 'xcodeproj', '< 1.26.0'
 gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'

Gemfile.lock

@@ -18,6 +18,8 @@ GEM
       json (>= 1.5.1)
     atomos (0.1.3)
     base64 (0.2.0)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
     claide (1.1.0)
     cocoapods (1.15.2)
       addressable (~> 2.8)
@@ -69,8 +71,10 @@ GEM
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
     json (2.7.6)
+    logger (1.7.0)
     minitest (5.25.4)
     molinillo (0.8.0)
+    mutex_m (0.3.0)
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
@@ -96,8 +100,12 @@ PLATFORMS
 
 DEPENDENCIES
   activesupport (>= 6.1.7.5, != 7.1.0)
+  benchmark
+  bigdecimal
   cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
   concurrent-ruby (< 1.3.4)
+  logger
+  mutex_m
   xcodeproj (< 1.26.0)
 
 RUBY VERSION

README.md

@@ -65,7 +65,7 @@ npm test
 To run just one part of these checks, use `npm run <command>` with one of the scripts in [`package.json`](/package.json).
 
 ### Unit testing
-[Jest](https://jestjs.io/) is used as the unit testing framework. [`react-test-renderer`](https://legacy.reactjs.org/docs/test-renderer.html) is used for unit testing components.
+[Jest](https://jestjs.io/) is used as the unit testing framework. [`@testing-library/react-native`](https://callstack.github.io/react-native-testing-library/) is used for unit testing components.
 
 You can run a subset of the unit tests with `npx jest path/to/directory/or/file`. For example:
 ```sh

__tests__/App.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import ReactTestRenderer from 'react-test-renderer';
+import { render, screen, waitFor } from '@testing-library/react-native';
 import App from '../app/App';
 
 test('renders correctly', async () => {
-  await ReactTestRenderer.act(() => {
-    ReactTestRenderer.create(<App />);
-  });
+  render(<App />);
+  await waitFor(() => screen);
 });

android/app/build.gradle

@@ -61,14 +61,14 @@ def enableProguardInReleaseBuilds = false
  * The preferred build flavor of JavaScriptCore (JSC)
  *
  * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
  *
  * The international variant includes ICU i18n library and necessary data
  * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
  * give correct results when using with locales other than en-US. Note that
  * this variant is about 6MiB larger per architecture than default.
  */
-def jscFlavor = 'org.webkit:android-jsc:+'
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
     ndkVersion rootProject.ext.ndkVersion

android/app/src/main/res/values/styles.xml

@@ -1,7 +1,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.EdgeToEdge">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="android:windowBackground">@drawable/window_background</item>

android/build.gradle

@@ -3,7 +3,7 @@ buildscript {
         buildToolsVersion = "35.0.0"
         minSdkVersion = 24
         compileSdkVersion = 35
-        targetSdkVersion = 34
+        targetSdkVersion = 35
         ndkVersion = "27.1.12297006"
         kotlinVersion = "2.0.21"
     }

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

android/gradlew

@@ -86,8 +86,7 @@ done
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
-' "$PWD" ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -206,7 +205,7 @@ fi
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Collect all arguments for the java command:
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
 #     and any embedded shellness will be escaped.
 #   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
 #     treated as '${Hostname}' itself on the command line.

app/components/controls/handlers/OrgGraphClickHandler.ts

@@ -55,7 +55,7 @@ type ClickHandlerProps = {
 
 export default function useOrgGraphClickHandler(
   isGraphAvailable: boolean,
-  visNetwork: RefObject<VisNetworkRef>,
+  visNetwork: RefObject<VisNetworkRef | null>,
   hasMultipleNodes: boolean,
   setSelectedUserId: Dispatch<SetStateAction<string | undefined>>,
 ) {

app/components/controls/lists/CommentList.tsx

@@ -91,7 +91,7 @@ function useInsertedComments(
 }
 
 function useScrollToOffsetOnNewTopLevelComment(
-  listRef: RefObject<FlatList<Comment>>,
+  listRef: RefObject<FlatList<Comment> | null>,
   maybeInsertedCommentIds?: InsertedComment[],
 ) {
   const [offset, setOffset] = useState(0);

app/components/views/OrgGraphProgressBar.tsx

@@ -4,7 +4,7 @@ import ProgressBar from './ProgressBar';
 
 export default function useOrgGraphProgressBar(
   isGraphAvailable: boolean,
-  visNetwork: RefObject<VisNetworkRef>,
+  visNetwork: RefObject<VisNetworkRef | null>,
 ) {
   const [progress, setProgress] = useState(0);
 

app/components/views/StatusBar.tsx

@@ -1,24 +1,11 @@
 import React, { PropsWithChildren } from 'react';
-import { ColorValue, StatusBar as RNStatusBar } from 'react-native';
-import useTheme from '../../Theme';
-
-type Props = {
-  backgroundColor?: ColorValue;
-};
-
-export default function StatusBar({
-  backgroundColor: maybeBackgroundColor, children,
-}: PropsWithChildren<Props>) {
-  const { colors, isDarkMode } = useTheme();
-
-  // backgroundColor only affects Android
-  const backgroundColor = maybeBackgroundColor ?? colors.fill;
-
-  const barStyle = isDarkMode ? 'light-content' : 'dark-content';
+import { SystemBars } from 'react-native-edge-to-edge';
 
+export default function StatusBar({ children }: PropsWithChildren<{}>) {
   return (
     <>
-      <RNStatusBar backgroundColor={backgroundColor} barStyle={barStyle} />
+      {/* eslint-disable-next-line react/style-prop-object */}
+      <SystemBars />
       {children}
     </>
   );

app/model/PreviousValue.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 
 // https://stackoverflow.com/a/57706747/2421313
 export default function usePreviousValue<T>(value: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
   useEffect(() => {
     ref.current = value;
   });

app/model/ReplaceableFile.ts

@@ -13,7 +13,7 @@ export default function useReplaceableFile({
 }: Props) {
   const [fileName, setFileName] = useState<string>();
   const [ready, setReady] = useState(false);
-  const replacementFileNameRef = useRef<string>();
+  const replacementFileNameRef = useRef<string>(undefined);
 
   const parentFolder = `${Dirs.DocumentDir}/${parentFolderName}`;
   const fullPath = (name: string) => `${parentFolder}/${name}`;

app/navigation/WelcomeStack.tsx

@@ -5,7 +5,7 @@ import {
   VerificationScreen,
 } from '../screens';
 import type { WelcomeStackParamList } from './types';
-import { SafeAreaPadding, StatusBar } from '../components';
+import { SafeAreaPadding } from '../components';
 import useDefaultStackNavigatorOptions from './DefaultStackNavigatorOptions';
 import useTheme from '../Theme';
 import { useCurrentUser } from '../model';
@@ -26,34 +26,32 @@ export default function WelcomeStack() {
   const initialRouteName = inVerification ? 'Verification' : 'Welcome';
 
   return (
-    <StatusBar backgroundColor={colors.background}>
-      <SafeAreaPadding>
-        <Stack.Navigator
-          initialRouteName={initialRouteName}
-          screenOptions={screenOptions}
-        >
-          <Stack.Screen
-            name="Welcome"
-            component={WelcomeScreen}
-            options={{ animation: 'none' }}
-          />
-          <Stack.Screen
-            name="NewOrg"
-            component={NewOrgScreen}
-            getId={({ params }) => String(params.step)}
-            options={{ navigationBarColor: colors.fill }}
-          />
-          <Stack.Screen name="OrgReview" component={OrgReview} />
-          <Stack.Screen
-            name="JoinOrg"
-            component={JoinOrgScreen}
-          />
-          <Stack.Screen
-            name="Verification"
-            component={VerificationScreen}
-          />
-        </Stack.Navigator>
-      </SafeAreaPadding>
-    </StatusBar>
+    <SafeAreaPadding>
+      <Stack.Navigator
+        initialRouteName={initialRouteName}
+        screenOptions={screenOptions}
+      >
+        <Stack.Screen
+          name="Welcome"
+          component={WelcomeScreen}
+          options={{ animation: 'none' }}
+        />
+        <Stack.Screen
+          name="NewOrg"
+          component={NewOrgScreen}
+          getId={({ params }) => String(params.step)}
+          options={{ navigationBarColor: colors.fill }}
+        />
+        <Stack.Screen name="OrgReview" component={OrgReview} />
+        <Stack.Screen
+          name="JoinOrg"
+          component={JoinOrgScreen}
+        />
+        <Stack.Screen
+          name="Verification"
+          component={VerificationScreen}
+        />
+      </Stack.Navigator>
+    </SafeAreaPadding>
   );
 }

ios/AppDelegate.swift

@@ -4,22 +4,55 @@ import React_RCTAppDelegate
 import ReactAppDependencyProvider
 
 @main
-class AppDelegate: RCTAppDelegate {
-  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
-    self.moduleName = "Organize"
-    self.dependencyProvider = RCTAppDependencyProvider()
-
-    // You can add your custom initial props in the dictionary below.
-    // They will be passed down to the ViewController used by React Native.
-    self.initialProps = [:]
+class AppDelegate: UIResponder, UIApplicationDelegate {
+  var window: UIWindow?
+  
+  var reactNativeDelegate: ReactNativeDelegate?
+  var reactNativeFactory: RCTReactNativeFactory?
+  
+  func application(
+    _ application: UIApplication,
+    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
+  ) -> Bool {
+    let delegate = ReactNativeDelegate()
+    let factory = RCTReactNativeFactory(delegate: delegate)
+    delegate.dependencyProvider = RCTAppDependencyProvider()
+    
+    reactNativeDelegate = delegate
+    reactNativeFactory = factory
+    
+    window = UIWindow(frame: UIScreen.main.bounds)
+    
+    factory.startReactNative(
+      withModuleName: "Organize",
+      in: window,
+      launchOptions: launchOptions
+    )
 
     let primaryColor = UIColor(named: "Primary")
     UIView.appearance(whenContainedInInstancesOf: [UIAlertController.self]).tintColor = primaryColor
     UIBarButtonItem.appearance().tintColor = primaryColor
+    
+    return true
+  }
 
-    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
+  func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+    return RCTLinkingManager.application(app, open: url, options: options)
   }
 
+  func application(
+    _ application: UIApplication,
+    continue userActivity: NSUserActivity,
+    restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+      return RCTLinkingManager.application(
+        application,
+        continue: userActivity,
+        restorationHandler: restorationHandler
+      )
+    }
+}
+  
+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
   override func sourceURL(for bridge: RCTBridge) -> URL? {
     self.bundleURL()
   }
@@ -31,12 +64,4 @@ class AppDelegate: RCTAppDelegate {
     Bundle.main.url(forResource: "main", withExtension: "jsbundle")
 #endif
   }
-  
-  override func application(_ application: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-      return RCTLinkingManager.application(application, open: url, options: options)
-  }
-  
-  func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
-      return RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
-    }
 }