@maplibre/maplibre-react-native 10.0.0-alpha.27 → 10.0.0-alpha.28

package/{javascript → src}/types/OnPressEvent.ts

@@ -1,4 +1,4 @@
-interface OnPressEvent {
+export interface OnPressEvent {
   features: GeoJSON.Feature[];
   coordinates: {
     latitude: number;
@@ -9,5 +9,3 @@ interface OnPressEvent {
     y: number;
   };
 }
-
-export default OnPressEvent;

package/src/types/StyleURL.ts

@@ -0,0 +1,3 @@
+export enum StyleURL {
+  Default = "https://demotiles.maplibre.org/style.json",
+}

package/{javascript → src}/utils/BridgeValue.ts

@@ -60,15 +60,15 @@ export default class BridgeValue {
         value.push(bridgeValue.toJSON());
       }
     } else if (type === "hashmap") {
-      value = [];
       const rawValue = this.rawValue as { [key: string]: RawValueType };
-      const stringKeys = Object.keys(this.rawValue);
-      for (const stringKey of stringKeys) {
-        value.push([
-          new BridgeValue(stringKey).toJSON(),
-          new BridgeValue(rawValue[stringKey]).toJSON(),
-        ] as [StyleValueJSON, StyleValueJSON]);
-      }
+
+      value = Object.entries(rawValue).map(
+        ([key, value]) =>
+          [new BridgeValue(key).toJSON(), new BridgeValue(value).toJSON()] as [
+            StyleValueJSON,
+            StyleValueJSON,
+          ],
+      );
     } else if (type === "boolean" || type === "number" || type === "string") {
       value = this.rawValue;
     } else {

package/{javascript → src}/utils/Logger.ts

@@ -1,5 +1,5 @@
 import {
-  EmitterSubscription,
+  type EmitterSubscription,
   NativeEventEmitter,
   NativeModules,
 } from "react-native";

package/{javascript/utils/MaplibreStyles.d.ts → src/utils/MapLibreRNStyles.d.ts}

@@ -1,5 +1,5 @@
 // DO NOT MODIFY
-// This file is auto-generated from scripts/templates/MaplibreStyles.ts.ejs
+// This file is auto-generated from scripts/templates/MapLibreRNStyles.ts.ejs
 
 import { type ImageSourcePropType } from "react-native";
 

package/{javascript → src}/utils/StyleValue.ts

@@ -4,7 +4,7 @@ import BridgeValue, {
   type RawValueType,
   type StyleValueJSON,
 } from "./BridgeValue";
-import { AllLayerStyleProps } from "./MaplibreStyles";
+import { type AllLayerStyleProps } from "./MapLibreRNStyles";
 import { getStyleType } from "./styleMap";
 
 export type StyleValue = {
@@ -16,7 +16,7 @@ export function transformStyle(
   style: AllLayerStyleProps | undefined,
 ): undefined | { [key: string]: StyleValue } {
   if (!style) {
-    return;
+    return undefined;
   }
 
   const nativeStyle: { [key: string]: StyleValue } = {};

package/{javascript → src}/utils/animated/Animated.ts

@@ -13,8 +13,8 @@ import ImageSource from "../../components/ImageSource";
 import LineLayer from "../../components/LineLayer";
 import RasterLayer from "../../components/RasterLayer";
 import ShapeSource, {
-  ShapeSourceProps,
-  ShapeSourceRef,
+  type ShapeSourceProps,
+  type ShapeSourceRef,
 } from "../../components/ShapeSource";
 import SymbolLayer from "../../components/SymbolLayer";
 

package/{javascript → src}/utils/animated/AnimatedCoordinatesArray.ts

@@ -1,5 +1,5 @@
 import AbstractAnimatedCoordinates, {
-  AnimatedCoordinates,
+  type AnimatedCoordinates,
 } from "./AbstractAnimatedCoordinates";
 
 interface CoordinatesState {
@@ -16,7 +16,10 @@ class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates<CoordinatesSt
    */
   onInitialState(coordinatesArray: AnimatedCoordinates[]): CoordinatesState {
     return {
-      coords: coordinatesArray.map((coord) => [coord[0], coord[1]]),
+      coords: coordinatesArray.map((coordinates) => [
+        coordinates[0],
+        coordinates[1],
+      ]),
       targetCoords: [],
     };
   }
@@ -48,37 +51,39 @@ class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates<CoordinatesSt
     const commonLen = Math.min(coords.length, targetCoords.length);
     const common = coords
       .slice(0, commonLen)
-      .map((origCoord, i): [number, number] => [
-        origCoord[0] * origF + targetCoords[i][0] * newF,
-        origCoord[1] * origF + targetCoords[i][1] * newF,
+      .map((originalCoordinates, i): [number, number] => [
+        originalCoordinates[0] * origF + (targetCoords[i]?.[0] ?? 0) * newF,
+        originalCoordinates[1] * origF + (targetCoords[i]?.[1] ?? 0) * newF,
       ]);
 
     if (targetCoords.length > coords.length) {
       // only in new (adding)
-      const addingOrig =
+      const addingOriginal =
         coords.length > 0 ? coords[coords.length - 1] : targetCoords[0];
+
       const adding = targetCoords
         .slice(commonLen, targetCoords.length)
-        .map((newCoord): [number, number] => [
-          addingOrig[0] * origF + newCoord[0] * newF,
-          addingOrig[1] * origF + newCoord[1] * newF,
+        .map((newCoordinates): [number, number] => [
+          (addingOriginal?.[0] ?? 0) * origF + newCoordinates[0] * newF,
+          (addingOriginal?.[1] ?? 0) * origF + newCoordinates[1] * newF,
         ]);
+
       return { coords: [...common, ...adding], targetCoords };
     }
 
     if (coords.length > targetCoords.length) {
-      // only in orig (dissapearing)
-      const dissapearingNew =
+      // only in orig (disappearing)
+      const disappearingNew =
         targetCoords.length > 0
           ? targetCoords[targetCoords.length - 1]
           : coords[0];
-      const dissapearing = coords
+      const disappearing = coords
         .slice(commonLen, coords.length)
-        .map((origCoord): [number, number] => [
-          origCoord[0] * origF + dissapearingNew[0] * newF,
-          origCoord[1] * origF + dissapearingNew[1] * newF,
+        .map((originalCoordinates): [number, number] => [
+          originalCoordinates[0] * origF + (disappearingNew?.[0] ?? 0) * newF,
+          originalCoordinates[1] * origF + (disappearingNew?.[1] ?? 0) * newF,
         ]);
-      return { coords: [...common, ...dissapearing], targetCoords };
+      return { coords: [...common, ...disappearing], targetCoords };
     }
 
     return { coords: common, targetCoords };
@@ -87,8 +92,8 @@ class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates<CoordinatesSt
   /**
    * Subclasses can override to start a new animation
    *
-   * @param {*} toValue - to value from animate
-   * @param {*} actCoords - the current coordinates array to start from
+   * @param {*} state - to value from animate
+   * @param {*} toValue - the current coordinates array to start from
    * @returns {object} The state
    */
   onStart(
@@ -96,7 +101,7 @@ class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates<CoordinatesSt
     toValue: AnimatedCoordinates[],
   ): CoordinatesState {
     const targetCoords = toValue.map(
-      (coord): AnimatedCoordinates => [coord[0], coord[1]],
+      (coordinates): AnimatedCoordinates => [coordinates[0], coordinates[1]],
     );
     return {
       ...state,

package/{javascript → src}/utils/animated/AnimatedPoint.ts

@@ -83,12 +83,12 @@ export class AnimatedPoint extends AnimatedWithChildren {
     return Animated.parallel([
       Animated.spring(this.longitude, {
         ...config,
-        toValue: config.coordinates[0],
+        toValue: config.coordinates[0]!,
         useNativeDriver: false,
       }),
       Animated.spring(this.latitude, {
         ...config,
-        toValue: config.coordinates[1],
+        toValue: config.coordinates[1]!,
         useNativeDriver: false,
       }),
     ]);
@@ -102,12 +102,12 @@ export class AnimatedPoint extends AnimatedWithChildren {
     return Animated.parallel([
       Animated.timing(this.longitude, {
         ...config,
-        toValue: config.coordinates[0],
+        toValue: config.coordinates[0]!,
         useNativeDriver: false,
       }),
       Animated.timing(this.latitude, {
         ...config,
-        toValue: config.coordinates[1],
+        toValue: config.coordinates[1]!,
         useNativeDriver: false,
       }),
     ]);

package/{javascript → src}/utils/animated/AnimatedRouteCoordinatesArray.ts

@@ -1,10 +1,16 @@
 import distance from "@turf/distance";
-import { lineString, point, convertLength, Coord, Units } from "@turf/helpers";
+import {
+  lineString,
+  point,
+  convertLength,
+  type Coord,
+  type Units,
+} from "@turf/helpers";
 import length from "@turf/length";
 import nearestPointOnLine from "@turf/nearest-point-on-line";
 
 import AbstractAnimatedCoordinates, {
-  AnimatedCoordinates,
+  type AnimatedCoordinates,
 } from "./AbstractAnimatedCoordinates";
 
 interface AnimatedRouteState {
@@ -63,11 +69,10 @@ export default class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoord
     let i = fullRoute.length - 1;
     while (actsum < currentEnd && i > 0) {
       prevsum = actsum;
-      actsum += distance(
-        point(fullRoute[i]),
-        point(fullRoute[i - 1]),
-        this.distconf,
-      );
+      const start = fullRoute[i];
+      const end = fullRoute[i - 1];
+      actsum +=
+        start && end ? distance(point(start), point(end), this.distconf) : 0;
       i -= 1;
     }
     if (actsum <= currentEnd) {
@@ -80,8 +85,8 @@ export default class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoord
     const actRoute = [
       ...fullRoute.slice(0, i + 1),
       [
-        fullRoute[i][0] * r + fullRoute[i + 1][0] * or,
-        fullRoute[i][1] * r + fullRoute[i + 1][1] * or,
+        (fullRoute[i]?.[0] ?? 0) * r + (fullRoute[i + 1]?.[0] ?? 0) * or,
+        (fullRoute[i]?.[1] ?? 0) * r + (fullRoute[i + 1]?.[1] ?? 0) * or,
       ] as AnimatedCoordinates,
     ];
     return { fullRoute, end: { ...end, current: currentEnd }, actRoute };

package/{javascript → src}/utils/filterUtils.ts

@@ -1,4 +1,4 @@
-import { FilterExpression } from "./MaplibreStyles";
+import { type FilterExpression } from "./MapLibreRNStyles";
 
 export function getFilter(filter: FilterExpression | undefined): string[] {
   if (!Array.isArray(filter) || filter.length === 0) {

package/{javascript → src}/utils/index.ts

@@ -1,10 +1,10 @@
-import React, { Component, ReactElement } from "react";
+import { Children, cloneElement, Component, type ReactElement } from "react";
 import {
   Image,
   NativeModules,
   findNodeHandle,
   Platform,
-  ImageSourcePropType,
+  type ImageSourcePropType,
   UIManager,
 } from "react-native";
 
@@ -95,7 +95,7 @@ export function runNativeCommand<ReturnType = NativeArg>(
 }
 
 export function cloneReactChildrenWithProps(
-  children: Parameters<typeof React.Children.map>[0],
+  children: Parameters<typeof Children.map>[0],
   propsToAdd: { [key: string]: string } = {},
 ): ReactElement[] | undefined {
   if (!children) {
@@ -111,8 +111,8 @@ export function cloneReactChildrenWithProps(
   }
 
   const filteredChildren = foundChildren.filter((child) => !!child); // filter out falsy children, since some can be null
-  return React.Children.map(filteredChildren, (child) =>
-    React.cloneElement(child, propsToAdd),
+  return Children.map(filteredChildren, (child) =>
+    cloneElement(child, propsToAdd),
   );
 }
 

package/.eslintrc.js

@@ -1,5 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["universe/native"],
-  ignorePatterns: ["build"],
-};

package/.git-blame-ignore-revs

@@ -1,3 +0,0 @@
-# style: apply formatting via lint:fix
-# https://github.com/maplibre/maplibre-react-native/pull/467
-017b3861ae8ac856a3b032ebea6497eff4420e1f

package/.gitattributes

@@ -1 +0,0 @@
-*.pbxproj -text

package/.nvmrc

@@ -1 +0,0 @@
-v18.12.1

package/.sonarcloud.properties

@@ -1,15 +0,0 @@
-# Path to sources
-sonar.sources=javascript,android/src,ios/RCTMLN
-#sonar.exclusions=
-#sonar.inclusions=
-
-# Path to tests
-sonar.tests=__tests__
-#sonar.test.exclusions=
-#sonar.test.inclusions=
-
-# Source encoding
-#sonar.sourceEncoding=UTF-8
-
-# Exclusions for copy-paste detection
-#sonar.cpd.exclusions=

package/CODE_OF_CONDUCT.md

@@ -1,2 +0,0 @@
-# Contributor Covenant
-[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](https://github.com/maplibre/maplibre/blob/main/CODE_OF_CONDUCT.md)

package/CONTRIBUTING.md

@@ -1,61 +0,0 @@
-# Contributing
-
-PRs are most welcome! This doc covers some basic things you'll need to know to set up
-your dev environment and streamline the review process.
-
-## Environment Setup
-
-This project includes `.nvmrc`. You should use nvm so that you're always developing for the correct
-version of Node.
-
-This project uses `yarn` as a package manager.
-
-> [!CAUTION]
-> DO NOT install `yarn` using `npm` as that will install the outdated 1.x branch. Full instructions are in
-> the [yarn docs](https://yarnpkg.com/getting-started/install), but here's the quick checklist at the time of this
-> writing.
-
-Make sure to correctly configure your Editor following [this docs](https://yarnpkg.com/getting-started/editor-sdks).
-
-1. `corepack enable`
-2. `corepack prepare yarn@stable --activate`
-3. On first install, the above may change your yarn config away from `pnp`; check your git working copy for changes and
-   revert if necessary.
-4. `yarn install`
-
-## Testing
-
-The metro bundlers under [`/packages/react-native-app`](/packages/react-native-app) and [
-`/packages/expo-app`](/packages/expo-app) is set up to use the libraries files under root.
-Which means, when you change something within [
-`/javascript/components/UserLocation.tsx`](/javascript/components/UserLocation.tsx)
-it will be reflected in any scene in example that uses that component.
-
-TODO: A better overview of how we use jest, detox, etc. (issue #22)
-
-## Optional: Local development with `yalc`
-
-It is often desirable to test in the context of an external project (for example,
-if you have a complex application using a map and want to test your changes directly).
-While it's not easy to do this out of the box with `yarn` or `npm`.
-[`yalc`](https://www.viget.com/articles/how-to-use-local-unpublished-node-packages-as-project-dependencies/)
-can mitigate some of the pain with this.
-
-## Best practices for PRs
-
-- If you add a feature, make sure you add it to the documentation
-- If you add an objective-c or java method, make sure you update the declaration file: `index.d.ts`.
-- Make sure to use small concise commits
-- Use meaningful commit messages
-- Make sure to update/ add new tests for your changes
-- If you add a new feature, make sure to add a scene in [`/packages/examples`](/packages/examples) for others to
-  see/test it
-
-## Documentation
-
-Documentation is generated from code blocks and comments. It will be auto-generated when you commit changes. If any
-changes are generated from your edits, the changed files will need to be added using `git add` before attempting the
-commit again. To manually generate the changes, run `yarn codegen`.
-
-Notice, that changing the documentation in the individual <COMPONENT>.md within `/docs` will not suffice. The correct
-way is the above described

package/RELEASE.md

@@ -1,30 +0,0 @@
-# How to create a release for this repo
-
-## Make sure `master` builds correctly
-
-Are all our [actions](https://github.com/maplibre/maplibre-react-native/actions) passing successfully?  
-If not, make sure to investigate the issue and fix it prior to a release.
-
-## Bump the version in our package.json
-
-Once you verified, that `master` isn't broken, go on and increase the `version` within our `package.json`.
-
-## Update the CHANGELOG accordingly
-
-Our [`CHANGELOG.md`](https://github.com/maplibre/maplibre-react-native/blob/master/CHANGELOG.md) should be updated whenever a PR is merged/ noteworthy changes are committed to `master`.  
-Prior to a release, the changes should be documented under the `UNRELEASED` section.  
-Once it's clear, that a release is about to be published, move the items under `UNRELEASED` to _this_ releases sections.  
-Let your actions be guided by the previous release entries.
-
-## Draft a new release on Github
-
-Within the [releases](https://github.com/maplibre/maplibre-react-native/releases) section of the repo you can [`Draft a new release`](https://github.com/maplibre/maplibre-react-native/releases/new).
-
-`Tag version` & `Release title` should be the same.  
-As redundant as it might sound, please add the changes from the `CHANGELOG.md` into the body of the release.
-
-## Monitor the repos issues for updates
-
-Once the release is out the door (on [npm](https://www.npmjs.com/package/@maplibre/maplibre-react-native)),
-make sure to monitor the [issues](https://github.com/maplibre/maplibre-react-native/issues) closely for
-problems the community might encounter.

package/babel.config.js

@@ -1,12 +0,0 @@
-module.exports = {
-  presets: ["module:@react-native/babel-preset"],
-  plugins: [
-    ["@babel/plugin-proposal-class-properties", { loose: true }],
-    ["@babel/plugin-transform-private-methods", { loose: true }],
-  ],
-  env: {
-    production: {
-      plugins: ["transform-remove-console"],
-    },
-  },
-};

package/docs/Annotation.md

@@ -1,29 +0,0 @@
-<!-- DO NOT MODIFY -->
-<!-- This file is auto-generated from javascript/components/Annotation.tsx -->
-# `<MapLibreGL.Annotation />`
-
-
-## Props
-| Prop | Type | Default | Required | Description |
-| ---- | :--: | :-----: | :------: | :----------: |
-| id | `string` | `none` | `true` | FIX ME NO DESCRIPTION |
-| animated | `boolean` | `false` | `false` | FIX ME NO DESCRIPTION |
-| animationDuration | `number` | `1000` | `false` | FIX ME NO DESCRIPTION |
-| coordinates | `Array` | `none` | `false` | FIX ME NO DESCRIPTION |
-| children | `ReactElement \| ReactElement[]` | `none` | `false` | FIX ME NO DESCRIPTION |
-| style | `object` | `none` | `false` | FIX ME NO DESCRIPTION |
-| icon | `string \| number \| object` | `none` | `false` | FIX ME NO DESCRIPTION |
-| animationEasingFunction | `FIX ME UNKNOWN TYPE` | `Easing.linear` | `false` | FIX ME NO DESCRIPTION |
-
-## Methods
-### `onPress(event)`
-
-
-
-#### Arguments
-| Name | Type | Required | Description  |
-| ---- | :--: | :------: | :----------: |
-| `event` | `OnPressEvent` | `Yes` | undefined |
-
-
-

package/docs/Annotations.md

@@ -1,12 +0,0 @@
-Comparsion of various annotations available in MapLibre React Native:
-
-|*Feature*              | *SymbolLayer*      |*PointAnnotation*                     |*MarkerView*             |*CircleLayer*        |
-|-----------------------|--------------------|--------------------------------------|-------------------------|---------------------|
-|Can use images         | ✓            |                                      |                         |                     |
-|RN Views as childern   | iOS: static        |iOS: interactive <br/> android: static|interactive              |                     |
-|Interactions           | click              |iOS: full <br/> android: click & drag & callout  | supports full interactivity in the sense that inside MarkerViews one can place any RN View, which can be interacted with. Not to be misunderstood with drag n drop interactivity.                     | click          |
-|Control Z-index        | &check;            |iOS: always on top, android: n/a      |always on top            | &check;             |
-|Clustering             | &check;            |                                      |                         | &check;             |
-|Style with expressions | &check;            |                                      |                         | &check;             |
-|iOS implementation     | [MLNSymbolStyleLayer](https://maplibre.org/maplibre-gl-native/ios/api/Classes/MLNSymbolStyleLayer.html)     |[MLNAnnotationView](https://maplibre.org/maplibre-gl-native/ios/api/Classes/MLNAnnotationView.html)                     |[MLNAnnotationView](https://maplibre.org/maplibre-gl-native/ios/api/Classes/MLNAnnotationView.html)       |[MLNCircleStyleLayer](https://maplibre.org/maplibre-gl-native/ios/api/Classes/MLNCircleStyleLayer.html)       |
-|android implementation | [SymbolLayer](https://maplibre.org/maplibre-gl-native/android/api/com/mapbox/mapboxsdk/style/layers/SymbolLayer.html)|[annotation.Symbol](https://docs.mapbox.com/android/api/plugins/annotation/0.8.0/com/mapbox/mapboxsdk/plugins/annotation/Symbol.html)|[annotation.Marker](https://docs.mapbox.com/android/api/plugins/markerview/0.4.0/com/mapbox/mapboxsdk/plugins/markerview/MarkerView.html) |[CircleLayer](https://maplibre.org/maplibre-gl-native/android/api/com/mapbox/mapboxsdk/style/layers/CircleLayer.html)|

package/docs/BackgroundLayer.md

@@ -1,166 +0,0 @@
-<!-- DO NOT MODIFY -->
-<!-- This file is auto-generated from javascript/components/BackgroundLayer.tsx -->
-# `<MapLibreGL.BackgroundLayer />`
-
-
-## Props
-| Prop | Type | Default | Required | Description |
-| ---- | :--: | :-----: | :------: | :----------: |
-| style | `BackgroundLayerStyleProps` | `none` | `false` | Customizable style attributes |
-| sourceID | `FIX ME UNKNOWN TYPE` | `MapLibreGL.StyleSource.DefaultSourceID` | `false` | FIX ME NO DESCRIPTION |
-
-
-## Styles
-
-* <a href="#name">`visibility`</a><br/>
-* <a href="#name-1">`backgroundColor`</a><br/>
-* <a href="#name-2">`backgroundPattern`</a><br/>
-* <a href="#name-3">`backgroundOpacity`</a><br/>
-
-
-### `visibility`
-
-Whether this layer is displayed.
-
-<dl>
-    <dt>Type</dt>
-    <dd>
-        <code>enum</code>
-    </dd>
-        <dt>Default Value</dt>
-        <dd><code>visible</code></dd>
-    <dt>Supported Values</dt>
-    <dd>
-        <ul>
-                <li>
-                    <code>visible</code>: The layer is shown.
-                </li>
-                <li>
-                    <code>none</code>: The layer is not shown.
-                </li>
-        </ul>
-    </dd>
-</dl>
-
-
-
-### `backgroundColor`
-
-The color with which the background will be drawn.
-
-<dl>
-    <dt>Type</dt>
-    <dd>
-        <code>color</code>
-    </dd>
-        <dt>Default Value</dt>
-        <dd><code>#000000</code></dd>
-        </ul>
-    </dd>
-        <dt>Disabled By</dt>
-        <dd><code>backgroundPattern</code></dd>
-        <dt>Expression Parameters</dt>
-        <dd><code>zoom</code></dd>
-</dl>
-
-### `backgroundColorTransition`
-
-The transition affecting any changes to this layer’s backgroundColor property.
-
-<dl>
-  <dt>Type</dt>
-  <dd>
-    <code>{ duration, delay }</code>
-  </dd>
-
-  <dt>Units</dt>
-  <dd>
-    <code>milliseconds</code>
-  </dd>
-
-  <dt>Default Value</dt>
-  <dd>
-    <code>{duration: 300, delay: 0}</code>
-  </dd>
-</dl>
-
-
-### `backgroundPattern`
-
-Name of image in sprite to use for drawing an image background. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoomDependent expressions will be evaluated only at integer zoom levels.
-
-<dl>
-    <dt>Type</dt>
-    <dd>
-        <code>resolvedImage</code>
-    </dd>
-        </ul>
-    </dd>
-        <dt>Expression Parameters</dt>
-        <dd><code>zoom</code></dd>
-</dl>
-
-### `backgroundPatternTransition`
-
-The transition affecting any changes to this layer’s backgroundPattern property.
-
-<dl>
-  <dt>Type</dt>
-  <dd>
-    <code>{ duration, delay }</code>
-  </dd>
-
-  <dt>Units</dt>
-  <dd>
-    <code>milliseconds</code>
-  </dd>
-
-  <dt>Default Value</dt>
-  <dd>
-    <code>{duration: 300, delay: 0}</code>
-  </dd>
-</dl>
-
-
-### `backgroundOpacity`
-
-The opacity at which the background will be drawn.
-
-<dl>
-    <dt>Type</dt>
-    <dd>
-        <code>number</code>
-    </dd>
-        <dt>Default Value</dt>
-        <dd><code>1</code></dd>
-        </ul>
-    </dd>
-        <dt>Minimum</dt>
-        <dd><code>0</code></dd>
-        <dt>Maximum</dt>
-        <dd><code>1</code></dd>
-        <dt>Expression Parameters</dt>
-        <dd><code>zoom</code></dd>
-</dl>
-
-### `backgroundOpacityTransition`
-
-The transition affecting any changes to this layer’s backgroundOpacity property.
-
-<dl>
-  <dt>Type</dt>
-  <dd>
-    <code>{ duration, delay }</code>
-  </dd>
-
-  <dt>Units</dt>
-  <dd>
-    <code>milliseconds</code>
-  </dd>
-
-  <dt>Default Value</dt>
-  <dd>
-    <code>{duration: 300, delay: 0}</code>
-  </dd>
-</dl>
-