Allow nullable / undefined props (#173)

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