@maplibre/maplibre-react-native 10.0.0-alpha.21 → 10.0.0-alpha.22

package/scripts/{autogenerate.js → generate-docs.js}

@@ -1,49 +1,47 @@
-require('./autogenHelpers/globals');
+require("./utils/template-globals");
 
-const fs = require('fs');
-const path = require('path');
+const { execSync } = require("child_process");
+const ejs = require("ejs");
+const prettierrc = require("eslint-config-universe");
+const fs = require("fs");
+const path = require("path");
+const prettier = require("prettier");
 
-const ejs = require('ejs');
-
-const {execSync} = require('child_process');
-
-const prettier = require('prettier');
-const prettierrc = require('eslint-config-universe');
-
-const styleSpecJSON = require('../style-spec/v8.json');
-
-const DocJSONBuilder = require('./autogenHelpers/DocJSONBuilder');
-const MarkdownBuilder = require('./autogenHelpers/MarkdownBuilder');
+const { camelCase } = require("./utils/template-globals");
+const styleSpecJSON = require("../style-spec/v8.json");
+const DocJSONBuilder = require("./utils/DocJSONBuilder");
+const MarkdownBuilder = require("./utils/MarkdownBuilder");
 
 function readIosVersion() {
   const podspecPath = path.join(
     __dirname,
-    '..',
-    'maplibre-react-native.podspec',
+    "..",
+    "maplibre-react-native.podspec",
   );
-  const lines = fs.readFileSync(podspecPath, 'utf8').split('\n');
+  const lines = fs.readFileSync(podspecPath, "utf8").split("\n");
   const maplibreLineRegex = /^\s+version:\s*"(\d+\.\d+\.\d+)"$/;
-  const maplibreLine = lines.filter(i => maplibreLineRegex.exec(i))[0];
+  const maplibreLine = lines.filter((i) => maplibreLineRegex.exec(i))[0];
   return `${maplibreLineRegex.exec(maplibreLine)[1]}.0`;
 }
 
 function readAndroidVersion() {
   const buildGradlePath = path.join(
     __dirname,
-    '..',
-    'android',
-    'rctmln',
-    'build.gradle',
+    "..",
+    "android",
+    "rctmln",
+    "build.gradle",
   );
-  const lines = fs.readFileSync(buildGradlePath, 'utf8').split('\n');
-  const maplibreLineRegex = /^\s+implementation\s+"org.maplibre.gl:android-sdk:(\d+\.\d+\.\d+)"$/;
-  const maplibreLine = lines.filter(i => maplibreLineRegex.exec(i))[0];
+  const lines = fs.readFileSync(buildGradlePath, "utf8").split("\n");
+  const maplibreLineRegex =
+    /^\s+implementation\s+"org.maplibre.gl:android-sdk:(\d+\.\d+\.\d+)"$/;
+  const maplibreLine = lines.filter((i) => maplibreLineRegex.exec(i))[0];
   return maplibreLineRegex.exec(maplibreLine)[1];
 }
 
 if (!styleSpecJSON) {
   console.log(
-    'Could not find style spec, try running "yarn run fetch:style:spec"',
+    'Could not find style spec, try running "yarn generate:fetch-style-spec"',
   );
   process.exit(1);
 }
@@ -52,42 +50,42 @@ const layers = [];
 const androidVersion = readAndroidVersion();
 const iosVersion = readIosVersion();
 
-const TMPL_PATH = path.join(__dirname, 'templates');
+const TMPL_PATH = path.join(__dirname, "templates");
 
 const outputToExample = false;
 const OUTPUT_EXAMPLE_PREFIX = [
-  '..',
-  'example',
-  'node_modules',
-  '@maplibre',
-  'maplibre-react-native',
+  "..",
+  "example",
+  "node_modules",
+  "@maplibre",
+  "maplibre-react-native",
 ];
-const OUTPUT_PREFIX = outputToExample ? OUTPUT_EXAMPLE_PREFIX : ['..'];
+const OUTPUT_PREFIX = outputToExample ? OUTPUT_EXAMPLE_PREFIX : [".."];
 
