CODEWITHSUNDEEP
reactjsreact-nativefont-awesome
kodfire
kodfire

Reputation: 1783

react-native - Failed prop type: Invalid prop `style` supplied to `FontAwesomeIcon`

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" style={styles.moreOptions} />
    </View>
  )
}

const styles = StyleSheet.create({
    moreOptions: {
        fontSize: 5,
        color: primary,
    },
})

Produce following warning:

Warning: Failed prop type: Invalid prop style supplied to FontAwesomeIcon. in FontAwesomeIcon (at App.js:44) 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

but there is an style for it here in font awesome documentation. How can this be fixed?

BTW the color working although has warning but fontSize doesn't work.

Upvotes: 1

Views: 2622

Answers (2)

Gaurav Roy
Gaurav Roy

Reputation: 12215

@kodfire as per the docs and as samuli said, FontAwesome does support stylesheet , but it only accepts color as its params in it, nothing else. If you want to cchange size use size rather than passing fontSize.

Check the docs icon docs

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'


type Props = {}

const style = StyleSheet.create({
  icon: {
    color: 'blue'
  }
})

export default class App extends Component<Props> {
  render() {
    return (
      <View>
        <FontAwesomeIcon icon={ faCoffee } style={ style.icon } size={32}/>
      </View>
    )
  }
}

revert in case of any concerns.

Upvotes: 0

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

I think FontAwesomeIcon is not a RN Text component as such, therefore fontSize is not an accepted prop.

Use <FontAwesomeIcon ... size={5}> instead.

Upvotes: 0

Related Questions