FortAwesome/react-native-fontawesome

0.2.5 breaks masking

vicary opened this issue · 9 comments

vicary commented

Describe the bug
The following works at 0.2.4, but breaks at 0.2.5.

<FontAwesomeIcon icon={...} mask={faCircle} />

Reproducible test case
https://snack.expo.io/@vicary/fontawesome-masking-bug-@0.2.5

Expected behavior
Icons should be displayed with masking effect.

Desktop (please complete the following information):
The bug appears in all the followings:

  1. Simulator in iOS 13 @ macOS 10.15.5
  2. iPhone SE with iOS 13
  3. A development board (Android 5.5)
  4. Lenovo Yoga book (Android 7)
  5. Simulator in Android 9, 10 and 11 @ macOS 10.15.5

Additional context
N/A

Serdarrr commented

Happens to me too, using following code. It doesn't display the icons, but it works without attr mask.

<FontAwesomeIcon icon={faCog} mask={faCircle} />
younes200 commented

any update on this ?

  • 👍2
vicary commented

@younes200 They are busy monetizing the heck outta us with v6 core, ditching their promise of life-time subscriptions in the v5 Kickstarter. I, for one, expects no resources allocated on tier 2 projects like this in the foreseeable future.

  • 😕1
astrahov commented

I confirm the problem on the following versions:

"@fortawesome/react-native-fontawesome": "^0.2.7",
"react-native-svg": "^12.1.1"

Masked icons are not displayed.

https://wampi.ru/image/Re20X7z

import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { View } from 'react-native'

const TestScreen = () => {
    return (
        <>
            <View style={{ backgroundColor: 'orange' }}>
                <FontAwesomeIcon
                    color="red"
                    icon="pencil-alt"
                    size={50}
                />
            </View>
            <View style={{ backgroundColor: 'yellow' }}>
                <FontAwesomeIcon
                    color="blue"
                    icon="circle"
                    size={50}
                />
            </View>
            <View style={{ backgroundColor: 'red' }}>
                <FontAwesomeIcon
                    color="orange"
                    icon="pencil-alt"
                    mask={['fas', 'circle']}
                    size={50}
                    transform="shrink-10"
                />
            </View>
            <View style={{ backgroundColor: 'blue' }}>
                <FontAwesomeIcon
                    color="yellow"
                    icon="pencil-alt"
                    mask={['fas', 'circle']}
                    size={50}
                    transform="shrink-10"
                />
            </View>
        </>
    )
}
kylebake commented

It's coming from this bit here: https://github.com/FortAwesome/react-native-fontawesome/blob/master/src/converter.js#L27

The mask prop seems to be treated similarly to duotone icons. Trying to work through a fix, I'll get a PR up if I can find it.

robmadole commented

hey @kylebake ! you might hold off on that. @ej2 and I have been working on some refactoring and have been having some "ah-ha" moments. I wouldn't want to duplicate your effort. Give us a bit to work up a solution that handles both duotone and masking.

  • 👍1
  • 🎉1
  • 👀1
kylebake commented

Appreciate the response @robmadole, will do!

robmadole commented

This should be resolved now in 0.3.0. Please give it a try folks and let me know if I need to re-open.

  • 🎉1
kylebake commented

This should be resolved now in 0.3.0. Please give it a try folks and let me know if I need to re-open.

Yup, looks like that fixed it for me. Thanks for the updates! 👍

  • ❤️1