FontFamily React Native App overwrite with device custom font (Samsung & Oppo)

Question

In React Native, I define font family for all text with Rubik font but for some devices (SAMSUNG & OPPO), the font looks like overwrite with a custom device font because that brand can choose a custom font for their device.

I don't know why sometimes some text looks like overwrite with custom device font & some text still uses the Rubik font.

Environment:

• OS: macOS HighSierra
• Node: 9.3.0
• Yarn: 1.3.2
• npm: 5.7.0
• Watchman: 4.9.0

Packages:

• react-native: "^0.47.2,
• react: "^16.0.0-alpha.12,
• react-native-vector-icons: ^4.4.2,

Target Platform: Android

Any ideas on how to make a device font can't overwrite the set font family font?

Answer 1

In your package.json add the key

{
.
.
.
  sideEffects:false,
.
.
.
}

Answer 2

In IOS, if you use just the fontFamily:"Rubik", the app automatically identifies the style based on fontStyle like Regualr/Italic/Bold etc.

But in android, sometimes you have to use the exact fontFamily like fontFamily:"Rubik-SemiBold", fontFamily:"Rubik-Regular".

It should resolve your issue.