Update to react-native 0.75 (#2950)

* Update to RN 0.75.5 with upgrade helper diff * Update .flowconfig * Update package-lock.json * Update Gemfile.lock * Update Podfile.lock * Update project.pbxproj * Use double quotes * Update to RN 0.75.5 with upgrade helper diff * Update .flowconfig * Update package-lock.json * Update Gemfile.lock * Update Podfile.lock * Update project.pbxproj * Use double quotes * Update Podfile.lock * Update CustomTabBar.js * Revert "Update CustomTabBar.js" This reverts commit 2eb085e3bb. * Update NavBar. Remove percentage based width as it broke the UI Now we rely solely on flexbox spacing of justify-around. * Update FloatingActionButton percentage values * Update CustomTabBar.test.js.snap
2025-12-23 22:18:36 -05:00 · 2025-06-12 21:18:28 +02:00
parent 9a80a6351e
commit 3faf5e3e29
20 changed files with 1526 additions and 1206 deletions
--- a/.flowconfig
+++ b/.flowconfig
@@ -31,6 +31,10 @@ node_modules/react-native/Libraries/polyfills/.*
 .*/node_modules/hermes-estree/dist/generated/predicates.js.flow
 .*/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js
 .*/node_modules/react-native/Libraries/Types/ReactDevToolsTypes.js
+.*/node_modules/react-native/Libraries/Components/View/ViewNativeComponent.js
+.*/node_modules/hermes-estree/dist/predicates.js.flow
+.*/node_modules/react-native/Libraries/Renderer/shims/ReactNativeTypes.js
+.*/node_modules/react-native/Libraries/Text/TextNativeComponent.js

 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*
--- a/7
+++ b/7
@@ -4,10 +4,9 @@ source "https://rubygems.org"
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"

-# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
-# bound in the template on Cocoapods with next React Native release.
-gem "activesupport", ">= 6.1.7.5", "< 7.1.0"
-gem "cocoapods", ">= 1.13", "< 1.15"
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem "activesupport", ">= 6.1.7.5", "!= 7.1.0"
+gem "cocoapods", ">= 1.13", "!= 1.15.0", "!= 1.15.1"
 gem "concurrent-ruby", "<= 1.3.4"
 gem "xcodeproj", "< 1.26.0"

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -313,8 +313,8 @@ PLATFORMS
  ruby

 DEPENDENCIES
-  activesupport (>= 6.1.7.5, < 7.1.0)
-  cocoapods (>= 1.13, < 1.15)
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
  concurrent-ruby (<= 1.3.4)
  fastlane
  fastlane-sirp!
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -27,14 +27,14 @@ apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 */
 react {
    /* Folders */
-    //   The root of your project, i.e. where "package.json" lives. Default is '..'
-    // root = file("../")
-    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
-    // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
-    // codegenDir = file("../node_modules/@react-native/codegen")
-    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
-    // cliFile = file("../node_modules/react-native/cli.js")
+    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+    // cliFile = file("../../node_modules/react-native/cli.js")
    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
@@ -65,6 +65,9 @@ react {
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]
+     
+    /* Autolinking */
+    autolinkLibrariesWithApp()
 }


@@ -173,5 +176,3 @@ dependencies {
        implementation jscFlavor
    }
 }
-
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -20,6 +20,7 @@
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
+      android:supportsRtl="true"
      android:requestLegacyExternalStorage="true"
      android:networkSecurityConfig="@xml/network_security_config">
      <meta-data android:name="com.google.android.geo.API_KEY" android:value="${GMAPS_API_KEY}" />
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -9,7 +9,7 @@ buildscript {
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.22"
+        kotlinVersion = "1.9.25"
        // This specifies which tensorflow-lite version to use for our vision-plugin.
        tensorflowVersion = "2.14.0"
    }
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -21,8 +21,6 @@ org.gradle.jvmargs=-Xmx4608m -XX:MaxMetaspaceSize=512m
 # Android operating system, and which are packaged with your app's APK
 # https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
-# Automatically convert third-party libraries to use AndroidX
-android.enableJetifier=true

 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using
--- a/android/gradle/wrapper/gradle-wrapper.jar
+++ b/android/gradle/wrapper/gradle-wrapper.jar
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/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.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
--- a/android/gradlew
+++ b/android/gradlew
@@ -55,7 +55,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -1,3 +1,6 @@
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'iNaturalistReactNative'
 include ':react-native-exception-handler'
 project(':react-native-exception-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-exception-handler/android')
@@ -5,6 +8,5 @@ include ':react-native-localize'
 project(':react-native-localize').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localize/android')
 include ':react-native-pure-jwt'
 project(':react-native-pure-jwt').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pure-jwt/android')
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
--- a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
+++ b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
@@ -966,6 +966,7 @@
 				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
 				SWIFT_EMIT_LOC_STRINGS = YES;
 				USE_HERMES = true;
 			};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -83,10 +83,10 @@
    "lodash": "^4.17.21",
    "markdown-it": "^14.1.0",
    "nativewind": "^2.0.11",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
    "react-i18next": "^14.1.0",
-    "react-native": "0.74.7",
+    "react-native": "0.75.5",
    "react-native-animated-dots-carousel": "^2.0.0",
    "react-native-audio-recorder-player": "^3.6.7",
    "react-native-bouncy-checkbox": "^3.0.7",
@@ -143,10 +143,10 @@
    "@babel/runtime": "^7.24.4",
    "@faker-js/faker": "^8.4.1",
    "@fluent/syntax": "^0.19.0",
