@maplibre/maplibre-react-native 10.0.0-alpha.24 → 10.0.0-alpha.26

package/javascript/components/UserLocation.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement, useEffect, useImperativeHandle } from "react";
 
+import Annotation from "./Annotation";
 import CircleLayer from "./CircleLayer";
 import HeadingIndicator from "./HeadingIndicator";
 import NativeUserLocation from "./NativeUserLocation";
-import Annotation from "./annotations/Annotation";
 import locationManager, { Location } from "../modules/location/locationManager";
 import { CircleLayerStyleProps } from "../utils/MaplibreStyles";
 

package/javascript/hooks/useNativeRef.ts

@@ -1,7 +1,8 @@
 import React, { Component, useRef } from "react";
 import { NativeMethods } from "react-native";
 
-type NativeRef<NativeProps> = Component<NativeProps> & Readonly<NativeMethods>;
+export type NativeRef<NativeProps> = Component<NativeProps> &
+  Readonly<NativeMethods>;
 
 /**
  * Separate  module which allows to be mocked in tests.

package/javascript/types/CameraMode.ts

@@ -0,0 +1,6 @@
+export enum CameraMode {
+  Flight = 1,
+  Ease = 2,
+  Linear = 3,
+  None = 4,
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "React Native library for creating maps with MapLibre Native for Android & iOS",
-  "version": "10.0.0-alpha.24",
+  "version": "10.0.0-alpha.26",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,7 @@
     "url": "https://github.com/maplibre/maplibre-react-native"
   },
   "scripts": {
-    "generate": "yarn generate:fetch-style-spec && yarn generate:docs",
-    "generate:fetch-style-spec": "./scripts/download-style-spec.sh",
-    "generate:docs": "yarn node ./scripts/generate-docs",
+    "codegen": "tsx scripts/codegen.ts",
     "test": "jest",
     "lint": "yarn lint:eslint && yarn lint:tsc",
     "lint:eslint": "eslint .",
@@ -32,9 +30,13 @@
     "plugin:build": "tsc --build plugin",
     "plugin:lint": "eslint plugin/src/*",
     "plugin:test": "jest plugin",
-    "prepack": "pinst --disable && yarn plugin:build",
-    "postpack": "pinst --enable"
+    "prepack": "yarn plugin:build"
   },
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "packageManager": "yarn@4.1.0",
   "peerDependenciesMeta": {
     "@expo/config-plugins": {
       "optional": true
@@ -63,43 +65,33 @@
     "@babel/eslint-parser": "^7.22.9",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/runtime": "7.17.2",
-    "@expo/config-plugins": "^8.0.10",
+    "@expo/config-plugins": "^9.0.9",
+    "@maplibre/maplibre-gl-style-spec": "21.1.0",
     "@react-native/babel-preset": "^0.74.88",
     "@react-native/metro-config": "^0.74.88",
     "@sinonjs/fake-timers": "^11.2.2",
     "@testing-library/react-native": "^12.4.3",
-    "@tsconfig/node14": "^14.1.0",
+    "@types/ejs": "^3.1.5",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "babel-jest": "^29.6.0",
     "documentation": "^14.0.0",
-    "ejs": "^3.1.3",
+    "ejs": "^3.1.10",
     "ejs-lint": "^2.0.0",
     "eslint": "^8.57.1",
     "eslint-config-universe": "13.0.0",
-    "expo-module-scripts": "^3.1.0",
-    "husky": "^9.0.10",
+    "expo-module-scripts": "^4.0.2",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "lint-staged": "^15.2.2",
-    "node-dir": "0.1.17",
-    "pinst": "^3.0.0",
     "prettier": "3.3.3",
     "react": "18.2.0",
-    "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
+    "react-docgen": "^7.1.0",
     "react-native": "^0.74.6",
     "react-test-renderer": "18.2.0",
+    "tsx": "^4.19.2",
     "typescript": "^5.3.3"
   },
   "resolutions": {
     "typescript": "5.5.3"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "yarn lint"
-  },
-  "packageManager": "yarn@4.1.0",
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ]
+  }
 }

package/scripts/codegen.ts

@@ -0,0 +1,340 @@
+import maplibreGlStyleSpec from "@maplibre/maplibre-gl-style-spec/src/reference/latest";
+import ejs from "ejs";
+import { exec } from "node:child_process";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import prettier from "prettier";
+
+import { DocJSONBuilder } from "./utils/DocJSONBuilder";
+import { MarkdownBuilder } from "./utils/MarkdownBuilder";
+import { camelCase } from "./utils/TemplateHelpers";
+import * as TemplateHelpers from "./utils/TemplateHelpers";
+import {
+  getAndroidVersion,
+  getIosVersion,
+  isVersionGTE,
+} from "./utils/getNativeVersion";
+
+const TMPL_PATH = path.join(__dirname, "templates");
+
+const IOS_OUTPUT_PATH = path.join(__dirname, "..", "ios", "RCTMLN");
+const ANDROID_OUTPUT_PATH = path.join(
+  __dirname,
+  "..",
+  "android",
+  "src",
+  "main",
+  "java",
+  "com",
+  "maplibre",
+  "rctmln",
+  "components",
+  "styles",
+);
+
+const JS_OUTPUT_PATH = path.join(__dirname, "..", "javascript", "utils");
+
+const TEMPLATE_MAPPINGS = [
+  {
+    input: path.join(TMPL_PATH, "RCTMLNStyle.h.ejs"),
+    output: path.join(IOS_OUTPUT_PATH, "RCTMLNStyle.h"),
+  },
+  {
+    input: path.join(TMPL_PATH, "MaplibreStyles.ts.ejs"),
+    output: path.join(JS_OUTPUT_PATH, "MaplibreStyles.d.ts"),
+  },
+  {
+    input: path.join(TMPL_PATH, "RCTMLNStyle.m.ejs"),
+    output: path.join(IOS_OUTPUT_PATH, "RCTMLNStyle.m"),
+  },
+  {
+    input: path.join(TMPL_PATH, "RCTMLNStyleFactory.java.ejs"),
+    output: path.join(ANDROID_OUTPUT_PATH, "RCTMLNStyleFactory.java"),
+  },
+  {
+    input: path.join(TMPL_PATH, "styleMap.ts.ejs"),
+    output: path.join(JS_OUTPUT_PATH, "styleMap.ts"),
+  },
+];
+
+async function generate() {
+  const androidVersion = await getAndroidVersion();
+  const iosVersion = await getIosVersion();
+
+  function getPropertiesForLight() {
+    const lightAttributes = maplibreGlStyleSpec.light;
+
+    return getSupportedProperties(lightAttributes).map((attrName) => {
+      return Object.assign({}, buildProperties(lightAttributes, attrName), {
+        allowedFunctionTypes: [],
+      });
+    });
+  }
+
+  function getPropertiesForLayer(layerName: string) {
+    const paintAttributes = maplibreGlStyleSpec[`paint_${layerName}`];
+    const layoutAttributes = maplibreGlStyleSpec[`layout_${layerName}`];
+
+    const paintProps = getSupportedProperties(paintAttributes).map(
+      (attrName) => {
+        const prop = buildProperties(paintAttributes, attrName);
+
+        // overrides
+        if (["line-width"].includes(attrName)) {
+          prop.allowedFunctionTypes = ["camera"];
+        }
+
+        return prop;
+      },
+    );
+
+    const layoutProps = getSupportedProperties(layoutAttributes).map(
+      (attrName) => {
+        const prop = buildProperties(layoutAttributes, attrName);
+
+        // overrides
+        if (
+          [
+            "line-join",
+            "text-max-width",
+            "text-letter-spacing",
+            "text-anchor",
+            "text-justify",
+            "text-font",
+          ].includes(attrName)
+        ) {
+          prop.allowedFunctionTypes = ["camera"];
+        }
+
+        // TODO
+        // Overide type padding
+        if (prop.type === "padding") {
+          prop.type = "array";
+          prop.value = "number";
+          prop.length = 4;
+        }
+
+        return prop;
+      },
+    );
+
+    return layoutProps.concat(paintProps);
+  }
+
+  function getSupportedLayers() {
+    return Object.entries(maplibreGlStyleSpec.layer.type.values)
+      .map(([layerName, layerProperties]) => {
+        if (
+          layerProperties &&
+          typeof layerProperties === "object" &&
+          "sdk-support" in layerProperties
+        ) {
+          const support = getAttributeSupport(layerProperties["sdk-support"]);
+
+          if (support.basic.android && support.basic.ios) {
+            return layerName;
+          }
+        }
+
+        return undefined;
+      })
+      .filter((layerName) => typeof layerName === "string");
+  }
+
+  function getSupportedProperties(attributes: any) {
+    return Object.keys(attributes).filter((attrName) =>
+      isAttrSupported(attributes[attrName]),
+    );
+  }
+
+  function buildProperties(attributes: any, attrName: string) {
+    return {
+      name: camelCase(attrName),
+      doc: {
+        default: attributes[attrName].default,
+        minimum: attributes[attrName].minimum,
+        maximum: attributes[attrName].maximum,
+        units: attributes[attrName].units,
+        description: formatDescription(attributes[attrName].doc),
+        requires: getRequires(attributes[attrName].requires),
+        disabledBy: getDisables(attributes[attrName].requires),
+        values: attributes[attrName].values,
+      },
+      type: attributes[attrName].type,
+      value: attributes[attrName].value,
+      length: undefined as undefined | number,
+      image: isImage(attrName),
+      translate: isTranslate(attrName),
+      transition: attributes[attrName].transition,
+      expression: attributes[attrName].expression,
+      expressionSupported:
+        Object.keys(attributes[attrName].expression || {}).length > 0,
+      support: getAttributeSupport(attributes[attrName]["sdk-support"]),
+      allowedFunctionTypes: getAllowedFunctionTypes(attributes[attrName]),
+    };
+  }
+
+  function formatDescription(description: string) {
+    const words = description.split(" ");
+
+    for (let i = 0; i < words.length; i++) {
+      const word = words[i];
+
+      if (word.includes("-")) {
+        words[i] = camelCase(word);
+      }
+    }
+
+    return words.join(" ");
+  }
+
+  function getRequires(requiredItems: any) {
+    const items: any[] = [];
+
+    if (!requiredItems) {
+      return items;
+    }
+
+    for (const item of requiredItems) {
+      if (typeof item === "string") {
+        items.push(camelCase(item, "-"));
+      }
+    }
+
+    return items;
+  }
+
+  function getDisables(disabledItems: any[]) {
+    const items: any[] = [];
+
+    if (!disabledItems) {
+      return items;
+    }
+
+    for (const item of disabledItems) {
+      if (item["!"]) {
+        items.push(camelCase(item["!"], "-"));
+      }
+    }
+
+    return items;
+  }
+
+  function isImage(attrName: string) {
+    return (
+      attrName.toLowerCase().indexOf("pattern") !== -1 ||
+      attrName.toLowerCase().indexOf("image") !== -1
+    );
+  }
+
+  function isTranslate(attrName: string) {
+    return attrName.toLowerCase().indexOf("translate") !== -1;
+  }
+
+  function isAttrSupported(attr: any) {
+    const support = getAttributeSupport(attr["sdk-support"]);
+    if (attr.private) {
+      return false;
+    }
+    return support.basic.android && support.basic.ios;
+  }
+
+  function getAttributeSupport(sdkSupport: any) {
+    const support = {
+      basic: { android: false, ios: false },
+      data: { android: false, ios: false },
+    };
+
+    const basicSupport = sdkSupport && sdkSupport["basic functionality"];
+    support.basic.android = isVersionGTE(androidVersion, basicSupport?.android);
+    support.basic.ios = isVersionGTE(iosVersion, basicSupport?.ios);
+
+    const dataDrivenSupport = sdkSupport && sdkSupport["data-driven styling"];
+    support.data.android = isVersionGTE(
+      androidVersion,
+      dataDrivenSupport?.android,
+    );
+    support.data.ios = isVersionGTE(iosVersion, dataDrivenSupport?.ios);
+
+    if (!support.data.ios || !support.data.android) {
+      support.data.ios = false;
+      support.data.android = false;
+    }
+
+    return support;
+  }
+
+  function getAllowedFunctionTypes(paintAttr: any) {
+    const allowedFunctionTypes = [];
+
+    if (paintAttr["zoom-function"]) {
+      allowedFunctionTypes.push("camera");
+    }
+
+    if (paintAttr["property-function"]) {
+      allowedFunctionTypes.push("source");
+      allowedFunctionTypes.push("composite");
+    }
+
+    return allowedFunctionTypes;
+  }
+
+  const layers = getSupportedLayers().map((layerName) => {
+    return {
+      name: layerName,
+      properties: getPropertiesForLayer(layerName),
+    };
+  });
+
+  // add light as a layer
+  layers.push({ name: "light", properties: getPropertiesForLight() });
+
+  // autogenerate code
+  await Promise.all(
+    TEMPLATE_MAPPINGS.map(async ({ input, output }) => {
+      const filename = path.parse(output).base;
+
+      console.log(`Generating ${filename}`);
+      const tmpl = ejs.compile(await fs.readFile(input, "utf8"), {
+        strict: true,
+        async: true,
+      });
+      let results = await tmpl({ layers, helpers: TemplateHelpers });
+      if (filename.endsWith("ts")) {
+        results = await prettier.format(results, {
+          filepath: filename,
+        });
+        // Ensure all enums are exported
+        results = results.replace(/enum (\w+Enum) \{[^}]+}\n/g, "export $&");
+        // Replace Array<any> with any[]
+        results = results.replace(/Array<any>/g, "any[]");
+        // Replace padding type with float array
+        results = results.replace(/padding: string;/g, "padding: number[];");
+      }
+      await fs.writeFile(output, results);
+    }),
+  );
+
+  // autogenerate docs
+  const docBuilder = new DocJSONBuilder(layers);
+  const markdownBuilder = new MarkdownBuilder();
+  await docBuilder.generate();
+  await markdownBuilder.generate();
+
+  // Check if any generated files changed
+  try {
+    exec(
+      `git diff --exit-code docs/ ${TEMPLATE_MAPPINGS.map((m) => m.output).join(" ")}`,
+    );
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (_error) {
+    console.error(
+      "\n\nThere are unstaged changes in the generated code. " +
+        "Please add them to your commit.\n" +
+        'If you would really like to exclude them, run "git commit -n" to skip.\n\n',
+    );
+    process.exit(1);
+  }
+}
+
+generate();

package/scripts/templates/MaplibreStyles.ts.ejs

@@ -1,5 +1,6 @@
 <%
   const layers = locals.layers;
+  const helpers = locals.helpers;
 -%>
 /* This file was generated from MapboxStyle.ts.ejs do not modify */
 import { type ImageSourcePropType } from 'react-native';
