@rnmapbox/maps 10.0.0-beta.33 → 10.0.0-beta.35

package/javascript/index.js

@@ -29,11 +29,13 @@ import offlineManager from './modules/offline/offlineManager';
 import snapshotManager from './modules/snapshot/snapshotManager';
 import MarkerView from './components/MarkerView';
 import Animated from './utils/animated/Animated';
-import AnimatedMapPoint from './utils/animated/AnimatedPoint';
-import AnimatedShape from './utils/animated/AnimatedShape';
-import AnimatedCoordinatesArray from './utils/animated/AnimatedCoordinatesArray';
-import AnimatedExtractCoordinateFromArray from './utils/animated/AnimatedExtractCoordinateFromArray';
-import AnimatedRouteCoordinatesArray from './utils/animated/AnimatedRouteCoordinatesArray';
+import {
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedPoint,
+  AnimatedRouteCoordinatesArray,
+  AnimatedShape,
+} from './classes';
 import Style from './components/Style';
 import Logger from './utils/Logger';
 import { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions';
@@ -53,6 +55,15 @@ MapboxGL.UserLocation = UserLocation;
 MapboxGL.Camera = Camera;
 MapboxGL.Style = Style;
 
+// classes
+MapboxGL.AnimatedPoint = AnimatedPoint;
+MapboxGL.AnimatedMapPoint = AnimatedPoint; // For backwards compatibiilty.
+MapboxGL.AnimatedShape = AnimatedShape;
+MapboxGL.AnimatedCoordinatesArray = AnimatedCoordinatesArray;
+MapboxGL.AnimatedExtractCoordinateFromArray =
+  AnimatedExtractCoordinateFromArray;
+MapboxGL.AnimatedRouteCoordinatesArray = AnimatedRouteCoordinatesArray;
+
 // annotations
 MapboxGL.Annotation = Annotation;
 MapboxGL.MarkerView = MarkerView;
@@ -86,18 +97,17 @@ MapboxGL.snapshotManager = snapshotManager;
 
 // animated
 MapboxGL.Animated = Animated;
+MapboxGL.Animated.RouteCoordinatesArray = AnimatedRouteCoordinatesArray; // For backwards compatibiilty.
+MapboxGL.Animated.ExtractCoordinateFromArray =
+  AnimatedExtractCoordinateFromArray; // For backwards compatibiilty.
 
 // utils
-MapboxGL.AnimatedPoint = AnimatedMapPoint;
-MapboxGL.AnimatedCoordinatesArray = AnimatedCoordinatesArray;
-MapboxGL.AnimatedExtractCoordinateFromArray =
-  AnimatedExtractCoordinateFromArray;
-MapboxGL.AnimatedRouteCoordinatesArray = AnimatedRouteCoordinatesArray;
-MapboxGL.AnimatedShape = AnimatedShape;
 MapboxGL.Logger = Logger;
 
 const { LineJoin } = MapboxGL;
 
+const AnimatedMapPoint = AnimatedPoint; // For backwards compatibiilty.
+
 export {
   MapView,
   Light,
@@ -124,12 +134,15 @@ export {
   BackgroundLayer,
   Terrain,
   Atmosphere,
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedPoint,
+  AnimatedMapPoint,
+  AnimatedRouteCoordinatesArray,
+  AnimatedShape,
   locationManager,
   offlineManager,
   snapshotManager,
-  AnimatedMapPoint,
-  AnimatedCoordinatesArray,
-  AnimatedShape,
   Animated,
   LineJoin,
   Logger,

package/javascript/types/index.ts

@@ -31,7 +31,7 @@ export interface AnimatedPoint extends GeoJsonObject {
   coordinates: (Animated.Value | number)[];
 }
 
-export interface AnimatedLineString extends GeoJsonObject {
+export interface AnimatedShape extends GeoJsonObject {
   readonly type: 'LineString';
   coordinates: (Animated.Value | number)[][];
 }

package/javascript/utils/BridgeValue.ts

@@ -0,0 +1,89 @@
+import { isBoolean, isNumber, isString } from './index';
+
+export type RawValueType =
+  | string
+  | number
+  | boolean
+  | RawValueType[]
+  | { [key: string]: RawValueType };
+
+export type StyleValueJSON =
+  | { type: 'boolean'; value: boolean }
+  | { type: 'number'; value: number }
+  | { type: 'string'; value: string }
+  | { type: 'hashmap'; value: object }
+  | { type: 'array'; value: unknown[] };
+
+type StyleValueTypes = 'boolean' | 'number' | 'string' | 'hashmap' | 'array';
+
+export default class BridgeValue {
+  rawValue: RawValueType;
+
+  constructor(rawValue: RawValueType) {
+    this.rawValue = rawValue;
+  }
+
+  get type(): StyleValueTypes {
+    if (Array.isArray(this.rawValue)) {
+      return 'array';
+    }
+    if (isBoolean(this.rawValue)) {
+      return 'boolean';
+    }
+    if (isNumber(this.rawValue)) {
+      return 'number';
+    }
+    if (isString(this.rawValue)) {
+      return 'string';
+    }
+    if (this.rawValue && typeof this.rawValue === 'object') {
+      return 'hashmap';
+    }
+    throw new Error(
+      `[type - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
+    );
+  }
+
+  get value() {
+    const { type } = this;
+
+    let value;
+
+    if (type === 'array') {
+      value = [];
+
+      const rawValue = this.rawValue as RawValueType[];
+      for (const innerRawValue of rawValue) {
+        const bridgeValue = new BridgeValue(innerRawValue);
+        value.push(bridgeValue.toJSON());
+      }
+    } else if (type === 'hashmap') {
+      value = [];
+
+      const rawValue = this.rawValue as { [key: string]: RawValueType };
+      const stringKeys = Object.keys(rawValue);
+      for (const stringKey of stringKeys) {
+        value.push([
+          new BridgeValue(stringKey).toJSON(),
+          new BridgeValue(rawValue[stringKey]).toJSON(),
+        ]);
+      }
+    } else if (type === 'boolean' || type === 'number' || type === 'string') {
+      value = this.rawValue;
+    } else {
+      throw new Error(
+        `[value - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
+      );
+    }
+
+    return value;
+  }
+
+  toJSON(formatter?: <T>(arg0: T) => T): StyleValueJSON {
+    return {
+      type: this.type,
+      value:
+        typeof formatter === 'function' ? formatter(this.value) : this.value,
+    } as StyleValueJSON;
+  }
+}

package/javascript/utils/StyleValue.ts

@@ -1,16 +1,20 @@
-import { Image, processColor } from 'react-native';
+import {
+  Image,
+  ImageResolvedAssetSource,
+  processColor,
+  ProcessedColorValue,
+} from 'react-native';
 
 import { getStyleType } from './styleMap';
-import BridgeValue from './BridgeValue';
+import BridgeValue, {
+  type StyleValueJSON,
+  type RawValueType,
+} from './BridgeValue';
 import { AllLayerStyleProps } from './MapboxStyles';
 
-type StyleValueArray = { type: 'array'; value: [any] };
-type StyleValueNumber = { type: 'number'; value: number };
-type StyleValueString = { type: 'string'; value: string };
-
 export type StyleValue = {
   styletype: string;
-  stylevalue: StyleValueArray | StyleValueNumber | StyleValueString;
+  stylevalue: StyleValueJSON;
 };
 
 export function transformStyle(
@@ -24,12 +28,19 @@ export function transformStyle(
   const styleProps = Object.keys(style) as Array<keyof typeof style>;
   for (const styleProp of styleProps) {
     const styleType = getStyleType(styleProp);
-    let rawStyle: unknown = style[styleProp];
+    let rawStyle: RawValueType = style[styleProp];
 
     if (styleType === 'color' && typeof rawStyle === 'string') {
-      rawStyle = processColor(rawStyle);
+      const color = processColor(rawStyle);
+      if (color === null || color === undefined || typeof color === 'symbol') {
+        console.error(`RNMapbox: Invalid color value: ${rawStyle} using red`);
+        rawStyle = 'ff0000';
+      } else {
+        rawStyle = color;
+      }
     } else if (styleType === 'image' && typeof rawStyle === 'number') {
-      rawStyle = Image.resolveAssetSource(rawStyle) || {};
+      rawStyle =
+        (Image.resolveAssetSource(rawStyle) as unknown as RawValueType) || {};
     }
 
     const bridgeValue = new BridgeValue(rawStyle);

package/javascript/utils/animated/Animated.js

@@ -10,11 +10,6 @@ import SymbolLayer from '../../components/SymbolLayer';
 import RasterLayer from '../../components/RasterLayer';
 import BackgroundLayer from '../../components/BackgroundLayer';
 
-import AnimatedShape from './AnimatedShape';
-import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
-import AnimatedExtractCoordinateFromArray from './AnimatedExtractCoordinateFromArray';
-import AnimatedRouteCoordinatesArray from './AnimatedRouteCoordinatesArray';
-
 const Animated = {
   // sources
   ShapeSource: RNAnimated.createAnimatedComponent(ShapeSource),
@@ -28,12 +23,6 @@ const Animated = {
   SymbolLayer: RNAnimated.createAnimatedComponent(SymbolLayer),
   RasterLayer: RNAnimated.createAnimatedComponent(RasterLayer),
   BackgroundLayer: RNAnimated.createAnimatedComponent(BackgroundLayer),
-
-  // values
-  CoordinatesArray: AnimatedCoordinatesArray,
-  RouteCoordinatesArray: AnimatedRouteCoordinatesArray,
-  Shape: AnimatedShape,
-  ExtractCoordinateFromArray: AnimatedExtractCoordinateFromArray,
 };
 
 export default Animated;

package/javascript/utils/deprecation.js

@@ -12,7 +12,6 @@ export function copyPropertiesAsDeprecated(
   const result = newObject;
   for (const [key, value] of Object.entries(origObject)) {
     if (!newObject[key]) {
-      // eslint-disable-next-line fp/no-mutating-methods
       Object.defineProperty(result, key, {
         get() {
           onDeprecatedCalled(key);

package/javascript/utils/geoUtils.d.ts

@@ -0,0 +1,10 @@
+export function makeLatLngBounds<G = Geometry, P = Properties>(
+  northEastCoordinates: Position[],
+  southWestCoordinates: Position[],
+): FeatureCollection<G, P>;
+
+export function makePoint<P = Properties>(
+  coordinates: Position,
+  properties?: P,
+  options?: PositionsOptions,
+): Feature<GeoJSON.Point, P>;

package/javascript/utils/index.d.ts

@@ -0,0 +1,6 @@
+export function isAndroid(): boolean;
+export function isBoolean(_: unknown): boolean;
+export function isNumber(_: unknown): boolean;
+export function isString(_: unknown): boolean;
+
+export function toJSONString(_: unknown): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.33",
+  "version": "10.0.0-beta.35",
   "publishConfig": {
     "access": "public"
   },
@@ -36,18 +36,21 @@
     "prepare": "husky install"
   },
   "peerDependencies": {
+    "expo": "*",
+    "mapbox-gl": "^ 2.9.0",
     "prop-types": ">=15.5.8",
     "react": ">=16.6.1",
-    "react-native": ">=0.59.9",
-    "mapbox-gl": "^ 2.9.0"
+    "react-native": ">=0.59.9"
   },
   "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    },
     "mapbox-gl": {
       "optional": true
     }
   },
   "dependencies": {
-    "@expo/config-plugins": "^4.0.3",
     "@mapbox/geo-viewport": ">= 0.4.0",
     "@turf/along": "6.5.0",
     "@turf/distance": "6.5.0",
@@ -65,34 +68,34 @@
     "@babel/runtime": "7.17.2",
     "@react-native-community/eslint-config": "^3.0.1",
     "@sinonjs/fake-timers": "^8.0.1",
-    "@testing-library/react-native": "^8.0.0",
+    "@testing-library/react-native": "^11.0.0",
     "@types/mapbox-gl": "^2.7.5",
     "@types/react-native": ">=0.59.9",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "babel-jest": "^27.5.1",
     "documentation": "13.2.5",
     "ejs": "^3.1.3",
     "ejs-lint": "^1.1.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-fp": "^2.3.0",
+    "eslint-plugin-ft-flow": "^2.0.1",
     "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-jest": "^27.0.1",
     "expo-module-scripts": "^2.0.0",
     "husky": "^8.0.1",
     "jest": "27.5.1",
     "jest-cli": "27.5.1",
     "lint-staged": "^12.1.2",
+    "mapbox-gl": "^2.9.0",
     "metro-react-native-babel-preset": "0.71.1",
     "node-dir": "0.1.17",
     "prettier": "2.6.2",
     "react": "17.0.2",
-    "react-docgen": "6.0.0-alpha.3",
+    "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
     "react-native": "0.67.0",
     "react-test-renderer": "17.0.2",
-    "typescript": "^4.4.3",
-    "mapbox-gl": "^ 2.9.0"
+    "typescript": "^4.8.0"
   },
   "jest": {
     "preset": "react-native",

package/plugin/build/withMapbox.js

@@ -150,7 +150,6 @@ const withAndroidPropertiesDownloadToken = (config, { RNMapboxMapsDownloadToken
                 }
                 return true;
             });
-            // eslint-disable-next-line fp/no-mutating-methods
             config.modResults.push({
                 type: 'property',
                 key,
@@ -173,7 +172,6 @@ const withAndroidPropertiesImpl2 = (config, { RNMapboxMapsImpl }) => {
                 }
                 return true;
             });
-            // eslint-disable-next-line fp/no-mutating-methods
             config.modResults.push({
                 type: 'property',
                 key: key,

package/plugin/install.md

@@ -1,14 +1,21 @@
-# Expo installation
+# Expo Installation
 
-> This package cannot be used in the "Expo Go" app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).
+> :warning: This package cannot be used in the "Expo Go" app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).
 
-First install the package with yarn, npm, or [`expo install rnmapbox/maps#main`](https://docs.expo.io/workflow/expo-cli/#expo-install).
+First install the package with [`expo`](https://docs.expo.io/workflow/expo-cli/#expo-install), [`yarn`or `npm`](../README.md#step-1---install-package).
 
+Install the latest release:
 ```sh
-expo install rnmapbox/maps#main
+expo install @rnmapbox/maps
 ```
 
-After installing this npm package, add the [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.json` or `app.config.js`:
+## Installing other versions
+Replace `@rnmapbox/maps` with the following to install other versions:
+- `rnmapbox/maps#main` installs the latest source from git
+
+## Plugin Configuration
+
+After installing this package, add the [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.{json,config.js,config.ts}`:
 
 ```json
 {
@@ -36,7 +43,7 @@ For `mapbox` or `mapbox-gl` you'll need to provide `RNMapboxMapsDownloadToken` a
       [
         "@rnmapbox/maps",
         {
-          "RNMapboxMapsImpl": "maplibre",
+          "RNMapboxMapsImpl": "mapbox",
           "RNMapboxMapsDownloadToken": "sk.ey...qg"
         }
       ]

package/rnmapbox-maps.podspec

@@ -20,7 +20,7 @@ require 'json'
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 ## Warning: these lines are scanned by autogenerate.js
-rnMapboxMapsDefaultMapboxVersion = '~> 10.7.0'
+rnMapboxMapsDefaultMapboxVersion = '~> 10.8.1'
 rnMapboxMapsDefaultMapboxGLVersion = '~> 5.9.0'
 rnMapboxMapsDefaultMapLibreVersion = 'exactVersion 5.12.1'
 

package/scripts/autogenHelpers/DocJSONBuilder.js

@@ -143,6 +143,42 @@ class DocJSONBuilder {
       }
     }
 
+    function tsTypeDescType(tsType) {
+      if (!tsType?.name) {
+        return null;
+      }
+
+      if (tsType.name === 'signature') {
+        const { properties } = tsType.signature;
+        const value = properties.map((kv) => {
+          return mapProp(
+            mapNestedProp({ ...kv.value, description: kv.description }),
+            kv.key,
+            false,
+          );
+        });
+        return { name: 'shape', value };
+        /*
+        if (tsType.raw.length < 200) {
+          return `${tsType.raw
+            .replace(/(\n|\s)/g, '')
+            .replace(/(\|)/g, '\\|')}`;
+        } else {
+          return 'FIX ME FORMAT BIG OBJECT';
+        } */
+      } else if (tsType.name === 'union') {
+        if (tsType.raw) {
+          // Props
+          return tsType.raw.replace(/\|/g, '\\|');
+        } else if (tsType.elements) {
+          // Methods
+          return tsType.elements.map((e) => e.name).join(' \\| ');
+        }
+      } else {
+        return tsType.name;
+      }
+    }
+
     function mapProp(propMeta, propName, array) {
       let result = {};
       if (!array) {
@@ -151,7 +187,7 @@ class DocJSONBuilder {
           required: propMeta.required || false,
           type:
             propMeta.type?.name ||
-            tsTypeDesc(propMeta.tsType) ||
+            tsTypeDescType(propMeta.tsType) ||
             'FIX ME UNKNOWN TYPE',
           default: !propMeta.defaultValue
             ? 'none'
@@ -167,7 +203,7 @@ class DocJSONBuilder {
         }
         result.type =
           (propMeta.type && propMeta.type.name) ||
-          tsTypeDesc(propMeta.tsType) ||
+          tsTypeDescType(propMeta.tsType) ||
           'FIX ME UNKNOWN TYPE';
         if (propMeta.defaultValue) {
           result.default = propMeta.defaultValue.value.replace(/\n/g, '');
@@ -276,9 +312,12 @@ class DocJSONBuilder {
             return;
           }
 
-          let parsed = docgen.parse(content, undefined, undefined, {
-            filename: fileName,
+          let parsedComponents = docgen.parse(content, {
+            babelOptions: {
+              filename: fileName,
+            },
           });
+          let [parsed] = parsedComponents;
           fileName = fileName.replace(fileExtensionsRegex, '');
           parsed.fileNameWithExt = fileNameWithExt;
           results[fileName] = parsed;

package/scripts/autogenHelpers/globals.js

@@ -1,5 +1,3 @@
-/* eslint-disable fp/no-mutating-methods */
-
 let iosPropNameOverrides = {};
 
 const iosSpecOverrides = {

package/scripts/autogenerate.js

@@ -1,4 +1,3 @@
-/* eslint-disable fp/no-mutating-methods */
 require('./autogenHelpers/globals');
 
 const fs = require('fs');
@@ -498,7 +497,7 @@ async function generate() {
   });
 
   // autogenerate expo plugin
-  execSync('yarn build:plugin');
+  execSync('yarn build:plugin', { stdio: 'inherit' });
   outputPaths.push('plugin/build');
 
   // autogenerate docs

package/scripts/templates/component.md.ejs

@@ -2,24 +2,24 @@
   const component = locals.component;
 -%>
 <!-- This file was autogenerated from <%- component.fileNameWithExt %> do not modify -->
-## <MapboxGL.<%- component.name %> />
-### <%- replaceNewLine(component.description) %>
+# <MapboxGL.<%- component.name %> />
+<%- component.description %>
 
 <%_ if (component.props && component.props.length) { _%>
-### props
+## props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 <%- propMarkdownTableRows(component) %>
 <%_ } _%>
 
 <%_ if (component.methods && component.methods.length) { _%>
-### methods
+## methods
 <%_ for (let method of component.methods) { _%>
-#### <%- getMarkdownMethodSignature(method) %>
+### <%- getMarkdownMethodSignature(method) %>
 
 <%- replaceNewLine(method.description) %>
 
-##### arguments
+#### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 <%- methodMarkdownTableRow(method) %>
@@ -29,7 +29,7 @@
 <%_ } _%>
 
 <%_ if (component.styles && component.styles.length) { _%>
-### styles
+## styles
 
 <%_ for (let i = 0; i < component.styles.length; i++) { _%>
 <%
@@ -41,80 +41,80 @@ const style = component.styles[i];
 <%_ for (let style of component.styles) { _%>
 ___
 
-#### <%- style.name %>
+### <%- style.name %>
 Name: `<%- style.name %>`
 
-#### Description
+### Description
 <%- style.description %>
 
-#### Type
+### Type
 `<%- style.type %>`
 <%_ if (exists(style.default)) { _%>
-#### Default Value
+### Default Value
 `<%= getStyleDefaultValue(style) %>`
 <%_ } _%>
 
 <%_ if (style.type === 'enum') { _%>
-#### Supported Values
+### Supported Values
 <%_ for (var i = 0; i < style.values.length; i++) { _%>
 **<%- style.values[i].value %>** - <%- style.values[i].doc %><br />
 <%_ } _%>
 
 <%_ } _%>
 <%_ if (exists(style.units)) { _%>
-#### Units
+### Units
 `<%- style.units %>`
 
 <%_ } _%>
 <%_ if (exists(style.minimum)) { _%>
-#### Minimum
+### Minimum
 `<%- style.minimum %>`
 
 <%_ } _%>
 
 <%_ if (exists(style.maximum)) { _%>
-#### Maximum
+### Maximum
 `<%- style.maximum %>`
 
 <%_ } _%>
 <%_ if (style.requires.length) { _%>
-#### Requires
+### Requires
 `<%- style.requires.join(', ') %>`
 
 <%_ } _%>
 <%_ if (style.disabledBy.length) { _%>
-#### Disabled By
+### Disabled By
 `<%- style.disabledBy.join(', ') %>`
 
 <%_ } _%>
 <%_ if (style.allowedFunctionTypes.length) { _%>
-#### Supported Style Functions
+### Supported Style Functions
 `<%- style.allowedFunctionTypes.join(', ') %>`
 <%_ } _%>
 <%_ if (style.expression) { _%>
-#### Expression
+### Expression
 
 Parameters: `<%- (style.expression.parameters || []).join(', ') %>`
 <%_ } _%>
 <%_ if (style.transition) { _%>
 ___
 
-#### Name
+### Name
 
 `<%- style.name %>Transition`
 
-#### Description
+### Description
 
-The transition affecting any changes to this layer’s <%- style.name %> propery.
+The transition affecting any changes to this layer’s <%- style.name %> property.
 
-#### Type
+### Type
 
 `{ duration, delay }`
 
-#### Units
+### Units
 `milliseconds`
 
-#### Default Value
+### Default Value
 `{duration: 300, delay: 0}`
 
 <%_ } %>

package/tsconfig.json

@@ -5,7 +5,7 @@
     "preserveSymlinks": true,
     "target": "es6",
     "module": "es6",
-    "allowJs": true,
+    "allowJs": false,
     "jsx": "react-native",
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,