CODEWITHSUNDEEP
react-nativefontsexpo
Kimako
Kimako

Reputation: 625

Import a font in React Native

I hope you can help me... I'm looking to the different discussions about it but nothing seems to work for me... It's really weird. I want to custom the font of my app. I choose Parisienne as font for my titles. I downloaded he font into my "assets/font" folder. My App.js is here but It doesn't work as in Expo tutorial... App.js is just the door for DrawerNavigator.

Is anyone able to help me ? Thanks a lot !

import React, { Component } from "react";
import { View } from "react-native";
import styles from "./assets/Styles";
import DrawerNavigator from "./Drawer/DrawerNavigator";
import * as Font from "expo-font";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fontLoaded: false
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Parisienne: require("./assets/fonts/Parisienne/Parisienne.ttf")
    });
    this.setState({ fontLoaded: true });
  }
  render() {
    if ((this.state.fontLoaded = true)) {
      return <DrawerNavigator />;
    } else {
      return null;
    }
  }
}

DrawerNavigator.js :

import React from "react";
import {
  Image,
  Platform,
  Dimensions,
  StyleSheet,
  Text,
  View
} from "react-native";
import { createDrawerNavigator } from "react-navigation-drawer";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import Actus from "../Components/Actus/Actus";
import Carte from "../Components/Carte/Carte";
import Reservation from "../Components/Reservation/Reservation";
import Restaurant from "../Components/Restaurant/Restaurant";
import Vins from "../Components/Vins/Vins";
import Acces from "../Components/Acces/Acces";
import Newsletter from "../Components/Newsletter/Newsletter";
import Welcome from "../Components/Welcome/Welcome";
// import Settings from "../Components/Settings/Settings"
import MenuDrawer from "./MenuDrawer"
import Slider from "../Components/Slider/Slider";

const WIDTH = Dimensions.get("window").width;

const DrawerConfig = {
  drawerWidth: WIDTH * 0.35,
  contentComponent: ({ navigation }) => {return (<MenuDrawer navigation = {navigation} />)}
};

const DrawerNavigator = createDrawerNavigator(
  {
    Welcome: {
      screen: Welcome
    },
    Actus: {
      screen: Actus
    },
    Carte: {
      screen: Carte
    },
    Reservation: {
      screen: Reservation
    },
    Restaurant: {
      screen: Restaurant
    },
    Vins: {
      screen: Vins
    },
    Acces: {
      screen: Acces
    },
    Newsletter: {
      screen: Newsletter
    },
    Slider: {
      screen: Slider
    }
  },
  DrawerConfig
);
export default createAppContainer(DrawerNavigator);

The Error :

console.error : "fontFamily "Parisienne" is not a system font and has not been loaded through Font.loadAsync.

Upvotes: 0

Views: 927

Answers (1)

Vencovsky
Vencovsky

Reputation: 31713

I just saw you have huge error in your render function

  render() {
    //       here shouldn't be = true
    if ((this.state.fontLoaded = true)) {
      return <DrawerNavigator />;
    } else {
      return null;
    }
  }

You shoud change it to 

  render() {
    // correct way of checking bool value
    if (this.state.fontLoaded) {
      return <DrawerNavigator />;
    } else {
      return null;
    }
  }

The problem here is that this.state.fontLoaded = true will always return true and it will load the component before loading the font, causing the error.

Upvotes: 2

Related Questions