@fortawesome/react-native-fontawesome 0.3.2 → 1.0.0-alpha.1

package/package.json

@@ -1,78 +1,189 @@
 {
   "name": "@fortawesome/react-native-fontawesome",
-  "version": "0.3.2",
+  "version": "1.0.0-alpha.1",
   "description": "Official React Native component for Font Awesome",
-  "main": "index.js",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
   "scripts": {
-    "test": "jest --forceExit",
-    "lint": "eslint src",
-    "dist:watch": "babel --watch --config-file ./babel.dist.config.js src --ignore src/components/__tests__ --out-dir dist",
-    "dist": "babel --config-file ./babel.dist.config.js src --ignore src/components/__tests__ --ignore src/components/__fixtures__ --out-dir dist",
-    "set.rnsvg": "yarn upgrade react-native-svg@$RNSVG_VERSION"
+    "example": "npm run --workspace=react-native-fontawesome-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "test": "NODE_OPTIONS='--localstorage-file=/tmp/jest-localstorage.db' jest",
+    "release": "release-it --only-version",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
   },
-  "types": "index.d.ts",
-  "homepage": "https://github.com/FortAwesome/react-native-fontawesome",
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/FortAwesome/react-native-fontawesome.git"
+    "url": "git+https://github.com/FortAwesome/react-native-fontawesome.git"
   },
-  "contributors": [
-    "Travis Chase <travis@fontawesome.com>",
-    "Rob Madole <rob@fontawesome.com>",
-    "Mike Wilkerson <mwilkerson@gmail.com>",
-    "Dizy <mhisf@vip.qq.com>",
-    "David Martin <github.com/iamdavidmartin>",
-    "Jeremy <github.com/puremana>",
-    "Michael Schonfeld <github.com/schonfeld>",
-    "Ádám Gólya <github.com/golya>",
-    "Edward Emanuel <github.com/ej2>",
-    "Jason Lundien <github.com/jasonlundien>",
-    "Greg Marut <github.com/gregmarut>"
-  ],
+  "author": "Font Awesome Team <hello@fontawesome.com> (https://fontawesome.com)",
   "license": "MIT",
-  "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-    "react-native": ">= 0.67",
-    "react-native-svg": ">= 11.x"
+  "bugs": {
+    "url": "https://github.com/FortAwesome/react-native-fontawesome/issues"
+  },
+  "homepage": "https://github.com/FortAwesome/react-native-fontawesome#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.5",
-    "@babel/core": "^7.7.5",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/runtime": "^7.7.6",
-    "@fortawesome/fontawesome-svg-core": "^6",
-    "babel-core": "^7.0.0-bridge",
-    "babel-jest": "^24.9.0",
-    "eslint": "^8.16.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.2.2",
-    "eslint-plugin-n": "^15.2.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "jest": "^28.1.0",
-    "metro-react-native-babel-preset": "^0.57.0",
-    "react": "^17 || ^18",
-    "react-native": "^0.68.0",
-    "react-native-svg": "^12.3.0",
-    "react-test-renderer": "^17"
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/humps": "^2.0.6",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.23",
+    "@types/react": "^19.1.12",
+    "@types/react-test-renderer": "^19.1.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-native": "^5.0.0",
+    "hermes-eslint": "^0.33.3",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "lodash": "^4.17.23",
+    "prettier": "^3.3.3",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-svg": "^15.15.1",
+    "react-test-renderer": "^19.1.0",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
   },
-  "dependencies": {
-    "humps": "^2.0.1",
-    "prop-types": "^15.7.2"
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "~7",
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": ">=11"
   },
-  "files": [
-    "index.js",
-    "index.d.ts",
-    "dist/converter.js",
-    "dist/logger.js",
-    "dist/components/FontAwesomeIcon.js"
+  "workspaces": [
+    "example"
   ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
   "jest": {
     "preset": "react-native",
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "react-native"
+      ]
+    },
     "modulePathIgnorePatterns": [
-      "<rootDir>/examples"
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ],
+    "testPathIgnorePatterns": [
+      "<rootDir>/node_modules/",
+      "<rootDir>/lib/",
+      "<rootDir>/src/__tests__/__fixtures__/",
+      "<rootDir>/src/__tests__/__snapshots__/"
+    ],
+    "fakeTimers": {
+      "enableGlobally": false
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
     ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": false
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "jest",
+      "lefthook",
+      "release-it",
+      "eslint"
+    ],
+    "version": "0.57.0"
+  },
+  "dependencies": {
+    "humps": "^2.0.1"
   }
 }

package/src/FontAwesomeIcon.tsx

