Invalid prop style of type array supplied to FontAwesomeIcon, expected object

[genesy]

Describe the bug
Warning message appears on simulator/console when clicking/tapping the icon when wrapped in a Touchable component

Reproducible test case

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faHeart } from '@fortawesome/free-regular-svg-icons';
import { TouchableHighlight, View } from 'react-native'

export default () => (
  <View>
    <TouchableHighlight onPress={()=> {}} style={{padding: 50}}>
      <FontAwesomeIcon icon={faHeart}/>
    </TouchableHighlight>
  </View>
)

dep versions from package.json

    "@fortawesome/react-native-fontawesome": "^0.1.0",
    "@fortawesome/free-regular-svg-icons": "^5.12.0",
    "expo": "^36.0.0",
    "react": "16.9.0",
    "react-native": "0.61.4",

run this file on new react native project and the error should show when you tap

Expected behavior
No warning message spam

Desktop (please complete the following information):

• Android simulator 8.1

Additional context
Was reported on a different github repo here
FortAwesome/react-fontawesome#245

[leurs247]

I have the same error. I don't get the error on every screen. My expected behavior is no warning message. The warning message shows up on iOS (11.4), not in android.

[likern]

This is a cruicial bug, because if styled-components package is used (1,211,309 downloads/week) it automatically converts css properties to array of styles (at compile-time):

<FontAwesomeIcon
  css={`
    margin-left: 14px;
  `}
  icon={['fal', iconName]}
  size={24}
/>

[likern]

For everyone for whoom this bug is cruicial might check out might forked project - https://github.com/breeffy/react-native-svg-icons

There is an added support for arrays. styled-components are working out of box.

[jdcookie]

Seems like a temporary work around until a proper fix is done, it to wrap the FontAwesomeIcon component in a Fragment.

<TouchableHighlight onPress={() => {})>
  <>
    <FontAwesomeIcon icon={['fas', 'heart']} />
  </>
</TouchableHighlight>

I am using styled-components and was seeing the exact issue described above.

[robmadole]

I'm going to work with @puremana to try and get his PR merged

[robmadole]

0.2.3 released to support arrays (thanks @puremana)