Upgrade react-native from 0.75.3 to 0.77.0

- Perform changes recommended by the Upgrade Helper
  - Didn't update gradle-wrapper.jar since it is a binary file
  - Didn't manually remove all of the RnDiffAppTests/OrganizeTests references. I only kept the ones that were created by removing OrganizeTests.m and OrganizeTests Info.plist
  - Converted AppDelegate.mm to AppDelegate.swift
    - https://github.com/guardianproject/orbot-apple/blob/57dae6f/Orbot/AppDelegate.swift#L29
    - https://github.com/haqq-network/haqq-wallet/blob/c6687e3/ios/AppDelegate.swift#L67-L73
  - https://react-native-community.github.io/upgrade-helper/?from=0.75.3&to=0.77.0&package=app.getorganize.organize&name=Organize
- Update local dev machine node from v23.3.0 to v23.6.1 and npm from 10.9.0 to 10.9.2 to fix a warning that happened when running `npm run` commands
  - npm/cli#7857 (comment)
- Use align-deps to update and align dependencies
- Fix "2 vulnerabilities (1 moderate, 1 high)" with `npm audit fix`
- Update react-native-vision-camera from 4.5.3 to 4.6.3 to fix a build error
  - mrousavy/react-native-vision-camera#3263
- Fixed another react-native-vision-camera Android build error
  - Opened PR: mrousavy/react-native-vision-camera#3394
  - Added devDependency on [email protected] to bring this fix in locally until the PR is merged
    - https://github.com/ds300/patch-package
- Upgraded react-native-modal-datetime-picker from 17.1.0 to 18.0.0 to fix a default props warning
  - mmazzarolo/react-native-modal-datetime-picker#755
  - https://github.com/mmazzarolo/react-native-modal-datetime-picker/releases/tag/v18.0.0
- Fix Android shadows looked bad by migrating from elevation to boxShadow, which was newly added in 77
  - https://reactnative.dev/docs/view-style-props#boxshadow
  - https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
- Update react-native-pager-view from 6.4.1 to 6.7.0 to fix an android crash when navigating to FlaggedContent, then hitting the back button
  - callstack/react-native-pager-view#944
  - https://github.com/callstack/react-native-pager-view/releases/tag/v6.6.1
- Fix CountdownClockBorder flicker on touch down by migrating from react native's built-in Animated to react-native-reanimated
  - This was caused by react native 77 using the new architecture by default
  - Add dependency on [email protected]
    - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/
    - Previously removed in 7b0b38a
- Fix iOS RefreshControl not shown on mount
  - This was caused by react native 77 using the new architecture by default
  - Created PR on react-native: facebook/react-native#49240
  - Used patch-package to bring this in locally until the PR is merged
- Fix failing jest tests by removing jestSetupMockReactNavigation.ts
  - According to the docs, the mock is only needed when using DrawerNavigator or (non-native) StackNavigator
    - https://reactnavigation.org/docs/testing/#mocking-native-modules
- Fix ListEmptyComponent briefly shown even though first page was non-empty
  - This was caused by react native 77 using the new architecture by default
  - This affected useModels, usePrependedModels, and useLeadItems because they used useEffect when they should have used useMemo, causing a render delay between when ready was true and when models were non-empty
    - As a result of the change from useEffect to useMemo in Models, I had to remove the isEqual check. This caused useModel consumers to have more renders than previously, since previously the isEqual check debounced many re-renders, e.g. when fetching data from the backend updated the cache, but didn't affect any of the ids watched by the specific instance of useModels
      - I updated useModelCache, which aleviated some of these unnecessary re-renders, but the scenario mentioned above still causes re-renders
      - The only place these new renders caused real issues was with OrgGraph. The useModelCache change fixed a re-render on pull-to-refresh of the OrgGraph. However, I specifically needed to debounce officers in VisGraphData or else selecting a node would trigger an OrgGraph re-render
- Update react-native-screens from 4.5.0 to 4.6.0 to fix an issue where HeaderButton onPress was ignored on Android devices
  - react-navigation/react-navigation#12274
  - software-mansion/react-native-screens#2219 (comment)
- Add an override to rnx-kit config, since it expected react-native-screens to be 4.5.0 instead of 4.6.0 for react native 77
  - https://microsoft.github.io/rnx-kit/docs/tools/align-deps#presets
  - https://microsoft.github.io/rnx-kit/docs/architecture/dependency-management#extensions
  - https://github.com/microsoft/rnx-kit/tree/main/packages/align-deps#configure

Gemfile

@@ -6,3 +6,5 @@ ruby ">= 2.6.10"
 # Exclude problematic versions of cocoapods and activesupport that causes build failures.
 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'

Gemfile.lock

@@ -1,41 +1,44 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.5)
+    CFPropertyList (3.0.7)
+      base64
+      nkf
       rexml
-    activesupport (6.1.4.6)
+    activesupport (6.1.7.10)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
       zeitwerk (~> 2.3)
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
+    base64 (0.2.0)
     claide (1.1.0)
-    cocoapods (1.11.2)
+    cocoapods (1.15.2)
       addressable (~> 2.8)
       claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.11.2)
+      cocoapods-core (= 1.15.2)
       cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 1.4.0, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
       cocoapods-plugins (>= 1.0.0, < 2.0)
       cocoapods-search (>= 1.0.0, < 2.0)
-      cocoapods-trunk (>= 1.4.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
       cocoapods-try (>= 1.1.0, < 2.0)
       colored2 (~> 3.1)
       escape (~> 0.0.4)
       fourflusher (>= 2.3.0, < 3.0)
       gh_inspector (~> 1.0)
       molinillo (~> 0.8.0)
       nap (~> 1.0)
-      ruby-macho (>= 1.0, < 3.0)
-      xcodeproj (>= 1.21.0, < 2.0)
-    cocoapods-core (1.11.2)
-      activesupport (>= 5.0, < 7)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.15.2)
+      activesupport (>= 5.0, < 8)
       addressable (~> 2.8)
       algoliasearch (~> 1.0)
       concurrent-ruby (~> 1.1)
@@ -45,7 +48,7 @@ GEM
       public_suffix (~> 4.0)
       typhoeus (~> 1.0)
     cocoapods-deintegrate (1.0.5)
-    cocoapods-downloader (1.5.1)
+    cocoapods-downloader (2.1)
     cocoapods-plugins (1.0.0)
       nap
     cocoapods-search (1.0.1)
@@ -54,47 +57,51 @@ GEM
       netrc (~> 0.11)
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.3.3)
     escape (0.0.4)
-    ethon (0.15.0)
+    ethon (0.16.0)
       ffi (>= 1.15.0)
-    ffi (1.15.5)
+    ffi (1.17.1)
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
     httpclient (2.8.3)
-    i18n (1.10.0)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.6.1)
-    minitest (5.15.0)
+    json (2.7.6)
+    minitest (5.25.4)
     molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
-    public_suffix (4.0.6)
-    rexml (3.2.5)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.4.0)
     ruby-macho (2.5.1)
-    typhoeus (1.4.0)
+    typhoeus (1.4.1)
       ethon (>= 0.9.0)
-    tzinfo (2.0.4)
+    tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    xcodeproj (1.21.0)
+    xcodeproj (1.25.1)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
-      rexml (~> 3.2.4)
-    zeitwerk (2.5.4)
+      rexml (>= 3.3.6, < 4.0)
+    zeitwerk (2.6.18)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  cocoapods (~> 1.11, >= 1.11.2)
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  concurrent-ruby (< 1.3.4)
+  xcodeproj (< 1.26.0)
 
 RUBY VERSION
-   ruby 2.7.4p191
+   ruby 2.6.10p210
 
 BUNDLED WITH
-   2.2.27
+   2.3.19

__tests__/App.test.tsx

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

android/app/src/main/java/app/getorganize/organize/MainApplication.kt

@@ -9,6 +9,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
@@ -33,7 +34,7 @@ class MainApplication : Application(), ReactApplication {
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, false)
+    SoLoader.init(this, OpenSourceMergedSoMapping)
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()

android/build.gradle

