title: React Native Expo CLI Import .ttf Fonts
body: <p>Trying to import .ttf for font in expo cli.
  I also have splash screen. I wanna show the splash screen until the font loads.</p>
  <p><em>Font: Josefin Sans.</em><br/>
  <em>&quot;expo&quot;: &quot;~45.0.0&quot;</em></p>
  <p>I took reference from following links but nothing works:</p>
  <ol>
  <li>Using Custom Fonts: <a href="https://docs.expo.dev/guides/using-custom-fonts/" rel="nofollow noreferrer">https://docs.expo.dev/guides/using-custom-fonts/</a></li>
  <li>Splash Screen: <a href="https://docs.expo.dev/versions/latest/sdk/splash-screen/" rel="nofollow noreferrer">https://docs.expo.dev/versions/latest/sdk/splash-screen/</a></li>
  </ol>
  <blockquote>
  <p>Code (App.js)</p>
  </blockquote>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useState, useEffect, useCallback } from "react";
  
  import { Text } from "react-native";
  import { SafeAreaView } from "react-native-safe-area-context";
  import { StatusBar } from "expo-status-bar";
  import Header from "./components/Header.component";
  import styles from "./styles/appStyle";
  
  import * as Font from "expo-font";
  import * as SplashScreen from "expo-splash-screen";
  
  const App = () =&gt; {
    const [appIsReady, setAppIsReady] = useState(false);
  
    useEffect(() =&gt; {
      async function prepare() {
        try {
          // Pre-load fonts
          await Font.loadAsync({
            "JosefinSans-Regular": require("./assets/fonts/JosefinSans-Regular.ttf"),
          });
          // Artificially delay for two seconds to simulate a slow loading
          // experience. Please remove this if you copy and paste the code!
          await new Promise((resolve) =&gt; setTimeout(resolve, 2000));
        } catch (e) {
        } finally {
          // Tell the application to render
          setAppIsReady(true);
        }
      }
  
      prepare();
    }, []);
  
    const onLayoutRootView = useCallback(async () =&gt; {
      if (appIsReady) {
        // This tells the splash screen to hide immediately! If we call this after
        // `setAppIsReady`, then we may see a blank screen while the app is
        // loading its initial state and rendering its first pixels. So instead,
        // we hide the splash screen once we know the root view has already
        // performed layout.
        await SplashScreen.hideAsync();
      }
    }, [appIsReady]);
  
    if (!appIsReady) {
      return null;
    }
  
    return (
      &lt;&gt;
        &lt;SafeAreaView style={styles.container} onLayout={onLayoutRootView}&gt;
          &lt;Header /&gt;
          &lt;Text&gt;Hello World!&lt;/Text&gt;
          &lt;StatusBar style="light" backgroundColor="#05060B" /&gt;
        &lt;/SafeAreaView&gt;
      &lt;/&gt;
    );
  };
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <blockquote>
  <p>Error</p>
  </blockquote>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Android Bundling failed 12ms
  Unable to resolve module ./assets/fonts/JosefinSans-Regular.ttf from C:\Users\user\Desktop\app\App.js: 
  
  None of these files exist:
    * JosefinSans-Regular.ttf
    * assets\fonts\JosefinSans-Regular.ttf\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
    18 |         // Pre-load fonts
    19 |         await Font.loadAsync({
  &gt; 20 |           "JosefinSans-Regular": require("./assets/fonts/JosefinSans-Regular.ttf"),
       |                                           ^
    21 |         });
    22 |         // Artificially delay for two seconds to simulate a slow loading 
    23 |         // experience. Please remove this if you copy and paste the code!</code></pre>
  </div>
  </div>
  </p>
  <p><strong>File Structure:
  <a href="https://i.stack.imgur.com/yLrsQ.png" rel="nofollow noreferrer">Snap.png</a></strong></p>