-    "@react-native/babel-preset": "0.74.89",
-    "@react-native/eslint-config": "0.74.89",
-    "@react-native/metro-config": "0.74.89",
-    "@react-native/typescript-config": "0.74.89",
+    "@react-native/babel-preset": "0.75.5",
+    "@react-native/eslint-config": "0.75.5",
+    "@react-native/metro-config": "0.75.5",
+    "@react-native/typescript-config": "0.75.5",
    "@tanstack/eslint-plugin-query": "^5.28.11",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.4.5",
@@ -192,7 +192,7 @@
    "react-native-accessibility-engine": "^3.2.0",
    "react-native-clean-project": "^4.0.3",
    "react-native-config-node": "^0.0.3",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
    "reassure": "^1.1.0",
    "tailwindcss": "^3.3.2",
    "ts-node": "^10.9.2",
--- a/src/components/ObsDetails/ActivityTab/FloatingButtons.js
+++ b/src/components/ObsDetails/ActivityTab/FloatingButtons.js
@@ -36,7 +36,7 @@ const FloatingButtons = ( {
      testID: "ObsDetail.commentButton",
      disabled: showAddCommentSheet,
      accessibilityHint: "Opens-add-comment-form",
-      className: "w-1/2 mx-6"
+      className: "w-[48%]"
    },
    {
      title: t( "SUGGEST-ID" ),
@@ -45,7 +45,7 @@ const FloatingButtons = ( {
      testID: "ObsDetail.cvSuggestionsButton",
      accessibilityHint: "Shows-identification-suggestions",
      accessibilityRole: "link",
-      className: "w-1/2 mx-6"
+      className: "w-[48%]"
    }
  ];

@@ -56,7 +56,7 @@ const FloatingButtons = ( {
    >
      <ButtonBar
        buttonConfiguration={buttons}
-        containerClass="justify-evenly p-[15px]"
+        containerClass="justify-between p-[15px]"
      />
    </View>
  );
--- a/src/components/ObsDetailsDefaultMode/CommunitySection/FloatingButtons.js
+++ b/src/components/ObsDetailsDefaultMode/CommunitySection/FloatingButtons.js
@@ -30,13 +30,13 @@ const FloatingButtons = ( {

  return (
    <View
-      className="flex-row justify-evenly bg-white pt-4 pb-4 px-6"
+      className="flex-row justify-between bg-white pt-4 pb-4 px-6"
      style={DROP_SHADOW}
    >
      <Button
        text={t( "COMMENT" )}
        onPress={openAddCommentSheet}
-        className="w-1/2 mx-6"
+        className="w-[48%]"
        testID="ObsDetail.commentButton"
        disabled={showAddCommentSheet}
        accessibilityHint={t( "Opens-add-comment-form" )}
@@ -44,7 +44,7 @@ const FloatingButtons = ( {
      <Button
        text={t( "SUGGEST-ID" )}
        onPress={navToSuggestions}
-        className="w-1/2 mx-6"
+        className="w-[48%]"
        testID="ObsDetail.cvSuggestionsButton"
        accessibilityRole="link"
        accessibilityHint={t( "Shows-identification-suggestions" )}
--- a/src/navigation/BottomTabNavigator/CustomTabBar.js
+++ b/src/navigation/BottomTabNavigator/CustomTabBar.js
@@ -29,7 +29,7 @@ const CustomTabBar = ( { tabs }: Props ): Node => {
    // Absolutely position the AddObsButton so it can float outside of the tab
    // bar
    (
-      <View className="w-[69px] h-[60px] mx-3" key="CustomTabBar-AddObs">
+      <View className="w-[69px] h-[60px]" key="CustomTabBar-AddObs">
        <View className="absolute top-[-13px]">
          <AddObsButton key="AddObsButton" />
        </View>
@@ -42,7 +42,7 @@ const CustomTabBar = ( { tabs }: Props ): Node => {
  return (
    <View
      className={classNames(
-        "flex-row bg-white justify-evenly p-1 m-0",
+        "flex-row bg-white justify-around p-1 m-0",
        { "pb-5": insets.bottom > 0 }
      )}
      style={DROP_SHADOW}
--- a/src/navigation/BottomTabNavigator/NavButton.js
+++ b/src/navigation/BottomTabNavigator/NavButton.js
@@ -73,7 +73,7 @@ const NavButton = ( {

  return (
    <Pressable
-      className="flex-column items-center w-[20%] justify-end"
+      className="flex-column items-center justify-end"
      onPress={onPress}
      key={`NavButton-${accessibilityLabel}`}
      accessibilityLabel={accessibilityLabel}
--- a/tests/unit/components/BottomTabNavigator/snapshots/CustomTabBar.test.js.snap
+++ b/tests/unit/components/BottomTabNavigator/snapshots/CustomTabBar.test.js.snap
@@ -30,7 +30,7 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
              "backgroundColor": "#ffffff",
            },
            {
-              "justifyContent": "space-evenly",
+              "justifyContent": "space-around",
            },
            {
              "paddingBottom": 4,
@@ -98,9 +98,6 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
              {
                "alignItems": "center",
              },
-              {
-                "width": "20%",
-              },
              {
                "justifyContent": "flex-end",
              },
@@ -242,9 +239,6 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
              {
                "alignItems": "center",
              },
-              {
-                "width": "20%",
-              },
              {
                "justifyContent": "flex-end",
              },
@@ -357,10 +351,6 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
              {
                "height": 60,
              },
-              {
-                "marginLeft": 12,
-                "marginRight": 12,
-              },
            ],
          ]
        }
@@ -559,9 +549,6 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
              {
                "alignItems": "center",
              },
-              {
-                "width": "20%",
-              },
              {
                "justifyContent": "flex-end",
              },
@@ -703,9 +690,6 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
              {
                "alignItems": "center",
              },
-              {
-                "width": "20%",
-              },
              {
                "justifyContent": "flex-end",
              },