Updating Example App to use React Native 0.81.1 (#3940)

* feat: Update example app to react-native 0.81.1

Updating expo optional dependency version

Updating example app dependencies to latest versions

Fixing yarn start command failing for example project

Importing SafeAreaView from react-native-safe-area-context to get rid of deprecation warnings for importing it from 'react-native'

* fix: examples UI and crashes and wrong behaviors

Fixing Earthquakes example, which was always crashing when tapping clusters. Improving modal presentations

Fixing examples: MapAndRNNavigation, TakeSnapshot, Yoyo, RestrictMapBounds, Compass, GeoJSONSource, QueryAtPoint, QueryWithRect, AnimatedLine, DriveTheLine, TakeSnapshot and DrawPolyline

Fixing AnimatedPoint page title

Fixing error in ShapeSourceIcon

Updating debounce dependency in the root package.json because otherwise debounce wouldn't work in the example app's MapView

* Fixing movePointShapeAnimatorModule create not a function error

* Earthquakes

Restoring Earthquakes in the examples docs

Restoring earthquakes in the Symbol/Circle layer examples sublist

* MapInModal component is presented both via react navigation and via react-native Modal component

* chore: Prettier

restoring prettier functionality and fixing a couple files

* CacheManagement

Making it a typescript-based component.

Wrapping it into an example group and adding it to the examples in the docs

* remove useless View wrapper from CacheManagement component

* Fix "Cannot read property 'imageKey' of undefined" error in Shape Source Icons example

* Turn ShapeSourceIcon.js to a tsx file.

Running yarn generate to update docs

Author: whiteHatCip

.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