title: Adding Custom font family to react native Text not working
body: <p>I am currently trying to add a custom font to a react native app but after trying almost all answers i could find on SO and on google, it still doesn't work.</p>
  
  <p>i tried to make react native aware of the font by add </p>
  
  <pre><code>"rnpm": {
  "assets": [
    "./assets/fonts/"
  ]
  </code></pre>
  
  <p>},</p>
  
  <p>to the <code>package.json</code> and then running <code>react-native link</code> and also using the <code>re-run</code> commad. But still doesn't work.</p>
  
  <p>Below is the code</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import React, { useEffect } from 'react';
  import { StyleSheet, Text, View, Image } from 'react-native';
  import imager from './assets/cars.png';
  import * as Font from 'expo-font';
  
  export default function App() {
    useEffect(() =&gt; {
      async function loadFont() {
        return await Font.loadAsync({
          righteous: require('./assets/fonts/Righteous-Regular.ttf'),
        });
      }
      loadFont();
    }, []);
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;Image style={styles.imager} source={imager} /&gt;
        &lt;Text
          style={{
            fontSize: 30,
            fontWeight: 'bold',
            paddingTop: 30,
            fontFamily: 'righteous',
          }}
        &gt;
          Request Ride
        &lt;/Text&gt;
        &lt;Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}&gt;
          Request a ride and get picked up by a nearby community driver
        &lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    imager: {
      width: 200,
      height: 200,
      shadowColor: 'rgba(0, 0, 0, 0.2)',
      shadowRadius: 10,
      shadowOpacity: 1,
    },
   });
  </code></pre>
  
  <p>I have the font <code>Righteous-Regular.ttf</code> in <code>./assets/fonts</code> but when i run this code, i get this error</p>
  
  <blockquote>
    <p>fontFamily "righteous" is not a system font and has not been loaded through Font.loadAsync.</p>
    
    <ul>
    <li><p>If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.</p></li>
    <li><p>If this is a custom font, be sure to load it with Font.loadAsync.</p></li>
    </ul>
  </blockquote>
  
  <p>I researched but still can't find the solution to this. Please what could be the issue and how do i go about it?</p>