@@ -58,20 +59,20 @@ export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
   | T
   | Expression;
 
-<%_ for (let enumInfo of getEnums(layers)) { _%>
-  enum <%- pascalCase(enumInfo.name) %>Enum {
+<%_ for (let enumInfo of helpers.getEnums(layers)) { _%>
+  enum <%- helpers.pascalCase(enumInfo.name) %>Enum {
     <%_ for (let k of Object.keys(enumInfo.values)) { _%>
       /** <%- enumInfo.values[k].doc %> */
-      <%- pascalCase(k) %> = '<%- k %>',
+      <%- helpers.pascalCase(k) %> = '<%- k %>',
     <%_ } _%>
   }
-  type <%- pascalCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>;
+  type <%- helpers.pascalCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>;
 <%_ } _%>
 
 type Enum<EnumType, EnumValues> = EnumType | EnumValues;
 
 <%_ for (let layer of layers) { _%>
-  export interface <%- pascalCase(layer.name) %>LayerStyleProps {
+  export interface <%- helpers.pascalCase(layer.name) %>LayerStyleProps {
     <%_ for (let prop of layer.properties) { _%>
       /**
        * <%- prop.doc.description %>
@@ -84,7 +85,7 @@ type Enum<EnumType, EnumValues> = EnumType | EnumValues;
        * @disabledBy <%- prop.doc.disabledBy.join(', ') %>
       <%_ } _%>
        */
-      <%= prop.name %>?: <%- dtsInterfaceType(prop) %>
+      <%= prop.name %>?: <%- helpers.dtsInterfaceType(prop) %>
       <%_ if (true && prop.transition) { %>
       /**
        * The transition affecting any changes to this layer’s <%= prop.name %> property.
@@ -96,4 +97,4 @@ type Enum<EnumType, EnumValues> = EnumType | EnumValues;
   };
 <%_ } _%>
 
-export type AllLayerStyleProps = <%- layers.map(l => `${pascalCase(l.name)}LayerStyleProps`).join("|") -%>;
+export type AllLayerStyleProps = <%- layers.map(l => `${helpers.pascalCase(l.name)}LayerStyleProps`).join("|") -%>;

package/scripts/templates/RCTMLNStyle.h.ejs

@@ -1,5 +1,6 @@
 <%
   const layers = locals.layers;
+  const helpers = locals.helpers;
 -%>
 // DO NOT MODIFY
 // THIS FILE IS AUTOGENERATED
@@ -18,14 +19,14 @@
 - (id)initWithMLNStyle:(MLNStyle*)mlnStyle;
 
 <%_ for (const layer of layers) { _%>
-- (void)<%- setLayerMethodName(layer, 'ios') -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
+- (void)<%- helpers.setLayerMethodName(layer, 'ios') -%>:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
 <%_ } _%>
 
 <%_ for (const layer of layers) { _%>
 <%_ for (const prop of layer.properties) { _%>
-- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
+- (void)set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(prop.name)) -%>:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 <%_ if (prop.transition) { _%>
-- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
+- (void)set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(prop.name)) -%>Transition:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 <%_ } _%>
 <%_ } _%>
 <% } %>

package/scripts/templates/RCTMLNStyle.m.ejs

@@ -1,5 +1,6 @@
 <%
   const layers = locals.layers;
+  const helpers = locals.helpers;
 -%>
 // DO NOT MODIFY
 // THIS FILE IS AUTOGENERATED
@@ -18,7 +19,7 @@
 }
 
 <% for (const layer of layers) { %>
-- (void)<%- setLayerMethodName(layer, 'ios') -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid
+- (void)<%- helpers.setLayerMethodName(layer, 'ios') -%>:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid
 {
   if (![self _hasReactStyle:reactStyle]) {
     // TODO throw exception
@@ -34,10 +35,10 @@
     RCTMLNStyleValue *styleValue = [RCTMLNStyleValue make:reactStyle[prop]];
 
   <% for (let i = 0; i < layer.properties.length; i++) { -%>
-  <%- ifOrElseIf(i) -%> ([prop isEqualToString:@"<%= layer.properties[i].name %>"]) {
+  <%- helpers.ifOrElseIf(i) -%> ([prop isEqualToString:@"<%= layer.properties[i].name %>"]) {
   <%_ if (layer.properties[i].image) { _%>
       if (![styleValue shouldAddImage]) {
-        [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+        [self set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
@@ -46,18 +47,18 @@
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {
                 [self->_style setImage:image forName:imageURI];
-                [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+                [self set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
               }
             });
           }
         }];
       }
   <%_ } else { _%>
-      [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+      [self set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
   <%_ } _%>
   <%_ if (layer.properties[i].transition) { _%>
     } else if ([prop isEqualToString:@"<%= layer.properties[i].name %>Transition"]) {
-      [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>Transition:layer withReactStyleValue:styleValue];
+      [self set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(layer.properties[i].name)) -%>Transition:layer withReactStyleValue:styleValue];
   <%_ } _%>
   <% } -%>
   } else {
@@ -69,21 +70,21 @@
 
 <% for (const layer of layers) {%>
 <% for (const prop of layer.properties) {%>
-- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
+- (void)set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(prop.name)) -%>:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
 {
     <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
     layer.position = [styleValue getSphericalPosition];
     <%_ } else if (prop.name === 'visibility') { _%>
     layer.visible = [styleValue isVisible];
     <%_ } else { _%>
-    layer.<%- iosPropName(prop.name) -%> = styleValue.mlnStyleValue;
+    layer.<%- helpers.iosPropName(prop.name) -%> = styleValue.mlnStyleValue;
     <%_ } _%>
 }
 <%_ if (prop.transition) { _%>
 
-- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
+- (void)set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(prop.name)) -%>Transition:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
 {
-    layer.<%- iosPropName(prop.name) -%>Transition = [styleValue getTransition];
+    layer.<%- helpers.iosPropName(prop.name) -%>Transition = [styleValue getTransition];
 }
 <%_ } _%>
 <% } %>