fixed "Warning: FontAwesomeIcon: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead." (#171)

Author: gregmarut

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);
 

src/components/FontAwesomeIcon.js

@@ -39,15 +39,28 @@ function normalizeIconArgs (icon) {
 }
 
 export default function FontAwesomeIcon (props) {
-  const { icon: iconArgs, mask: maskArgs, maskId, height, width, size } = props
-  const style = StyleSheet.flatten(props.style)
+  const _props = {
+    icon: null,
+    mask: null,
+    maskId: null,
+    transform: null,
+    style: {},
+    color: null,
+    secondaryColor: null,
+    secondaryOpacity: null,
+    size: DEFAULT_SIZE,
+    ...props
+  };
+
+  const { icon: iconArgs, mask: maskArgs, maskId, height, width, size } = _props
+  const style = StyleSheet.flatten(_props.style)
 
   const iconLookup = normalizeIconArgs(iconArgs)
   const transform = objectWithKey(
     'transform',
-    typeof props.transform === 'string'
-      ? parse.transform(props.transform)
-      : props.transform
+    typeof _props.transform === 'string'
+      ? parse.transform(_props.transform)
+      : _props.transform
   )
   const mask = objectWithKey('mask', normalizeIconArgs(maskArgs))
 
@@ -65,14 +78,14 @@ export default function FontAwesomeIcon (props) {
   const { abstract } = renderedIcon
 
   // This is the color that will be passed to the "fill" prop of the Svg element
-  const color = props.color || style.color || DEFAULT_COLOR
+  const 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
-  const secondaryColor = props.secondaryColor || color
+  const secondaryColor = _props.secondaryColor || color
 
   // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
-  const secondaryOpacity = props.secondaryOpacity || DEFAULT_SECONDARY_OPACITY
+  const 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.
@@ -137,18 +150,6 @@ FontAwesomeIcon.propTypes = {
   transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 }
 
-FontAwesomeIcon.defaultProps = {
-  icon: null,
-  mask: null,
-  maskId: null,
-  transform: null,
-  style: {},
-  color: null,
-  secondaryColor: null,
-  secondaryOpacity: null,
-  size: DEFAULT_SIZE
-}
-
 const convertCurry = convert.bind(null, React.createElement)
 
 function replaceCurrentColor (obj, primaryColor, secondaryColor, secondaryOpacity) {