@@ -0,0 +1,331 @@
+import React from 'react';
+import convert from './converter';
+import { StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { icon, parse } from '@fortawesome/fontawesome-svg-core';
+import type {
+  Transform,
+  IconProp,
+  IconPrefix,
+  IconName,
+  IconLookup as FAIconLookup,
+  IconDefinition as FAIconDefinition,
+} from '@fortawesome/fontawesome-svg-core';
+import log from './logger';
+
+export const DEFAULT_SIZE = 16;
+export const DEFAULT_COLOR = '#000';
+export const DEFAULT_SECONDARY_OPACITY = 0.4;
+
+export type FontAwesomeIconStyle = StyleProp<ViewStyle> & {
+  color?: string;
+};
+
+export interface Props {
+  icon: IconProp;
+  /** @deprecated Use size instead */
+  height?: number;
+  /** @deprecated Use size instead */
+  width?: number;
+  size?: number;
+  color?: string;
+  secondaryColor?: string;
+  secondaryOpacity?: number;
+  mask?: IconProp;
+  maskId?: string;
+  transform?: string | Transform;
+  style?: FontAwesomeIconStyle;
+  testID?: string;
+}
+
+type IconLookupOrDefinition = FAIconLookup | FAIconDefinition;
+
+interface AbstractElement {
+  tag: string;
+  attributes: Record<string, unknown>;
+  children?: (AbstractElement | string)[];
+}
+
+function objectWithKey(
+  key: string,
+  value: unknown
+): Record<string, unknown> | Record<string, never> {
+  return (Array.isArray(value) && value.length > 0) ||
+    (!Array.isArray(value) && value)
+    ? { [key]: value }
+    : {};
+}
+
+function normalizeIconArgs(
+  iconArg: IconProp | null | undefined
+): IconLookupOrDefinition | null {
+  // If it's a full icon definition object (with prefix, iconName, and icon array),
+  // return it as-is so icon() can use it directly
+  if (
+    iconArg &&
+    typeof iconArg === 'object' &&
+    'prefix' in iconArg &&
+    'iconName' in iconArg &&
+    'icon' in iconArg
+  ) {
+    return iconArg as FAIconDefinition;
+  }
+
+  if ((parse as { icon?: (icon: IconProp) => FAIconLookup }).icon) {
+    return (parse as { icon: (icon: IconProp) => FAIconLookup }).icon(
+      iconArg as IconProp
+    );
+  }
+
+  if (iconArg === null) {
+    return null;
+  }
+
+  if (Array.isArray(iconArg) && iconArg.length === 2) {
+    return {
+      prefix: iconArg[0] as IconPrefix,
+      iconName: iconArg[1] as IconName,
+    };
+  }
+
+  if (typeof iconArg === 'string') {
+    return { prefix: 'fas' as IconPrefix, iconName: iconArg as IconName };
+  }
+
+  return null;
+}
+
+export default function FontAwesomeIcon(
+  props: Props
+): React.ReactElement | null {
+  const {
+    icon: iconArgs,
+    mask: maskArgs,
+    maskId = null,
+    height,
+    width,
+    size = DEFAULT_SIZE,
+    style: styleInput = {},
+    color: colorInput = null,
+    secondaryColor: secondaryColorInput = null,
+    secondaryOpacity: secondaryOpacityInput = null,
+    transform: transformInput = null,
+  } = props;
+  const style = StyleSheet.flatten(styleInput) as Record<
+    string,
+    unknown
+  > | null;
+
+  const iconLookup = normalizeIconArgs(iconArgs);
+  const transform = objectWithKey(
+    'transform',
+    typeof transformInput === 'string'
+      ? parse.transform(transformInput)
+      : transformInput
+  );
+  const mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
+
+  const renderedIcon = icon(iconLookup as IconLookupOrDefinition, {
+    ...transform,
+    ...mask,
+    maskId: maskId ?? undefined,
+  });
+
+  if (!renderedIcon) {
+    log('ERROR: icon not found for icon = ', iconArgs);
+    return null;
+  }
+
+  const { abstract } = renderedIcon;
+
+  // This is the color that will be passed to the "fill" prop of the Svg element
+  const color = colorInput || (style || {}).color || DEFAULT_COLOR;
+
+  // This is the color that will be passed to the "fill" prop of the secondary Path element child (in Duotone Icons)
+  // `null` value will result in using the primary color, at 40% opacity
+  const secondaryColor = secondaryColorInput || color;
+
+  // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
+  const secondaryOpacity = secondaryOpacityInput || DEFAULT_SECONDARY_OPACITY;
+
+  // To avoid confusion down the line, we'll remove properties from the StyleSheet, like color, that are being overridden
+  // or resolved in other ways, to avoid ambiguity as to which inputs cause which outputs in the underlying rendering process.
+  // In other words, we don't want color (for example) to be specified via two different inputs.
+  // Intentionally extract and discard color from style to avoid ambiguity
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { color: _styleColor, ...modifiedStyle } = style || {};
+
+  let resolvedHeight: number;
+  let resolvedWidth: number;
+
+  if (height || width) {
+    throw new Error(
+      `Prop height and width for component ${FontAwesomeIcon.displayName} have been deprecated. ` +
+        `Use the size prop instead like <${FontAwesomeIcon.displayName} size={${width}} />.`
+    );
+  } else {
+    resolvedHeight = resolvedWidth = size || DEFAULT_SIZE;
+  }
+
+  const rootAttributes = (abstract[0] as AbstractElement).attributes;
+
+  rootAttributes.height = resolvedHeight;
+  rootAttributes.width = resolvedWidth;
+  rootAttributes.style = modifiedStyle;
+
+  replaceCurrentColor(
+    abstract[0] as AbstractElement,
+    color as string,
+    secondaryColor as string,
+    secondaryOpacity
+  );
+
+  // Expand viewBox for FA7 overflow icon support
+  // This must happen before percentage replacement to ensure correct dimensions
+  if (rootAttributes.viewBox) {
+    rootAttributes.viewBox = expandViewBox(rootAttributes.viewBox as string);
+  }
+
+  // Parse viewBox to get dimensions for percentage replacement
+  // viewBox format: "minX minY width height" e.g., "0 -32 512 576" (after expansion)
+  const viewBox = rootAttributes.viewBox as string | undefined;
+  if (viewBox) {
+    const parts = viewBox.split(' ').map(Number);
+    if (parts.length === 4) {
+      const vbWidth = parts[2];
+      const vbHeight = parts[3];
+      if (vbWidth !== undefined && vbHeight !== undefined) {
+        replacePercentages(abstract[0] as AbstractElement, vbWidth, vbHeight);
+      }
+    }
+  }
+
+  // AbstractElement input always produces a ReactElement (not string), so cast is safe
+  return convertCurry(abstract[0] as AbstractElement) as React.ReactElement;
+}
+
+FontAwesomeIcon.displayName = 'FontAwesomeIcon';
+
+const convertCurry = convert.bind(null, React.createElement);
+
+function replaceCurrentColor(
+  obj: AbstractElement,
+  primaryColor: string,
+  secondaryColor: string,
+  secondaryOpacity: number
+): void {
+  (obj.children || []).forEach((child) => {
+    if (typeof child === 'string') return;
+
+    replaceFill(child, primaryColor, secondaryColor, secondaryOpacity);
+
+    if (Object.prototype.hasOwnProperty.call(child, 'attributes')) {
+      replaceFill(
+        child.attributes,
+        primaryColor,
+        secondaryColor,
+        secondaryOpacity
+      );
+    }
+
+    if (Array.isArray(child.children) && child.children.length > 0) {
+      replaceCurrentColor(
+        child,
+        primaryColor,
+        secondaryColor,
+        secondaryOpacity
+      );
+    }
+  });
+}
+
+function replaceFill(
+  obj: Record<string, unknown> | AbstractElement,
+  primaryColor: string,
+  secondaryColor: string,
+  secondaryOpacity: number
+): void {
+  if (hasPropertySetToValue(obj, 'fill', 'currentColor')) {
+    if (hasPropertySetToValue(obj, 'class', 'fa-primary')) {
+      (obj as Record<string, unknown>).fill = primaryColor;
+    } else if (hasPropertySetToValue(obj, 'class', 'fa-secondary')) {
+      (obj as Record<string, unknown>).fill = secondaryColor;
+      (obj as Record<string, unknown>).fillOpacity = secondaryOpacity;
+    } else {
+      (obj as Record<string, unknown>).fill = primaryColor;
+    }
+  }
+}
+
+function hasPropertySetToValue(
+  obj: Record<string, unknown> | AbstractElement,
+  property: string,
+  value: unknown
+): boolean {
+  return (
+    Object.prototype.hasOwnProperty.call(obj, property) &&
+    (obj as Record<string, unknown>)[property] === value
+  );
+}
+
+/**
+ * Expands the viewBox to accommodate Font Awesome 7 icons that overflow their standard viewBox.
+ * FA7 introduced icons where paths extend beyond the declared viewBox boundaries.
+ * React Native clips content to the viewBox (unlike web browsers which support CSS overflow: visible).
+ * This expansion adds vertical space by subtracting 32 from minY and adding 64 to height.
+ *
+ * @param viewBox - The original viewBox string in format "minX minY width height"
+ * @returns The expanded viewBox string with adjusted minY and height
+ */
+export function expandViewBox(viewBox: string): string {
+  const parts = viewBox.split(' ').map(Number);
+  if (parts.length !== 4) return viewBox;
+
+  const minX = parts[0];
+  const minY = parts[1];
+  const width = parts[2];
+  const height = parts[3];
+
+  // Validate that all parts are valid numbers
+  if (
+    minX === undefined ||
+    minY === undefined ||
+    width === undefined ||
+    height === undefined ||
+    isNaN(minX) ||
+    isNaN(minY) ||
+    isNaN(width) ||
+    isNaN(height)
+  ) {
+    return viewBox;
+  }
+
+  // Expand for FA7 overflow icons: subtract 32 from minY, add 64 to height
+  return `${minX} ${minY - 32} ${width} ${height + 64}`;
+}
+
+/**
+ * react-native-svg has issues with percentage values like "100%" in masks and rects.
+ * This function replaces percentage values with actual numeric values based on the viewBox.
+ */
+function replacePercentages(
+  obj: AbstractElement,
+  viewBoxWidth: number,
+  viewBoxHeight: number
+): void {
+  const attrs = obj.attributes as Record<string, unknown> | undefined;
+  if (attrs) {
+    if (attrs.width === '100%') {
+      attrs.width = viewBoxWidth;
+    }
+    if (attrs.height === '100%') {
+      attrs.height = viewBoxHeight;
+    }
+  }
+
+  (obj.children || []).forEach((child) => {
+    if (typeof child !== 'string') {
+      replacePercentages(child, viewBoxWidth, viewBoxHeight);
+    }
+  });
+}

package/src/converter.ts

@@ -0,0 +1,71 @@
+import type React from 'react';
+import humps from 'humps';
+import { Svg, Path, Rect, Defs, Mask, G, ClipPath } from 'react-native-svg';
+
+interface AbstractElement {
+  tag: string;
+  attributes?: Record<string, unknown>;
+  children?: (AbstractElement | string)[];
+}
+
+type CreateElementFn = typeof import('react').createElement;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- required for dynamic component lookup from FA abstract elements
+const svgObjectMap: Record<string, React.ComponentType<any>> = {
+  svg: Svg,
+  path: Path,
+  rect: Rect,
+  defs: Defs,
+  mask: Mask,
+  g: G,
+  clipPath: ClipPath,
+};
+
+function convert(
+  createElement: CreateElementFn,
+  element: AbstractElement | string
+): React.ReactNode {
+  if (typeof element === 'string') {
+    return element;
+  }
+
+  const children = (element.children || []).map((child) => {
+    return convert(createElement, child);
+  });
+
+  const mixins = Object.keys(element.attributes || {}).reduce(
+    (acc, key) => {
+      const val = (element.attributes as Record<string, unknown>)[key];
+      switch (key) {
+        case 'class':
+        case 'role':
+        case 'xmlns':
+          delete (element.attributes as Record<string, unknown>)[key];
+          break;
+        case 'focusable':
+          acc.attrs[key] = val === 'true';
+          break;
+        default:
+          if (
+            key.indexOf('aria-') === 0 ||
+            key.indexOf('data-') === 0 ||
+            (key === 'fill' && val === 'currentColor')
+          ) {
+            delete (element.attributes as Record<string, unknown>)[key];
+          } else {
+            acc.attrs[humps.camelize(key)] = val;
+          }
+      }
+      return acc;
+    },
+    { attrs: {} as Record<string, unknown> }
+  );
+
+  return createElement(
+    svgObjectMap[element.tag] as React.ComponentType,
+    { ...mixins.attrs },
+    ...children
+  );
+}
+
+export default convert;

package/src/index.tsx

@@ -0,0 +1,7 @@
+export { default as FontAwesomeIcon } from './FontAwesomeIcon';
+export {
+  DEFAULT_SIZE,
+  DEFAULT_COLOR,
+  DEFAULT_SECONDARY_OPACITY,
+} from './FontAwesomeIcon';
+export type { Props, FontAwesomeIconStyle } from './FontAwesomeIcon';

package/src/logger.ts

@@ -0,0 +1,7 @@
+const PRODUCTION = false;
+
+export default function log(...args: unknown[]): void {
+  if (!PRODUCTION && console && typeof console.error === 'function') {
+    console.error(...args);
+  }
+}