Warning: FontAwesomeIcon: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

[swrobel]

Describe the bug When building with React Native 0.74.0, I get the following error on use of <FontAwesomeIcon>

Reproducible test case Include a URL (codepen.io, jsfiddle.net, Git repository, codesandbox.io, stackblitz.com, etc.) that demonstrates the problem.

Expected behavior No warnings generated

Desktop (please complete the following information):

react-native@0.74.0:
  version "0.74.0"

react@18.2:
  version "18.2.0"

"@fortawesome/pro-solid-svg-icons@^6.1.2":
  version "6.5.2"

"@fortawesome/react-fontawesome@0.2.0":
  version "0.2.0"

"@fortawesome/react-native-fontawesome@^0.3.0":
  version "0.3.0"

Additional context Add any other context about the problem here.

[gregmarut]

For anyone else experiencing this issue, here is the patch (using patch-package) until this gets merged.

diff --git a/node_modules/@fortawesome/react-native-fontawesome/dist/components/FontAwesomeIcon.js b/node_modules/@fortawesome/react-native-fontawesome/dist/components/FontAwesomeIcon.js
index 3d1274d..4146c60 100644
--- a/node_modules/@fortawesome/react-native-fontawesome/dist/components/FontAwesomeIcon.js
+++ b/node_modules/@fortawesome/react-native-fontawesome/dist/components/FontAwesomeIcon.js
@@ -74,17 +74,29 @@ function normalizeIconArgs(icon) {
 }

 function FontAwesomeIcon(props) {
-  var iconArgs = props.icon,
-      maskArgs = props.mask,
-      maskId = props.maskId,
-      height = props.height,
-      width = props.width,
-      size = props.size;
-
-  var style = _reactNative.StyleSheet.flatten(props.style);
+  var _props = _objectSpread({
+    icon: null,
+    mask: null,
+    maskId: null,
+    transform: null,
+    style: {},
+    color: null,
+    secondaryColor: null,
+    secondaryOpacity: null,
+    size: DEFAULT_SIZE
+  }, props);
+
+  var iconArgs = _props.icon,
+      maskArgs = _props.mask,
+      maskId = _props.maskId,
+      height = _props.height,
+      width = _props.width,
+      size = _props.size;
+
+  var style = _reactNative.StyleSheet.flatten(_props.style);

   var iconLookup = normalizeIconArgs(iconArgs);
-  var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
+  var transform = objectWithKey('transform', typeof _props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(_props.transform) : _props.transform);
   var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
   var renderedIcon = (0, _fontawesomeSvgCore.icon)(iconLookup, _objectSpread(_objectSpread(_objectSpread({}, transform), mask), {}, {
     maskId: maskId
@@ -97,12 +109,12 @@ function FontAwesomeIcon(props) {

   var _abstract = renderedIcon["abstract"]; // This is the color that will be passed to the "fill" prop of the Svg element

-  var color = props.color || 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)
+  var color = _props.color || 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

-  var secondaryColor = props.secondaryColor || color; // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
+  var secondaryColor = _props.secondaryColor || color; // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given

-  var secondaryOpacity = props.secondaryOpacity || DEFAULT_SECONDARY_OPACITY; // To avoid confusion down the line, we'll remove properties from the StyleSheet, like color, that are being overridden
+  var secondaryOpacity = _props.secondaryOpacity || 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.

@@ -141,17 +153,6 @@ FontAwesomeIcon.propTypes = {
   maskId: _propTypes["default"].string,
   transform: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])
 };
-FontAwesomeIcon.defaultProps = {
-  icon: null,
-  mask: null,
-  maskId: null,
-  transform: null,
-  style: {},
-  color: null,
-  secondaryColor: null,
-  secondaryOpacity: null,
-  size: DEFAULT_SIZE
-};

 var convertCurry = _converter["default"].bind(null, _react["default"].createElement);

[eduardinni]

Here's the component translated to typescript, also gets rid of react-native-svg peer dependency incompatibility.

https://gist.github.com/eduardinni/3208a4c8159f689950ec9995a04097c8

[kayandra]

@eduardinni I made a simpler solution

import React from 'react'
import {
  FontAwesomeIcon as FontAwesomeIconPatched,
  type Props as FontAwesomeIconProps,
} from "@fortawesome/react-native-fontawesome";

// @ts-expect-error remove defaultProps
FontAwesomeIconPatched.defaultProps = undefined;

export function FontAwesomeIcon(props: FontAwesomeIconProps) {
  const style = props.style ?? {}
  return <FontAwesomeIconPatched {...props} style={style} />;
}

[robmadole]

I've released 0.3.1 which should address this issue. If anyone finds a problem just let me know.