Rn76 up

.github/workflows/ci-for-forked-repos.yml

@@ -8,7 +8,7 @@ jobs:
     name: "CI requiring tokens"
     uses: ./.github/workflows/ci-requiring-tokens.yml
     with:
-      NVMRC: v18.18.0
+      NVMRC: v20.14.0
       env_name: CI with Mapbox Tokens
       ref: ${{ github.event.pull_request.head.sha }}
     secrets:

.github/workflows/ios-actions.yml

@@ -9,7 +9,7 @@ on:
         type: string
       ref:
         required: false
-        type: string 
+        type: string
       NVMRC:
         required: true
         type: string
@@ -48,7 +48,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         if: ${{ inputs.ref == '' }}
-      
+
       - name: Checkout fork
         uses: actions/checkout@v4
         if: ${{ inputs.ref != '' }}
@@ -133,7 +133,7 @@ jobs:
           SKIP_TESTS_NO_METAL: ${{ inputs.MAP_IMPL == 'mapbox' || inputs.MAP_IMPL == 'mapbox11' }}
 
       - name: Store Detox artifacts on test failure
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: detox-artifacts

.nvmrc

@@ -1,2 +1,2 @@
-v18.18.0
+v20.14.0
 

__tests__/__mocks__/react-native.mock.js

