FontAwesome react-native warnings

Question

i am trying to use fontawesome in react-native-web-app

Did everything as suggested in docs, but for some reason getting this warning in console.

<FontAwesomeIcon icon={faSearch} style={[styles.icon]} /> - this is the part which triggers all warnings. If I will remove it, warning are gone too.

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.

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.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Path which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Svg which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

Answer 1

It looks like this is a known issue with an open pull request in the library:https://github.com/FortAwesome/react-native-fontawesome/pull/74

For now, the last comment in that thread offers a workaround . You can use @fortawesome/react-fontawesome for web, and react-native-fontawesome for Android/iOS.

Copying their code snippet here:

import {FontAwesomeIcon as FontAwesomeReact} from '@fortawesome/react-fontawesome';
import {FontAwesomeIcon as FontAwesomeNative} from '@fortawesome/react-native-fontawesome';
import {number} from 'prop-types';
import React from 'react';
import {Platform, StyleSheet} from 'react-native';

FaIcon.propTypes = {
  size: number,
};
export default function FaIcon({size, style, ...props}) {
  if (Platform.OS === 'web') {
    const webStyles = StyleSheet.flatten([style, {width: size, height: size}]);
    return <FontAwesomeReact {...props} style={webStyles} />;
  }

  return <FontAwesomeNative {...props} size={size} style={style} />;
}