Expo React Native Loads Custom Font Only on App.js

[mr.spshuvo]

Hello, everyone. I’m new around here. I’m using Expo for building a react native app. I want to implement the custom fonts in my project. So I’ve gone through the docs, Using Custom Fonts - Expo Documentation

But the problem is only one components gets custom fonts, None of other components don’t loads the custom fonts.

Here is my code,

App.js

import React from "react";
import {
  StyleSheet,
  SafeAreaView,
  Image,
  StatusBar,
  Platform,
  Text
} from "react-native";


import WelcomeScreen from "./app/screen/WelcomeScreen";
//import ViewImageScreen from "./app/screen/ViewImageScreen";

import {
  useFonts,
  Poppins_300Light,
  Poppins_400Regular,
  Poppins_400Regular_Italic,
  Poppins_500Medium,
  Poppins_700Bold,
  Poppins_900Black,
} from "@expo-google-fonts/poppins";
import { AppLoading } from "expo";

export default function App() {

  let [fontsLoaded] = useFonts({
    "Shamim-Bn": require(
      './app/assets/Shamim-Font-Bn.ttf'
    ),
    "Poppins-Light": Poppins_300Light,
    "Poppins-Regular": Poppins_400Regular,
    "Poppins-Regular-Italic": Poppins_400Regular_Italic,
    "Poppins-Medium": Poppins_500Medium,
    "Poppins-Bold": Poppins_700Bold,
    "Poppins-Black": Poppins_900Black,
  });

  if(fontsLoaded){
    return (
      <SafeAreaView style={styles.container}>
        // Only this components gets Custom font
        <Text style={styles.custom}>পছন্দের ঘর এখন এখানেই...</Text> 
        <WelcomeScreen />
      </SafeAreaView>
    )
  } else{
    return(
      <AppLoading />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    justifyContent: "center",
    alignItems: "center",
  },
  custom:{
    fontFamily: 'Shamim-Bn',
    fontSize: 20,
  }
});

WelcomeScreen.js

import React from 'react';
import {StyleSheet, ImageBackground, View, Image, Text} from 'react-native';

import colors from '../config/colors';


function WelcomeScreen(){
    return(
        <ImageBackground
        style={styles.background}
        source={require('../assets/welcome-bg.png')}>
            <View style={styles.logoBox}>
                <Image style={styles.logo} source={require('../assets/logo.png')} />
                <Text style={styles.tagline}>পছন্দের ঘর এখন এখানেই...</Text>
            </View>
            <View style={styles.loginBtn}></View>
            <View style={styles.signupBtn}></View>
        </ImageBackground>
    )
}
//
const styles = StyleSheet.create({
    background: {
        flex: 1,
        alignItems: "center",
        justifyContent: "flex-end"
    },
    logoBox: {
        position: "absolute",
        top: 80,
        alignItems: "center"
    },
    logo: {
        width: 240,
        height: 120,
    },
    tagline:{
        marginTop: 10,
        fontSize: 19,
        fontWeight: "700",
        color: colors.sub,
        fontFamily: 'Shamim-Bn',
    },
    loginBtn:{
        backgroundColor:  colors.main,
        width: "100%",
        height: 70
    },
    signupBtn:{
        backgroundColor: colors.sub,
        width: "100%",
        height: 70
    }
});

export default WelcomeScreen;

More preciously, The view only declared in to App.js gets the custom font. The view like WelcomeScreen.js, I import to App.js doesn’t get custom fonts.
Please help.

[adamjnav]

Hey @mr.spshuvo,

Would you be able to create a reproducible example of this behavior so we can test it on our end?

Cheers,
Adam

[mr.spshuvo]

Hey, thanks for replying. I think, I’ve solved this problem. If you set fontWeight property along with custom font in the styles declaration, the <Text> components rendered the default fonts available on the device. The only way you can use different variants of the fonts by importing and declaring the font variants like this:

let [fontsLoaded] = useFonts({
    "Shamim-Bn": require(
      './app/assets/Shamim-Font-Bn.ttf'
    ),
    "Poppins-Light": Poppins_300Light,
    "Poppins-Regular": Poppins_400Regular,
    "Poppins-Regular-Italic": Poppins_400Regular_Italic,
    "Poppins-Medium": Poppins_500Medium,
    "Poppins-Bold": Poppins_700Bold,
    "Poppins-Black": Poppins_900Black,
  });

Later I set the fonFamily property to Poppins-Regular or Poppins-Bold.

[adamjnav]

Happy to hear you got things sorted out and thanks for sharing the solution with the rest of the community!