@@ -4,6 +4,7 @@ jest.mock('react-native/Libraries/Image/resolveAssetSource', () => {
 
 jest.mock('../../src/assets/heading.png', () => 'heading.png');
 
+
 jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => {
   function MockEventEmitter() {}
   MockEventEmitter.prototype.addListener = jest.fn(() => ({
@@ -28,10 +29,11 @@ jest.mock('react-native/Libraries/Utilities/Platform', () => ({
   },
 }));
 
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper', () => ({
+jest.mock('react-native/src/private/animated/NativeAnimatedHelper', () => ({
   addListener: jest.fn(),
   API: {
     flushQueue: jest.fn(),
   },
   shouldUseNativeDriver: jest.fn(),
 }));
+

__tests__/components/UserLocation.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
+import { render, fireEvent, act } from '@testing-library/react-native';
 
 import UserLocation from '../../src/components/UserLocation';
 import { ShapeSource } from '../../src/components/ShapeSource';
@@ -39,6 +39,7 @@
 
     test('renders with CircleLayers by default', async () => {
       const { UNSAFE_getAllByType } = await render(<UserLocation />);
+      await act(async () => {})
 
       const shapeSource = UNSAFE_getAllByType(ShapeSource);
       const circleLayer = UNSAFE_getAllByType(CircleLayer);
@@ -51,6 +52,7 @@
       const { UNSAFE_queryByType } = await render(
         <UserLocation visible={false} />,
       );
+      await act(async () => {})
 
       const shapeSource = UNSAFE_queryByType(ShapeSource);
       const circleLayer = UNSAFE_queryByType(CircleLayer);
@@ -61,7 +63,6 @@
 
     test('renders with CustomChild when provided', async () => {
       const circleLayerProps = {
-        key: 'testUserLocationCircle',
         id: 'testUserLocationCircle',
         style: {
           circleRadius: 5,
@@ -71,11 +72,11 @@
         },
       };
 
-      const { UNSAFE_queryByType, UNSAFE_queryAllByType } = await render(
-        <UserLocation>
-          <CircleLayer {...circleLayerProps} />
-        </UserLocation>,
-      );
+      const { UNSAFE_queryByType, UNSAFE_queryAllByType } = await render(<UserLocation>
+        <CircleLayer key='testUserLocationCircle' {...circleLayerProps} />
+      </UserLocation>)
+      await act(async () => {
+      })
 
       const shapeSource = UNSAFE_queryByType(ShapeSource);
       const circleLayer = UNSAFE_queryAllByType(CircleLayer);
@@ -167,7 +168,7 @@
       expect(ul.locationManagerRunning).toStrictEqual(false);
     });
 
     // TODO: replace object { running: boolean } argument with simple boolean
     describe('#setLocationManager', () => {
       test('called with "running" true', async () => {
         const lastKnownLocation = [4.1036916, 51.5462244];

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['@react-native/babel-preset'],
   plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
   env: {
     production: {

example/.nvmrc

@@ -1,2 +1,2 @@
-v18.18.0
+v20.14.0
 

example/android/build.gradle

@@ -33,7 +33,7 @@ buildscript {
         compileSdkVersion = 35
         targetSdkVersion = 34
         ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.24"
+        kotlinVersion = "1.9.25"
     }
     repositories {
         google()

example/android/gradle.properties

@@ -34,7 +34,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.

example/package.json

@@ -19,10 +19,10 @@
   "dependencies": {
     "@mapbox/geo-viewport": "^0.5.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
-    "@react-native-async-storage/async-storage": "^1.22.3",
+    "@react-native-async-storage/async-storage": "^2.1.1",
     "@react-navigation/compat": "^5.3.20",
-    "@react-navigation/native": "^6.0.17",
-    "@react-navigation/native-stack": "^6.9.26",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native-stack": "^6.11.0",
     "@rneui/base": "^4.0.0-rc.6",
     "@rnmapbox/maps": "link:../",
     "@turf/along": "^6.5.0",
@@ -38,9 +38,9 @@
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "18.3.1",
-    "react-native": "0.76.0",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "3.35.0",
+    "react-native": "0.76.6",
+    "react-native-safe-area-context": "5.2.0",
+    "react-native-screens": "4.6.0",
     "react-native-vector-icons": "9.2.0"
   },
   "optionalDependencies": {
@@ -55,14 +55,14 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "15.0.0-alpha.2",
-    "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
-    "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
-    "@react-native/babel-preset": "0.76.0",
-    "@react-native/eslint-config": "0.76.0",
-    "@react-native/metro-config": "0.76.0",
-    "@react-native/typescript-config": "0.76.0",
-    "@types/react": "^18.2.45",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native/babel-preset": "0.76.7",
+    "@react-native/eslint-config": "0.76.7",
+    "@react-native/metro-config": "0.76.7",
+    "@react-native/typescript-config": "0.76.7",
+    "@types/react": "^18.3.1",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "babel-plugin-module-resolver": "^5.0.0",

jest.config.ts

@@ -2,7 +2,7 @@ import type { Config } from 'jest';
 
 const config: Config = {
   verbose: true,
-  preset: '@testing-library/react-native',
+  preset: 'react-native',
   roots: ['__tests__/'],
   setupFilesAfterEnv: [
     './setup-jest.js',

package.json

@@ -83,21 +83,22 @@
     "debounce": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.19.1",
+    "@babel/core": "7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/helper-split-export-declaration": "7.24.7",
     "@babel/helper-hoist-variables": "7.24.7",
     "@babel/helper-function-name": "7.24.7",
-    "@babel/runtime": "7.19.0",
-    "@react-native/eslint-config": "^0.72.2",
+    "@babel/runtime": "7.25.0",
+    "@react-native/eslint-config": "^0.76.7",
     "@sinonjs/fake-timers": "^8.0.1",
-    "@testing-library/react-native": "^12.4.0",
+    "@testing-library/react-native": "^13.0.1",
     "@types/debounce": "^1.2.1",
     "@types/mapbox-gl": "^2.7.5",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
-    "babel-jest": "^29.6.3",
+    "babel-jest": "^29.7.0",
     "documentation": "14.0.0",
     "ejs": "^3.1.3",
     "ejs-lint": "^1.1.0",
@@ -106,24 +107,27 @@
     "eslint-plugin-ft-flow": "^2.0.3",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-jest": "^27.0.1",
-    "expo": "^47.0.0",
+    "expo": "^51.0.18",
     "expo-module-scripts": "^3.0.4",
     "husky": "^8.0.1",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "lint-staged": "^12.1.2",
     "mapbox-gl": "^2.9.0",
-    "metro-react-native-babel-preset": "0.71.1",
+    "@react-native/babel-preset": "0.76.7",
     "node-dir": "0.1.17",
     "prettier": "2.7.1",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist-react-docgen-v6",
-    "react-native": "0.73.0-rc.4",
-    "react-native-builder-bob": "^0.23.1",
-    "react-test-renderer": "18.2.0",
+    "to-fast-properties": "3.0.1",
+    "react-native": "0.76.7",
+    "react-native-builder-bob": "^0.36.0",
+    "react-test-renderer": "18.3.1",
     "ts-node": "10.9.1",
     "typescript": "5.1.3",
-    "@mdx-js/mdx": "^3.0.0"
+    "@mdx-js/mdx": "^3.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.0.0"
   },
   "codegenConfig": {
     "name": "rnmapbox_maps_specs",

src/components/SymbolLayer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { View, NativeModules } from 'react-native';
 
 import {

src/web/components/MapView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import mapboxgl from 'mapbox-gl';
 
 import MapContext from '../MapContext';
@@ -34,7 +34,9 @@ class MapView extends React.Component<
     return (
       <div
         style={{ width: '100%', height: '100%' }}
-        ref={(el) => (this.mapContainer = el)}
+        ref={(el) => {
+          this.mapContainer = el;
+        }}
       >
         {map && (
           <div style={{ position: 'absolute' }}>