@@ -1,11 +1,11 @@
 buildscript {
     ext {
-        buildToolsVersion = "34.0.0"
-        minSdkVersion = 23
-        compileSdkVersion = 34
+        buildToolsVersion = "35.0.0"
+        minSdkVersion = 24
+        compileSdkVersion = 35
         targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.24"
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.0.21"
     }
     repositories {
         google()

android/gradle.properties

@@ -32,7 +32,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.

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.8-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

android/gradlew

@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -84,7 +86,8 @@ 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 "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum

android/gradlew.bat

@@ -13,6 +13,8 @@
 @rem See the License for the specific language governing permissions and
 @rem limitations under the License.
 @rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
 
 @if "%DEBUG%"=="" @echo off
 @rem ##########################################################################

app/Theme.ts

@@ -74,21 +74,10 @@ const lightTheme = {
   },
   shadows: {
     elevation1: {
-      elevation: 1, // Android only
-      shadowOffset: { // iOS only
-        height: 1,
-        width: 0,
-      },
-      shadowRadius: 1, // iOS only
+      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.25)',
     },
     elevation4: {
-      elevation: 4, // Android only
-      shadowOffset: { // iOS only
-        height: 2,
-        width: 0,
-      },
-      shadowOpacity: 0.5, // iOS only
-      shadowRadius: 4, // iOS only
+      boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.25)',
     },
   },
   sizes: {

app/components/controls/buttons/QRCodeButtton.tsx

@@ -30,6 +30,10 @@ export default function QRCodeButton({
 }: Props) {
   const [frameSize, setFrameSize] = useState(0);
 
+  // CountdownClockBorder initializes animations based on its sideLength, so
+  // don't render CountdownClockBorder until frameSize is set
+  const shouldShowCountdownClockBorder = !!frameSize;
+
   const { colors, spacing, styles } = useStyles();
 
   const qrCodeSize = frameSize - spacing.l;
@@ -39,14 +43,16 @@ export default function QRCodeButton({
     <FrameButton
       onContainerSizeChange={({ width }) => setFrameSize(width)}
       onPress={onPress}
-      style={{ borderWidth: 0 }}
+      style={shouldShowCountdownClockBorder && { borderWidth: 0 }}
     >
-      <CountdownClockBorder
-        duration={timeout}
-        onFinished={onTimeout}
-        // Add back the removed border width
-        sideLength={frameSize + 2 * spacing.s}
-      />
+      {!shouldShowCountdownClockBorder ? null : (
+        <CountdownClockBorder
+          duration={timeout}
+          onFinished={onTimeout}
+          // Add back the removed border width
+          sideLength={frameSize + 2 * spacing.s}
+        />
+      )}
       <QRCode
         color={colors.label}
         backgroundColor={colors.fill}

app/components/controls/lists/LeadItemList.tsx

@@ -1,6 +1,4 @@
-import React, {
-  useCallback, useEffect, useMemo, useState,
-} from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
 import { ItemSeparator, ListEmptyMessage } from '../../views';
 import { IconRow } from './rows';
@@ -11,14 +9,12 @@ import usePullToRefresh from './PullToRefresh';
 const LIST_EMPTY_MESSAGE = "You don't have permission to access any of these tools. You can request permissions from the president or another authorized officer.";
 
 function useLeadItems() {
-  const [leadItems, setLeadItems] = useState<LeadItem[]>([]);
-
   const { can, ready, refreshMyPermissions } = useMyPermissions({
     scopes: ['blockMembers', 'editOrg', 'editPermissions', 'moderate'],
   });
 
-  useEffect(() => {
-    if (!ready) { return; }
+  const leadItems = useMemo(() => {
+    if (!ready) { return []; }
 
     const items: LeadItem[] = [];
 
@@ -46,7 +42,7 @@ function useLeadItems() {
       });
     }
 
-    setLeadItems(items);
+    return items;
   }, [can, ready]);
 
   return { leadItems, ready, refreshMyPermissions };

app/components/controls/lists/PullToRefresh.tsx

@@ -23,7 +23,7 @@ type Props = {
 };
 
 export default function usePullToRefresh({ onRefresh, refreshOnMount }: Props) {
-  const [refreshing, setRefreshing] = useState(false);
+  const [refreshing, setRefreshing] = useState(!!refreshOnMount);
 
   const { colors, styles } = useStyles();
   const { RequestProgress, setResult } = useRequestProgress();
@@ -43,13 +43,7 @@ export default function usePullToRefresh({ onRefresh, refreshOnMount }: Props) {
 
   useEffect(() => {
     if (refreshOnMount) {
-      // HACK: This timeout fixes an internal issue in RefreshControl.
-      // The issue is iOS-only, and only happens when refreshing is true very
-      // soon after mount.
-      // https://github.com/facebook/react-native/issues/35779
-      setTimeout(() => {
-        wrappedOnRefresh().catch(console.error);
-      }, 100);
+      wrappedOnRefresh().catch(console.error);
     }
   }, []);