React Native Cookbook - Second Edition

How to do it...

1. With our font files in place, the first step is to open App.js and add the imports we'll need:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Font } from 'expo';

2. Next, we'll add a simple component for displaying some text that we want to style with our custom fonts. We'll start with just one Text element to display the regular variant of the Roboto font:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.josefinSans}>
          Hello, Josefin Sans!
        </Text>
      </View>
    );
  }
}

3. Let's also add some starter styles for the component we've just created. For now, we'll just increase the font size for our josefinSans class styles: ...