'Warning: React does not recognize the `secondaryFill` prop on a DOM element

My code in App.js

import * as React from 'react'
import { View } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
library.add(faEllipsisV)

export default function App() {
  return (
    <View>
      <FontAwesomeIcon icon="ellipsis-v" />
    </View>
  )
}

Produce following warnings:

Warning: React does not recognize the secondaryFill prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase secondaryfill instead. If you accidentally passed it from a parent component, remove it from the DOM element. in path (created by Path) in Path (created by FontAwesomeIcon) in svg (created by Svg) in Svg (created by FontAwesomeIcon) in FontAwesomeIcon (at App.js:24) in div (created by View) in View (at App.js:23) in div (created by View) in View (at App.js:22) in div (created by View) in View (at App.js:21) in div (created by View) in View (created by ScrollView) in div (created by View) in View (created by ScrollViewBase) in ScrollViewBase (created by ScrollView) in ScrollView (at App.js:20) in App (at withExpoRoot.web.js:10) in ExpoRootComponent (at registerRootComponent.web.js:6) in RootComponent in div (created by View) in View (created by AppContainer) in div (created by View) in View (created by AppContainer) in AppContainer

and

Warning: React does not recognize the secondaryOpacity prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase secondaryopacity instead. If you accidentally passed it from a parent component, remove it from the DOM element. in path (created by Path) in Path (created by FontAwesomeIcon) in svg (created by Svg) in Svg (created by FontAwesomeIcon) in FontAwesomeIcon (at App.js:24) in div (created by View) in View (at App.js:23) in div (created by View) in View (at App.js:22) in div (created by View) in View (at App.js:21) in div (created by View) in View (created by ScrollView) in div (created by View) in View (created by ScrollViewBase) in ScrollViewBase (created by ScrollView) in ScrollView (at App.js:20) in App (at withExpoRoot.web.js:10) in ExpoRootComponent (at registerRootComponent.web.js:6) in RootComponent in div (created by View) in View (created by AppContainer) in div (created by View) in View (created by AppContainer) in AppContainer

in my browser console.

The warnings will disappear when removing <FontAwesomeIcon icon="ellipsis-v" />. How can this be fixed?



Solution 1:[1]

There is a patch of the fontawesome repo someone created to address this issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 chackerian