The icons show up as a crossed out box on some devices

Environment

react-native-vector-icons: 7.1.0 react native: 0.63.4 Android

Description

I’m using react-native-vector-icons in my app. Today a user reported that the icons show up as a crossed out box and shared a screenshot. The problem occurs on Samsung Galaxy Note 20 Ultra. I’ve tested over 2000 devices, and none had such a problem.

I have the following code at the end of my android/app/build.gradle file: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Code:

import Icon from 'react-native-vector-icons/FontAwesome5';
.
.
.
<View style={{flexDirection:"row"}}>
<Icon
            name={"cog"}
            color={"black"}
            size={screen_width / 15}
/>
<Icon
            name={"history"}
            color={"black"}
            size={screen_width / 15}
/>
<Icon
            name={"award"}
            color={"black"}
            size={screen_width / 15}
/>
<Icon
            name={"trophy"}
            color={"black"}
            size={screen_width / 15}
/>
</View>

And the result:

[edoko]

This problem was due to the firmware of the device, and Samsung replied that it will be resolved through an OS update later.

The attached screenshot is Samsung’s response written in Korean.

Thank you.

[YE0NFEEL]

Some follow up on this issue. Samsung had deployed an update (AUB2) to Korean Version of S21 Series (S21/S21+/S21Ultra) and this FA5 issue is resolved.

It is expected that updates will be provided to other models soon, but the firmware delivery schedule may vary depending on the manufacturer or carrier FW inspection schedule.