React Native fontWeight is not working in iOS

Issue

I used a simple component for text in my React Native app. Then fontWeight (Only Bold) is not working on iOS only. I have already inserts all needed fonts(All are working well on Android) in projects.

This is my project settings.

root/react-native.config.js

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets:['/src/assets/fonts/']
}

package.json

{
  "name": "boldfont",
  "version": "0.0.1",
  "private": true,
  "rnpm": {
    "assets": [
      "./src/assets/fonts"
    ]
  },
...  ...  ...
}

root/src/assets/fonts/

I added all these fonts to the android/app/src/main/assets/fonts also.

That is my code.

Stext.js

import React from 'react';
import styled from 'styled-components/native';

function Stext({ ...props }) {
    return <Text {...props}>{props.children}</Text>
}

const Text = styled.Text`
    ${({ title, medium, small }) => {
        switch (true) {
            case title:
                return 'font-size: 48px;'
            case medium:
                return 'font-size: 20px;'
            case small:
                return 'font-size: 12px;'
            default:
                return 'font-size: 14px;'
        }
    }};

    ${({ PopBold, PopSemi, PopMedium }) => {
        switch (true) {
            case PopBold:
                return 'fontFamily: Poppins-Bold'
            case PopSemi:
                return 'fontFamily: Poppins-SemiBold'
            case PopMedium:
                return 'fontFamily: Poppins-Medium'
            default:
                return 'fontFamily: Poppins-Regular'
        }
    }}
`

export default Stext;

HomeScreen.js

import React from 'react'
import { View } from 'react-native'
import Stext from '../components/Stext'

export default function HomeScreen() {
  return (
    <View>
      <Stext PopBold>Android only</Stext>      // iOS not working
      <Stext PopSemi>Android and iOS</Stext>
      <Stext PopMedium>Android and iOS</Stext>
      <Stext>Android and iOS</Stext>
    </View>
  )
}

Solution

in iOS, you have to use family name like {fontFamily: 'Poppins', fontWeight: 'bold'}

whereas in Android, you have to include the full name with all the different variations like {fontFamily: 'Poppins-Bold'} without the need to pass fontWeight.

I know it's annoying, you can work around it using Platform.select(...

here's an example code:

const type = (family: string = "Poppins") => {
 return {
   semiBold: {
      fontFamily: Platform.select({ ios: family, android: `${family}-SemiBold` }), 
      fontWeight: Platform.select({ ios: "600" })
 },
   bold: {
      fontFamily: Platform.select({ ios: family, android: `${family}-Bold` }), 
      fontWeight: Platform.select({ ios: "700" })
 },
 }
}

There is also this helpful cross platform utility lib that you can use https://github.com/lendup/react-native-cross-platform-text

Answered By - Guy