@expo-google-fonts/poppins

@expo-google-fonts/poppins

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

v0.0.2

Poppins

This font family contains 18 styles.

• Poppins_Thin100
• Poppins_Thin100_Italic
• Poppins_ExtraLight200
• Poppins_ExtraLight200_Italic
• Poppins_Light300
• Poppins_Light300_Italic
• Poppins_Regular400
• Poppins_Regular400_Italic
• Poppins_Medium500
• Poppins_Medium500_Italic
• Poppins_SemiBold600
• Poppins_SemiBold600_Italic
• Poppins_Bold700
• Poppins_Bold700_Italic
• Poppins_ExtraBold800
• Poppins_ExtraBold800_Italic
• Poppins_Black900
• Poppins_Black900_Italic

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/poppins 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 {
  Poppins_Thin100,
  Poppins_Thin100_Italic,
  Poppins_ExtraLight200,
  Poppins_ExtraLight200_Italic,
  Poppins_Light300,
  Poppins_Light300_Italic,
  Poppins_Regular400,
  Poppins_Regular400_Italic,
  Poppins_Medium500,
  Poppins_Medium500_Italic,
  Poppins_SemiBold600,
  Poppins_SemiBold600_Italic,
  Poppins_Bold700,
  Poppins_Bold700_Italic,
  Poppins_ExtraBold800,
  Poppins_ExtraBold800_Italic,
  Poppins_Black900,
  Poppins_Black900_Italic,
} from '@expo-google-fonts/poppins';

export default () => {
  let [fontsLoaded] = useFonts({
    Poppins_Thin100,
    Poppins_Thin100_Italic,
    Poppins_ExtraLight200,
    Poppins_ExtraLight200_Italic,
    Poppins_Light300,
    Poppins_Light300_Italic,
    Poppins_Regular400,
    Poppins_Regular400_Italic,
    Poppins_Medium500,
    Poppins_Medium500_Italic,
    Poppins_SemiBold600,
    Poppins_SemiBold600_Italic,
    Poppins_Bold700,
    Poppins_Bold700_Italic,
    Poppins_ExtraBold800,
    Poppins_ExtraBold800_Italic,
    Poppins_Black900,
    Poppins_Black900_Italic,
  });

  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: 'Poppins_Thin100' }}>
          Poppins_Thin100
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Thin100_Italic' }}>
          Poppins_Thin100_Italic
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_ExtraLight200' }}>
          Poppins_ExtraLight200
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_ExtraLight200_Italic' }}>
          Poppins_ExtraLight200_Italic
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Light300' }}>
          Poppins_Light300
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Light300_Italic' }}>
          Poppins_Light300_Italic
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Regular400' }}>
          Poppins_Regular400
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Regular400_Italic' }}>
          Poppins_Regular400_Italic
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Medium500' }}>
          Poppins_Medium500
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Medium500_Italic' }}>
          Poppins_Medium500_Italic
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_SemiBold600' }}>
          Poppins_SemiBold600
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_SemiBold600_Italic' }}>
          Poppins_SemiBold600_Italic
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Bold700' }}>
          Poppins_Bold700
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Bold700_Italic' }}>
          Poppins_Bold700_Italic
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_ExtraBold800' }}>
          Poppins_ExtraBold800
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_ExtraBold800_Italic' }}>
          Poppins_ExtraBold800_Italic
        </Text>

        <Text style={{ fontSize, paddingVertical, fontFamily: 'Poppins_Black900' }}>
          Poppins_Black900
        </Text>

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

Gallery

Poppins_Thin100

Poppins_Thin100_Italic

Poppins_ExtraLight200

Poppins_ExtraLight200_Italic

Poppins_Light300

Poppins_Light300_Italic

Poppins_Regular400

Poppins_Regular400_Italic

Poppins_Medium500

Poppins_Medium500_Italic

Poppins_SemiBold600

Poppins_SemiBold600_Italic

Poppins_Bold700

Poppins_Bold700_Italic

Poppins_ExtraBold800

Poppins_ExtraBold800_Italic

Poppins_Black900

Poppins_Black900_Italic

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

• Poppins on Google Fonts
• Google Fonts
• This package on npm
• This package on GitHub
• The Expo Google Fonts project on GitHub
• @expo-google-fonts/dev Devlopment Package

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