Allow nullable / undefined props

.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

package.json

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