How to load custom fonts using CRNA and Expo

Question

This is my File Structure

in App.js

import React, { Component } from 'react';
import { Font } from 'expo';

import Index from './src/index';

export default class App extends Component {
  //checking state for if font is loaded or not.
  state = {
    fontLoaded: false,
  };
   async componentDidMount() {
    await Font.loadAsync({
      'Roboto_medium': require('./src/assets/fonts/Roboto-Medium.ttf'),
      'chunky': require('./src/assets/fonts/chunkfive.ttf'),
    });
    //Setting the state to true when font is loaded.
    this.setState({ fontLoaded: true });
  }
  render() {
    return (
      <Index />
    );
  }
}

I'm trying to load my font inside of src/screens/home.js

import React, { Component } from 'react';
import { Container, Header, Content, List, ListItem, Text } from 'native-base';

// Style Sheet
import styles from '../styles/home';

export default class HomeScreen extends Component {

  static navigationOptions = {
    title: 'Davis',
    headerStyle: { backgroundColor: '#177293' },                // The chunky font is not loading from my App.js do I need to import something??
    headerTitleStyle: { color: '#ffffff', alignSelf: 'center', fontFamily: 'chunky' },
  }

  render() {
    return (
      <Container>
        <Content>
          <List>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("About")}>
              <Text  style={styles.text}>About</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Estimate")}>
              <Text style={styles.text}>Request an Estimate</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Tracker")}>
              <Text style={styles.text}>Live Delivery Tracker</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Contact")}>
              <Text style={styles.text}>Contact Us</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Testimonials")}>
              <Text style={styles.text}>Testimonials</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Login")}>
              <Text style={styles.text}>Login</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Details")}>
              <Text style={styles.text}>Job Details</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Requests")}>
              <Text style={styles.text}>Requests</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Terms")}>
              <Text style={styles.text}>Terms and Conditions</Text>
            </ListItem>
          </List>
        </Content>
      </Container>
    );
  }
}

I want to add my custom font into the title of my header. I'm not sure if I need to import it into my home.js like import { chunky } from '../app'; also when I've tried to import it ".../app" doesn't work I thought the first period was to step out of the current file the second one would be to go up to src I just assumed that adding a third period would take me to the root folder and into app... holy crap I just realized capitalization probably matters in the import so not ".../app" but ".../App" for the App.js file in my root folder.

My Results

What it looks like now without my custom font

Answer 1

That error is occured because your screen is using the font before it got loaded. So you have to wait your font to be loaded first before rendering the screen.

render() {
  return this.state.fontLoaded && <Index />;
}