-const IOS_OUTPUT_PATH = path.join(__dirname, ...OUTPUT_PREFIX, 'ios', 'RCTMLN');
+const IOS_OUTPUT_PATH = path.join(__dirname, ...OUTPUT_PREFIX, "ios", "RCTMLN");
 const ANDROID_OUTPUT_PATH = path.join(
   __dirname,
   ...OUTPUT_PREFIX,
-  'android',
-  'rctmln',
-  'src',
-  'main',
-  'java',
-  'com',
-  'maplibre',
-  'rctmln',
-  'components',
-  'styles',
+  "android",
+  "rctmln",
+  "src",
+  "main",
+  "java",
+  "com",
+  "maplibre",
+  "rctmln",
+  "components",
+  "styles",
 );
 const JS_OUTPUT_PATH = path.join(
   __dirname,
   ...OUTPUT_PREFIX,
-  'javascript',
-  'utils',
+  "javascript",
+  "utils",
 );
 
 getSupportedLayers(Object.keys(styleSpecJSON.layer.type.values)).forEach(
-  layerName => {
+  (layerName) => {
     layers.push({
       name: layerName,
       properties: getPropertiesForLayer(layerName),
@@ -96,12 +94,12 @@ getSupportedLayers(Object.keys(styleSpecJSON.layer.type.values)).forEach(
 );
 
 // add light as a layer
-layers.push({name: 'light', properties: getPropertiesForLight()});
+layers.push({ name: "light", properties: getPropertiesForLight() });
 
 function getPropertiesForLight() {
   const lightAttributes = styleSpecJSON.light;
 
-  return getSupportedProperties(lightAttributes).map(attrName => {
+  return getSupportedProperties(lightAttributes).map((attrName) => {
     return Object.assign({}, buildProperties(lightAttributes, attrName), {
       allowedFunctionTypes: [],
     });
@@ -112,41 +110,43 @@ function getPropertiesForLayer(layerName) {
   const paintAttributes = styleSpecJSON[`paint_${layerName}`];
   const layoutAttributes = styleSpecJSON[`layout_${layerName}`];
 
-  const paintProps = getSupportedProperties(paintAttributes).map(attrName => {
+  const paintProps = getSupportedProperties(paintAttributes).map((attrName) => {
     const prop = buildProperties(paintAttributes, attrName);
 
     // overrides
-    if (['line-width'].includes(attrName)) {
-      prop.allowedFunctionTypes = ['camera'];
+    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'];
-    }
-    // Overide type padding
-    if(prop.type === 'padding') {
-      prop.type = 'array';
-      prop.value = 'number';
-      prop.length = 4;
-    }
-    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"];
+      }
+      // Overide type padding
+      if (prop.type === "padding") {
+        prop.type = "array";
+        prop.value = "number";
+        prop.length = 4;
+      }
+      return prop;
+    },
+  );
 
   return layoutProps.concat(paintProps);
 }
@@ -157,7 +157,7 @@ function getSupportedLayers(layerNames) {
   const supportedLayers = [];
   for (const layerName of layerNames) {
     const layer = layerMap[layerName];
-    const support = getAttributeSupport(layer['sdk-support']);
+    const support = getAttributeSupport(layer["sdk-support"]);
 
     if (support.basic.android && support.basic.ios) {
       supportedLayers.push(layerName);
@@ -168,7 +168,7 @@ function getSupportedLayers(layerNames) {
 }
 
 function getSupportedProperties(attributes) {
-  return Object.keys(attributes).filter(attrName =>
+  return Object.keys(attributes).filter((attrName) =>
     isAttrSupported(attributes[attrName]),
   );
 }
@@ -194,23 +194,23 @@ function buildProperties(attributes, attrName) {
     expression: attributes[attrName].expression,
     expressionSupported:
       Object.keys(attributes[attrName].expression || {}).length > 0,
-    support: getAttributeSupport(attributes[attrName]['sdk-support']),
+    support: getAttributeSupport(attributes[attrName]["sdk-support"]),
     allowedFunctionTypes: getAllowedFunctionTypes(attributes[attrName]),
   };
 }
 
 function formatDescription(description) {
-  const words = description.split(' ');
+  const words = description.split(" ");
 
   for (let i = 0; i < words.length; i++) {
     const word = words[i];
 
-    if (word.includes('-')) {
+    if (word.includes("-")) {
       words[i] = camelCase(word);
     }
   }
 
-  return words.join(' ');
+  return words.join(" ");
 }
 
 function getRequires(requiredItems) {
@@ -221,8 +221,8 @@ function getRequires(requiredItems) {
   }
 
   for (const item of requiredItems) {
-    if (typeof item === 'string') {
-      items.push(camelCase(item, '-'));
+    if (typeof item === "string") {
+      items.push(camelCase(item, "-"));
     }
   }
 
@@ -237,8 +237,8 @@ function getDisables(disabledItems) {
   }
 
   for (const item of disabledItems) {
-    if (item['!']) {
-      items.push(camelCase(item['!'], '-'));
+    if (item["!"]) {
+      items.push(camelCase(item["!"], "-"));
     }
   }
 
@@ -247,30 +247,30 @@ function getDisables(disabledItems) {
 
 function isImage(attrName) {
   return (
-    attrName.toLowerCase().indexOf('pattern') !== -1 ||
-    attrName.toLowerCase().indexOf('image') !== -1
+    attrName.toLowerCase().indexOf("pattern") !== -1 ||
+    attrName.toLowerCase().indexOf("image") !== -1
   );
 }
 
 function isTranslate(attrName) {
-  return attrName.toLowerCase().indexOf('translate') !== -1;
+  return attrName.toLowerCase().indexOf("translate") !== -1;
 }
 
 function isAttrSupported(attr) {
-  const support = getAttributeSupport(attr['sdk-support']);
+  const support = getAttributeSupport(attr["sdk-support"]);
   if (attr.private) {
-    return false
+    return false;
   }
   return support.basic.android && support.basic.ios;
 }
 
 function getAttributeSupport(sdkSupport) {
   const support = {
-    basic: {android: false, ios: false},
-    data: {android: false, ios: false},
+    basic: { android: false, ios: false },
+    data: { android: false, ios: false },
   };
 
-  const basicSupport = sdkSupport && sdkSupport['basic functionality'];
+  const basicSupport = sdkSupport && sdkSupport["basic functionality"];
   if (basicSupport && basicSupport.android) {
     support.basic.android = isVersionGTE(androidVersion, basicSupport.android);
   }
@@ -278,7 +278,7 @@ function getAttributeSupport(sdkSupport) {
     support.basic.ios = isVersionGTE(iosVersion, basicSupport.ios);
   }
 
-  const dataDrivenSupport = sdkSupport && sdkSupport['data-driven styling'];
+  const dataDrivenSupport = sdkSupport && sdkSupport["data-driven styling"];
   if (dataDrivenSupport && dataDrivenSupport.android) {
     support.data.android = isVersionGTE(
       androidVersion,
@@ -299,26 +299,26 @@ function getAttributeSupport(sdkSupport) {
 
 function isVersionGTE(version, otherVersion) {
   const v = +version
-    .split('.')
-    .map(i => String(i).padStart(3, '0'))
-    .join('');
+    .split(".")
+    .map((i) => String(i).padStart(3, "0"))
+    .join("");
   const ov = +otherVersion
-    .split('.')
-    .map(i => String(i).padStart(3, '0'))
-    .join('');
+    .split(".")
+    .map((i) => String(i).padStart(3, "0"))
+    .join("");
   return v >= ov;
 }
 
 function getAllowedFunctionTypes(paintAttr) {
   const allowedFunctionTypes = [];
 
-  if (paintAttr['zoom-function']) {
-    allowedFunctionTypes.push('camera');
+  if (paintAttr["zoom-function"]) {
+    allowedFunctionTypes.push("camera");
   }
 
-  if (paintAttr['property-function']) {
-    allowedFunctionTypes.push('source');
-    allowedFunctionTypes.push('composite');
+  if (paintAttr["property-function"]) {
+    allowedFunctionTypes.push("source");
+    allowedFunctionTypes.push("composite");
   }
 
   return allowedFunctionTypes;
@@ -327,45 +327,52 @@ function getAllowedFunctionTypes(paintAttr) {
 async function generate() {
   const templateMappings = [
     {
-      input: path.join(TMPL_PATH, 'RCTMLNStyle.h.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'RCTMLNStyle.h'),
+      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, "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, "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, "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'),
+      input: path.join(TMPL_PATH, "styleMap.ts.ejs"),
+      output: path.join(JS_OUTPUT_PATH, "styleMap.ts"),
     },
   ];
-  const outputPaths = templateMappings.map(m => m.output);
+  const outputPaths = templateMappings.map((m) => m.output);
 
   // autogenerate code
-  await Promise.all(templateMappings.map(async ({input, output}) => {
-    const filename = output.split('/').pop();
-    console.log(`Generating ${filename}`);
-    const tmpl = ejs.compile(fs.readFileSync(input, 'utf8'), {strict: true});
-    let results = tmpl({layers});
-    if (filename.endsWith('ts')) {
-      results = await prettier.format(results, { ...prettierrc, 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[];');
-    }
-    fs.writeFileSync(output, results);
-  }));
+  await Promise.all(
+    templateMappings.map(async ({ input, output }) => {
+      const filename = output.split("/").pop();
+      console.log(`Generating ${filename}`);
+      const tmpl = ejs.compile(fs.readFileSync(input, "utf8"), {
+        strict: true,
+      });
+      let results = tmpl({ layers });
+      if (filename.endsWith("ts")) {
+        results = await prettier.format(results, {
+          ...prettierrc,
+          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[];");
+      }
+      fs.writeFileSync(output, results);
+    }),
+  );
 
   // autogenerate docs
   const docBuilder = new DocJSONBuilder(layers);
@@ -375,11 +382,11 @@ async function generate() {
 
   // Check if any generated files changed
   try {
-    execSync(`git diff --exit-code docs/ ${outputPaths.join(' ')}`);
-  } catch (error) {
+    execSync(`git diff --exit-code docs/ ${outputPaths.join(" ")}`);
+  } catch (_error) {
     console.error(
-      '\n\nThere are unstaged changes in the generated code. ' +
-        'Please add them to your commit.\n' +
+      "\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);

package/scripts/templates/MaplibreStyles.ts.ejs

@@ -59,19 +59,19 @@ export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
   | Expression;
 
 <%_ for (let enumInfo of getEnums(layers)) { _%>
-  enum <%- pascelCase(enumInfo.name) %>Enum {
+  enum <%- pascalCase(enumInfo.name) %>Enum {
     <%_ for (let k of Object.keys(enumInfo.values)) { _%>
       /** <%- enumInfo.values[k].doc %> */
-      <%- pascelCase(k) %> = '<%- k %>',
+      <%- pascalCase(k) %> = '<%- k %>',
     <%_ } _%>
   }
-  type <%- pascelCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>; 
+  type <%- 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 <%- pascelCase(layer.name) %>LayerStyleProps {
+  export interface <%- pascalCase(layer.name) %>LayerStyleProps {
     <%_ for (let prop of layer.properties) { _%>
       /**
        * <%- prop.doc.description %>
@@ -96,4 +96,4 @@ type Enum<EnumType, EnumValues> = EnumType | EnumValues;
   };
 <%_ } _%>
 
-export type AllLayerStyleProps = <%- layers.map(l => `${pascelCase(l.name)}LayerStyleProps`).join("|") -%>;
+export type AllLayerStyleProps = <%- layers.map(l => `${pascalCase(l.name)}LayerStyleProps`).join("|") -%>;

package/scripts/templates/RCTMLNStyle.h.ejs

@@ -23,9 +23,9 @@
 
 <%_ for (const layer of layers) { _%>
 <%_ for (const prop of layer.properties) { _%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
+- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 <%_ if (prop.transition) { _%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
+- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 <%_ } _%>
 <%_ } _%>
 <% } %>

package/scripts/templates/RCTMLNStyle.m.ejs

@@ -37,7 +37,7 @@
   <%- ifOrElseIf(i) -%> ([prop isEqualToString:@"<%= layer.properties[i].name %>"]) {
   <%_ if (layer.properties[i].image) { _%>
       if (![styleValue shouldAddImage]) {
-        [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+        [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
@@ -46,18 +46,18 @@
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {
                 [self->_style setImage:image forName:imageURI];
-                [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+                [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
               }
             });
           }
         }];
       }
   <%_ } else { _%>
-      [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+      [self set<%- iosPropMethodName(layer, 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, pascelCase(layer.properties[i].name)) -%>Transition:layer withReactStyleValue:styleValue];
+      [self set<%- iosPropMethodName(layer, pascalCase(layer.properties[i].name)) -%>Transition:layer withReactStyleValue:styleValue];
   <%_ } _%>
   <% } -%>
   } else {
@@ -69,7 +69,7 @@
 
 <% for (const layer of layers) {%>
 <% for (const prop of layer.properties) {%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
+- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
 {
     <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
     layer.position = [styleValue getSphericalPosition];
@@ -81,7 +81,7 @@
 }
 <%_ if (prop.transition) { _%>
 
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
+- (void)set<%- iosPropMethodName(layer, pascalCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
 {
     layer.<%- iosPropName(prop.name) -%>Transition = [styleValue getTransition];
 }

package/scripts/templates/RCTMLNStyleFactory.java.ejs

@@ -46,16 +46,16 @@ public class RCTMLNStyleFactory {
               style.addImage(styleValue, new DownloadMapImageTask.OnAllImagesLoaded() {
                   @Override
                   public void onAllImagesLoaded() {
-                      RCTMLNStyleFactory.set<%- pascelCase(prop.name) -%>(layer, styleValue);
+                      RCTMLNStyleFactory.set<%- pascalCase(prop.name) -%>(layer, styleValue);
                   }
               });
               <%_ } else { _%>
-              RCTMLNStyleFactory.set<%- pascelCase(prop.name) -%>(layer, styleValue);
+              RCTMLNStyleFactory.set<%- pascalCase(prop.name) -%>(layer, styleValue);
               <%_ } _%>
               break;
             <%_ if (prop.transition) { _%>
             case "<%= prop.name %>Transition":
-              RCTMLNStyleFactory.set<%- pascelCase(prop.name) -%>Transition(layer, styleValue);
+              RCTMLNStyleFactory.set<%- pascalCase(prop.name) -%>Transition(layer, styleValue);
               break;
             <%_ } _%>
           <%_ } _%>
@@ -66,12 +66,12 @@ public class RCTMLNStyleFactory {
 
   <%_ for (const layer of layers) { _%>
   <%_ for (const prop of layer.properties) { _%>
-    public static void set<%- pascelCase(prop.name) -%>(<%- getLayerType(layer, 'android') -%> layer, RCTMLNStyleValue styleValue) {
+    public static void set<%- pascalCase(prop.name) -%>(<%- getLayerType(layer, 'android') -%> layer, RCTMLNStyleValue styleValue) {
       <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
       Float[] values = styleValue.getFloatArray(VALUE_KEY);
-      layer.set<%- pascelCase(prop.name) -%>(Position.fromPosition(values[0], values[1], values[2]));
+      layer.set<%- pascalCase(prop.name) -%>(Position.fromPosition(values[0], values[1], values[2]));
       <%_ } else if (layer.name === 'light') { _%>
-      layer.set<%- pascelCase(prop.name) -%>(<%- androidGetConfigType(androidInputType(prop.type, prop.value), prop) -%>);
+      layer.set<%- pascalCase(prop.name) -%>(<%- androidGetConfigType(androidInputType(prop.type, prop.value), prop) -%>);
       <%_ } else if (prop.name === 'visibility') { _%>
       layer.setProperties(PropertyFactory.visibility(styleValue.getString(VALUE_KEY)));
       <%_ } else if (prop.type === 'resolvedImage') { _%>
@@ -94,10 +94,10 @@ public class RCTMLNStyleFactory {
     }
 
     <%_ if (prop.transition) { %>
-    public static void set<%- pascelCase(prop.name) -%>Transition(<%- getLayerType(layer, 'android') -%> layer, RCTMLNStyleValue styleValue) {
+    public static void set<%- pascalCase(prop.name) -%>Transition(<%- getLayerType(layer, 'android') -%> layer, RCTMLNStyleValue styleValue) {
       TransitionOptions transition = styleValue.getTransition();
       if (transition != null) {
-        layer.set<%- pascelCase(prop.name) -%>Transition(transition);
+        layer.set<%- pascalCase(prop.name) -%>Transition(transition);
       }
     }