Release 0.3.2

.github/workflows/tests.yml

@@ -9,13 +9,19 @@ jobs:
     strategy:
       matrix:
         node: [
-          18.x
+          18.16.x
         ]
         fontawesome-svg-core: [
           1.2.x,
           6.x
         ]
         react-native: [
+          latest,
+          0.73.x,
+          0.72.x,
+          0.71.x,
+          0.70.x,
+          0.69.x,
           0.68.x,
           0.67.x
         ]
@@ -32,11 +38,11 @@ jobs:
       - name: npm install and test
         run: |
           sudo apt-get install -y jq
-          npm install -g npm
+          npm install -g npm@9
           npm install
-          npm install --no-save @fortawesome/fontawesome-svg-core@${{ matrix.fontawesome-svg-core }} react-native@${{ matrix.react-native }}
+          npm install --no-save --force @fortawesome/fontawesome-svg-core@${{ matrix.fontawesome-svg-core }} react-native@${{ matrix.react-native }}
           export REACT_VERSION=`cat node_modules/react-native/package.json|jq -r .peerDependencies.react`
           npm install --no-save react@${REACT_VERSION} react-dom@${REACT_VERSION} react-test-renderer@${REACT_VERSION}
-          npm list react react-dom react-test-renderer react-native-svg
+          npm list --depth 0 react react-dom react-test-renderer react-native-svg || exit 0
           npm run lint
           npm test

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 16.13.1
+nodejs 18.16.0
 python 3.10.4

CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ---
 
+## [0.3.2](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.3.2) - 2024-05-23
+
+### Fixed
+
+- Props with nullable/undefined values no longer throw an error
+
+---
+
 ## [0.3.1](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.3.1) - 2024-05-16
 
 ### Changed

dist/components/FontAwesomeIcon.js

@@ -109,7 +109,7 @@ 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
@@ -118,8 +118,9 @@ function FontAwesomeIcon(props) {
   // 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.
 
-  var styleColor = style.color,
-      modifiedStyle = _objectWithoutProperties(style, _excluded);
+  var _ref2 = style || {},
+      styleColor = _ref2.color,
+      modifiedStyle = _objectWithoutProperties(_ref2, _excluded);
 
   var resolvedHeight, resolvedWidth;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fortawesome/react-native-fontawesome",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Official React Native component for Font Awesome",
   "main": "index.js",
   "scripts": {
@@ -53,7 +53,7 @@
     "eslint-plugin-react": "^7.30.0",
     "jest": "^28.1.0",
     "metro-react-native-babel-preset": "^0.57.0",
-    "react": "^17",
+    "react": "^17 || ^18",
     "react-native": "^0.68.0",
     "react-native-svg": "^12.3.0",
     "react-test-renderer": "^17"

src/components/FontAwesomeIcon.js

@@ -50,7 +50,7 @@ export default function FontAwesomeIcon (props) {
     secondaryOpacity: null,
     size: DEFAULT_SIZE,
     ...props
-  };
+  }
 
   const { icon: iconArgs, mask: maskArgs, maskId, height, width, size } = _props
   const style = StyleSheet.flatten(_props.style)
@@ -78,7 +78,7 @@ 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
@@ -90,7 +90,7 @@ export default function FontAwesomeIcon (props) {
   // 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.
-  const { color: styleColor, ...modifiedStyle } = style
+  const { color: styleColor, ...modifiedStyle } = (style || {})
 
   let resolvedHeight, resolvedWidth
 

src/components/__tests__/FontAwesomeIcon.test.js

@@ -145,6 +145,26 @@ describe('snapshots', () => {
   })
 })
 
+describe('using defaultProps', () => {
+  const UNDEFINED_DEFAULT_PROPS = {
+    icon: undefined,
+    mask: undefined,
+    maskId: undefined,
+    transform: undefined,
+    style: undefined,
+    color: undefined,
+    secondaryColor: undefined,
+    secondaryOpacity: undefined,
+    size: undefined
+  }
+
+  test('undefined props passed', () => {
+    expect(() =>
+      renderer.create(<FontAwesomeIcon {...UNDEFINED_DEFAULT_PROPS} icon={ faCoffee } />).toJSON()
+    ).not.toThrow(TypeError)
+  })
+})
+
 describe('when icon prop', () => {
   beforeEach(() => {
     fontawesome.library.add(faCoffee, faCircle, faSquare, faAcorn)