Update react-native to v0.87.0 and jest to v30

android/app/build.gradle

@@ -115,7 +115,10 @@ android {
             signingConfig hasReleaseKeystore ? signingConfigs.release : signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             shrinkResources enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            // AGP 9 rejects "proguard-android.txt": it carries `-dontoptimize`, which
+            // suppresses most R8 optimization. The "-optimize" variant is the only
+            // default it still accepts.
+            proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
         }
     }
 }

android/build.gradle

@@ -5,7 +5,7 @@ buildscript {
         compileSdkVersion = 36
         targetSdkVersion = 36
         ndkVersion = "27.1.12297006"
-        kotlinVersion = "2.1.20"
+        kotlinVersion = "2.2.0"
     }
     repositories {
         google()

android/gradle.properties

@@ -47,3 +47,11 @@ hermesEnabled=true
 # This allows your app to draw behind system bars for an immersive UI.
 # Note: Only works with ReactActivity and should not be used with custom Activity.
 edgeToEdgeEnabled=false
+
+# AGP 9 registers its own `kotlin` extension and enables a new DSL by default.
+# React Native 0.87's app plugin still applies `org.jetbrains.kotlin.android`
+# itself, so leaving built-in Kotlin on fails configuration with "Cannot add
+# extension with name 'kotlin'". Opting out is what RN 0.87's own template does;
+# AGP 10 removes these flags, by which point RN is expected to have adopted both.
+android.builtInKotlin=false
+android.newDsl=false

android/gradle/wrapper/gradle-wrapper.properties

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

jest.config.js

@@ -1,3 +1,9 @@
+// Jest 30 note: @react-native/jest-preset 0.87 still declares jest-environment-node,
+// babel-jest and @jest/create-cache-key-function at ^29.7.0. Its testEnvironment
+// extends whichever jest-environment-node resolves next to the preset, so a v29
+// environment gets paired with jest-runtime 30 and every suite dies on
+// `this._moduleMocker.clearMocksOnScope is not a function`. The `overrides` block in
+// package.json forces those three to v30; remove it once RN's preset targets jest 30.
 module.exports = {
   preset: '@react-native/jest-preset',
   setupFiles: ['<rootDir>/jest.setup.js'],

package.json

@@ -15,22 +15,23 @@
   "dependencies": {
     "@apollo/client": "^4.0.0",
     "@bam.tech/react-native-image-resizer": "^3.0.11",
-    "@maplibre/maplibre-react-native": "^11.2.1",
-    "@react-native/new-app-screen": "0.86.0",
+    "@maplibre/maplibre-react-native": "^11.3.6",
+    "@react-native/new-app-screen": "0.87.0",
     "@react-navigation/native": "^7.2.5",
     "@react-navigation/native-stack": "^7.16.0",
     "graphql": "^17.0.0",
     "react": "19.2.3",
-    "react-native": "0.86.0",
+    "react-native": "0.87.0",
     "react-native-encrypted-storage": "^4.0.3",
     "react-native-image-picker": "^8.2.1",
     "react-native-safe-area-context": "^5.5.2",
-    "react-native-screens": "^4.25.2",
+    "react-native-screens": "^4.27.0",
     "react-native-view-shot": "^5.1.1",
     "rn-emoji-keyboard": "^1.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-export-namespace-from": "^7.25.9",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
     "@biomejs/biome": "^2.4.15",
@@ -40,18 +41,23 @@
     "@graphql-codegen/typescript-operations": "^6.1.5",
     "@react-native-community/cli": "20.2.0",
     "@react-native-community/cli-platform-android": "20.2.0",
-    "@react-native/babel-preset": "0.86.0",
-    "@react-native/jest-preset": "0.86.0",
-    "@react-native/metro-config": "0.86.0",
-    "@react-native/typescript-config": "0.86.0",
-    "@types/jest": "^29.5.13",
+    "@react-native/babel-preset": "0.87.0",
+    "@react-native/jest-preset": "0.87.0",
+    "@react-native/metro-config": "0.87.0",
+    "@react-native/typescript-config": "0.87.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.2.0",
     "@types/react-test-renderer": "^19.1.0",
-    "jest": "^29.6.3",
+    "jest": "^30.0.0",
     "react-test-renderer": "19.2.3",
     "typescript": "^7.0.0"
   },
   "engines": {
     "node": ">= 22.11.0"
+  },
+  "overrides": {
+    "jest-environment-node": "^30.0.0",
+    "babel-jest": "^30.0.0",
+    "@jest/create-cache-key-function": "^30.0.0"
   }
 }

renovate.json

@@ -3,10 +3,15 @@
   "extends": ["config:recommended"],
   "packageRules": [
     {
-      "description": "Pin Gradle to <9.4. React Native 0.85.3's bundled gradle-plugin (node_modules/@react-native/gradle-plugin) is compiled with Kotlin 2.1.20, whose compiler can only read Kotlin metadata up to 2.3. Gradle >=9.4 bundles a Kotlin 2.3.x stdlib (metadata 2.3.0) that leaks onto the settings-plugin compile classpath, so the build fails compiling the RN plugin (`Module was compiled with an incompatible version of Kotlin`). 9.3.1 (Kotlin 2.2.21) is the highest working version. Raise this ceiling once React Native ships a gradle-plugin built with Kotlin >=2.3.",
+      "description": "Pin Gradle to <9.7. React Native 0.87.0's bundled gradle-plugin (node_modules/@react-native/gradle-plugin) is compiled with Kotlin 2.2.0, whose compiler can only read Kotlin metadata up to 2.3.0. Gradle >=9.7 bundles a Kotlin 2.4.0 stdlib/reflect that leaks onto the settings-plugin compile classpath, so the build fails compiling the RN plugin (`Module was compiled with an incompatible version of Kotlin`). 9.6.1 is the highest version verified to configure cleanly; the wrapper tracks 9.4.1, the version RN 0.87 itself ships and builds against. Raise this ceiling once React Native ships a gradle-plugin built with Kotlin >=2.3.",
       "matchPackageNames": ["gradle"],
       "matchManagers": ["gradle-wrapper"],
-      "allowedVersions": "<9.4.0"
+      "allowedVersions": "<9.7.0"
+    },
+    {
+      "description": "Hold Babel at v7. @react-native/babel-preset (0.87.0) drives the whole RN transform and its plugin chain asserts `^7.0.0-0`, so loading it under @babel/core 8 throws `Requires Babel \"^7.0.0-0\", but was loaded with \"8.x\"` and every Jest suite fails to run. Metro, babel-jest and the RN preset each vendor their own @babel/core 7, so a top-level v8 only ever shadows them — there is nothing to gain until React Native itself moves to Babel 8. Note @babel/plugin-transform-export-namespace-from must stay on the same major as the core that loads it (babel.config.js applies it directly).",
+      "matchPackageNames": ["/^@babel\\//"],
+      "allowedVersions": "<8.0.0"
     },
     {
       "description": "Group the React Native core and its tooling — they are pinned to the same release and must bump atomically",

src/map/SearchOverlay.tsx

@@ -8,6 +8,7 @@ import {
   StyleSheet,
   Text,
   TextInput,
+  type TextInputInstance,
   View,
 } from 'react-native';
 import {SearchDocument, type SearchQuery} from '../graphql/__generated__/types';
@@ -43,7 +44,7 @@ export function SearchOverlay({
   const [expanded, setExpanded] = useState(false);
   const [text, setText] = useState('');
   const [submitted, setSubmitted] = useState(false);
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputInstance>(null);
   const [runSearch, {data, loading}] = useLazyQuery(SearchDocument, {
     fetchPolicy: 'network-only',
   });

src/map/usePinImages.tsx

@@ -1,6 +1,6 @@
 import type {ImageEntry} from '@maplibre/maplibre-react-native';
 import {type ReactElement, useCallback, useMemo, useRef, useState} from 'react';
-import {PixelRatio, StyleSheet, View} from 'react-native';
+import {PixelRatio, StyleSheet, View, type ViewInstance} from 'react-native';
 import {captureRef} from 'react-native-view-shot';
 import type {Theme} from '../theme/colors';
 import {PIN_SELECTED_SCALE, PinIcon} from './PinIcon';
@@ -45,7 +45,7 @@ export function usePinImages(
   // derived from `images` so a capture in flight isn't started twice and a
   // failed one isn't retried forever.
   const attempted = useRef(new Set<string>());
-  const hosts = useRef(new Map<string, View | null>());
+  const hosts = useRef(new Map<string, ViewInstance | null>());
 
   // A rasterised pin bakes in the colours it was drawn with, so those are part
   // of its name: switching appearance changes both, and the new pins get new

tsconfig.json

@@ -1,7 +1,19 @@
 {
   "extends": "@react-native/typescript-config",
   "compilerOptions": {
-    "types": ["jest"]
+    "types": ["jest"],
+    "paths": {
+      // react-native-view-shot's "react-native" export condition points at its
+      // raw `src/*.tsx`, so tsc typechecks the library itself — and 5.1.1 still
+      // types host refs as `View` and deep-imports `Libraries/Types/CodegenTypes`,
+      // both of which RN 0.87 removed. Point tsc at the published declarations
+      // instead: they describe the same API, and `skipLibCheck` skips their
+      // internals. Metro still bundles from `src/`, so runtime is unchanged.
+      // Drop this once view-shot ships RN 0.87 support.
+      "react-native-view-shot": [
+        "./node_modules/react-native-view-shot/lib/index.d.ts"
+      ]
+    }
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["**/node_modules", "**/Pods", "codegen.ts"]