Question 388043 in React native Question posted in
The official React Native documentation can be found here.

React Native FontAwesomeIcon not working in TouchableHighlight or Pressable

I cannot put any Font-Awesome Icons inside of TouchableHighlights or Pressable elements.

<TouchableHighlight onPress={someOnPressMethod}>
    <FontAwesomeIcon icon={faPlus} color='white'/>
</TouchableHighlight>

If I do so the following error occurs:

ERROR  TypeError: Cannot read property 'color' of undefined
This error is located at:
    in FontAwesomeIcon (created by Page)
    in RCTView (created by View)
    in View (created by TouchableHighlight)
    in TouchableHighlight (created by TouchableHighlight)
    in TouchableHighlight (created by Page)
...

I can add the Icon outside of the TouchableHighlight just fine.

I am thankful for any help!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I guess all FontAwesomeIcons have to be put into Text elements. If i wrap the Icon around a Text element it works just fine

    <TouchableHighlight onPress={someOnPressMethod}>
    <Text><FontAwesomeIcon icon={faPlus} color='white'/></Text>
</TouchableHighlight>

  2. 0

    Use style property instead.

    <TouchableHighlight onPress={onPress}>
  <FontAwesomeIcon icon={faPlus} style={{color: 'red'}}/>
</TouchableHighlight>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search