Updating Example App to use React Native 0.81.1

.eslintrc.js

@@ -1,6 +1,12 @@
 module.exports = {
   root: true,
   parser: '@babel/eslint-parser',
+  parserOptions: {
+    ecmaFeatures: { jsx: true },
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    requireConfigFile: false,
+  },
   plugins: ['react', 'react-native', 'import'],
   env: {
     jest: true,
@@ -12,16 +18,10 @@ module.exports = {
     },
     'import/resolver': {
       node: {
-        extensions: ['.js', '.jsx'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
     },
     'import/ignore': ['react-native'],
-    parserOptions: {
-      ecmaFeatures: {
-        jsx: true,
-        modules: true,
-      },
-    },
   },
   globals: {
     fetch: true,
@@ -40,7 +40,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:jest/recommended',
     '@react-native',
-    'prettier',
+    'plugin:prettier/recommended',
   ],
   rules: {
     'react/no-deprecated': 'warn',
@@ -78,14 +78,26 @@ module.exports = {
     'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
     'react-native/no-inline-styles': 0,
-    '@typescript-eslint/no-explicit-any': ['error', { ignoreRestArgs: true }],
+    // NOTE: @typescript-eslint rules are configured under the TS override below
+    'jest/expect-expect': [
+      'warn',
+      {
+        assertFunctionNames: [
+          'expect',
+          'verifyFilterItem',
+          'verifyErrorFilterItem',
+          'verifyErrorThrown',
+        ],
+      },
+    ],
+    'prettier/prettier': 'warn',
   },
   ignorePatterns: ['**/rnmapbox.web.symlink', 'plugin/build/', 'example/dist'],
   overrides: [
     {
       // Match TypeScript Files
       files: ['**/*.{ts,tsx}'],
-
+      parser: '@typescript-eslint/parser',
       parserOptions: {
         project: [
           './tsconfig.json',
@@ -94,19 +106,26 @@ module.exports = {
           './plugin/tsconfig.eslint.json',
           './plugin/src/__tests__/tsconfig.eslint.json',
         ],
+        tsconfigRootDir: __dirname,
+        sourceType: 'module',
       },
       plugins: ['@typescript-eslint'],
       extends: [
         'eslint:recommended',
         'plugin:react/recommended',
         '@react-native',
         'plugin:@typescript-eslint/recommended',
-        'prettier',
+        'plugin:prettier/recommended', // keep last
       ],
       rules: {
         'no-shadow': 'off',
         'import/named': 'off',
         'react-native/no-inline-styles': 0,
+        '@typescript-eslint/no-explicit-any': [
+          'warn',
+          { ignoreRestArgs: true },
+        ],
+        'prettier/prettier': 'warn',
       },
     },
   ],

docs/examples.json

@@ -1,4 +1,31 @@
 [
+  {
+    "groupName": "CacheManagement",
+    "metadata": {
+      "title": "CacheManagement"
+    },
+    "examples": [
+      {
+        "metadata": {
+          "title": "CacheManagement",
+          "tags": [
+            "Cache",
+            "Cache Management",
+            "Offline Manager",
+            "Offline Packs",
+            "Validate Cache",
+            "Invalidate Cache",
+            "Get Cache Size",
+            "Set Max Cache Size"
+          ],
+          "docs": "\nManages map cache.\n\nUses the offline manager to manage the cache and the local storage in general. Shows how to invalidate cache to remove outdated tiles, how to clear the entire local storage from tiles and offline packs and to visualize the local storage usage amount.\n"
+        },
+        "fullPath": "example/src/examples/CacheManagement/CacheManagement.tsx",
+        "relPath": "CacheManagement/CacheManagement.tsx",
+        "name": "CacheManagement"
+      }
+    ]
+  },
   {
     "groupName": "SymbolCircleLayer",
     "metadata": {
@@ -97,8 +124,8 @@
           ],
           "docs": "\nRender icons with various methods.\n\n* pin-rn: Rendered with a React Native View\n* pin: Rendered with a native asset image\n* pin3: Resolved as a result of onImageMissing\n* example: Rendered with a js asset image (require)\n\n"
         },
-        "fullPath": "example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js",
-        "relPath": "SymbolCircleLayer/ShapeSourceIcon.js",
+        "fullPath": "example/src/examples/SymbolCircleLayer/ShapeSourceIcon.tsx",
+        "relPath": "SymbolCircleLayer/ShapeSourceIcon.tsx",
         "name": "ShapeSourceIcon"
       }
     ]

example/Gemfile.lock

@@ -5,7 +5,7 @@ GEM
       base64
       nkf
       rexml
-    activesupport (7.1.5.1)
+    activesupport (7.1.5.2)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -24,9 +24,9 @@ GEM
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
-    base64 (0.2.0)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    base64 (0.3.0)
+    benchmark (0.4.1)
+    bigdecimal (3.2.2)
     claide (1.1.0)
     cocoapods (1.15.2)
       addressable (~> 2.8)
@@ -67,10 +67,10 @@ GEM
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
     concurrent-ruby (1.3.3)
-    connection_pool (2.5.3)
-    drb (2.2.1)
+    connection_pool (2.5.4)
+    drb (2.2.3)
     escape (0.0.4)
-    ethon (0.16.0)
+    ethon (0.15.0)
       ffi (>= 1.15.0)
     ffi (1.17.2)
     fourflusher (2.3.1)
@@ -80,7 +80,7 @@ GEM
       mutex_m
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.11.3)
+    json (2.13.2)
     logger (1.7.0)
     minitest (5.25.5)
     molinillo (0.8.0)
@@ -90,11 +90,11 @@ GEM
     netrc (0.11.0)
     nkf (0.2.0)
     public_suffix (4.0.7)
-    rexml (3.4.1)
+    rexml (3.4.2)
     ruby-macho (2.5.1)
     securerandom (0.3.2)
-    typhoeus (1.4.1)
-      ethon (>= 0.9.0)
+    typhoeus (1.5.0)
+      ethon (>= 0.9.0, < 0.16.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     xcodeproj (1.25.1)

example/__tests__/dumpExamplesJson.ts

@@ -4,6 +4,7 @@
 import path from 'path';
 import fs from 'fs';
 
+import * as CacheManagement from '../src/examples/CacheManagement';
 import * as SymbolCircleLayer from '../src/examples/SymbolCircleLayer';
 import * as UserLocation from '../src/examples/UserLocation';
 import * as Map from '../src/examples/Map';
@@ -30,6 +31,7 @@ jest.mock('../src/assets/sportcar.glb', () => null, {
 });
 
 const allTests = {
+  CacheManagement,
   SymbolCircleLayer,
   UserLocation,
   Map,
@@ -51,11 +53,11 @@ function getExampleFullPath(
   const relPathBase = path.join(groupName, testName);
 
   const existingExamplePaths = extensions
-    .map((ext) => ({
+    .map(ext => ({
       relPath: `${relPathBase}.${ext}`,
       fullPath: path.join(relExamplesPath, `${relPathBase}.${ext}`),
     }))
-    .filter(({ relPath, fullPath }) =>
+    .filter(({ relPath: _relPath, fullPath }) =>
       fs.existsSync(path.join(mapsRootPath, fullPath)),
     );
   if (existingExamplePaths.length === 0) {
@@ -81,7 +83,7 @@ type AllTestKeys = keyof typeof allTests;
 
 const allTestKeys = Object.keys(allTests) as AllTestKeys[];
 
-allTestKeys.forEach((groupName) => {
+allTestKeys.forEach(groupName => {
   const { metadata, ...tests } = allTests[groupName];
   const examples: Example[] = [];
   Object.entries(tests).forEach(([testName, test]) => {

example/android/build.gradle

@@ -28,10 +28,10 @@ buildscript {
             }
         }
 
-        buildToolsVersion = "35.0.0"
+        buildToolsVersion = "36.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 35
-        targetSdkVersion = 35
+        compileSdkVersion = 36
+        targetSdkVersion = 36
         kotlinVersion = "2.1.20"
         ndkVersion = "27.1.12297006"
     }

example/android/gradle.properties

@@ -39,3 +39,8 @@ newArchEnabled=true
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# 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

example/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.14.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME