0.0.2 • Published 5 years ago

@expo-google-fonts/amatica-sc v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago

@expo-google-fonts/amatica-sc

This package lets you use the Amatica SC font family from Google Fonts in your Expo app.

v0.0.2

Amatica SC

Amatica SC

This font family contains 2 styles.

  • AmaticaSC_Regular400
  • AmaticaSC_Bold700

Usage

Run this command from the shell in the root directory of your Expo project to add the font family package to your project

yarn add @expo-google-fonts/amatica-sc expo-font @use-expo/font

Now add code like this to your project

import React, { useState, useEffect } from 'react';

import { Text, View, StyleSheet } from 'react-native';
import { AppLoading } from 'expo';
import { useFonts } from '@use-expo/font';
import { AmaticaSC_Regular400, AmaticaSC_Bold700 } from '@expo-google-fonts/amatica-sc';

export default () => {
  let [fontsLoaded] = useFonts({
    AmaticaSC_Regular400,
    AmaticaSC_Bold700,
  });

  let fontSize = 24;
  let paddingVertical = 6;

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize, paddingVertical, fontFamily: 'AmaticaSC_Regular400' }}>
          AmaticaSC_Regular400
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'AmaticaSC_Bold700' }}>
          AmaticaSC_Bold700
        </Text>
      </View>
    );
  }
};

Gallery

AmaticaSC_Regular400

AmaticaSC_Regular400

AmaticaSC_Bold700

AmaticaSC_Bold700

Use During Development

If you are trying out lots of different fonts, you can try using the @expo-google-fonts/dev package.

You can import any font style from any Expo Google Fonts package from it. It will load the fonts over the network at runtime instead of adding the asset as a file to your project, so it will be less performant, and is not a good choice for most production deployments. But, it is extremely convenient for playing around with any style that you want.

Links

This file was generated. Instead of editing it by head, please make contributions to the generator