'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 lowercasesecondaryfill
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 lowercasesecondaryopacity
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 |