Expo React Native Loads Custom Font Only on App.js

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, https://docs.expo.io/guides/using-custom-fonts

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.

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

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.

1 Like

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

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.