Робота зі шрифтами

У Expo для підключення шрифтів використовується спеціальний модуль Expo Font. Спочатку його потрібно встановити, запустивши в терміналі такий рядок.

npx expo install expo-font

Виберіть у своєму проекті якусь папку для зберігання усіх шрифтів. Наприклад: assets/fonts. У розробці підтримуються лише два формати шрифтів із розширеннями .tiff та .otf. Щоб працювати з іншими форматами потрібні додаткові налаштування. Загальнодоступні безкоштовні шрифти можна завантажити наприклад на платфомі Google Fonts.

Щоб застосувати шрифти потрібно спочатку заімпортувати хук useFont з модуля expo-font, а потім приєднати шрифти, які будете застосовувати в проекті.

Після цього шрифт можна застосувати у проекті в стилі компонента Text у властивості fontFamily.

import { Text, View } from "react-native";

import { useFonts } from "expo-font";

export default function App() {
  const [fontsLoaded] = useFonts({
    "Roboto-Regular": require("./assets/fonts/Roboto/Roboto-Regular.ttf"),
    "Roboto-Bold": require("./assets/fonts/Roboto/Roboto-Bold.ttf"),
  });

  return (
    <View style={styles.container}>
      <Text style={{ fontFamily: "Roboto-Regular", fontSize: 25 }}>
        Roboto-Regular
      </Text>
      <Text style={{ fontFamily: "Roboto-Bold", fontSize: 35 }}>
        Roboto-Bold
      </Text>
    </View>
  );
}

Додамо функціонал, щоб верстка застосунку не відображалася поки не завантажаться шрифти повністю. (Принагідно винесемо стилі в таблицю стилів).

import { Text, View, StyleSheet } from "react-native";

import { useFonts } from "expo-font";

export default function App() {
  const [fontsLoaded] = useFonts({
    "Roboto-Regular": require("./assets/fonts/Roboto/Roboto-Regular.ttf"),
    "Roboto-Bold": require("./assets/fonts/Roboto/Roboto-Bold.ttf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.regular}>Roboto-Regular</Text>
      <Text style={styles.bold}>Roboto-Bold</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  regular: { fontFamily: "Roboto-Regular", fontSize: 25 },
  bold: { fontFamily: "Roboto-Bold", fontSize: 35 },
});

Завантажити шрифти достатньо один раз на проект у файлі App.js. Тепер вони будуть доступні у будь-якому компоненті застосунку при зверненні за властивістю fontFamily.

Давайте винесемо стилізацію в окремий файл styles.js і там застосуємо шрифти, в App.js приєднаємо шрифти, а застосуємо стилі до окремого компонента TestText.jsx. Для більшої виразності і очевидності різниці шрифтів приєднаємо шрифт Kablammo-Regular. На цей момент структура проекту матиме такий вигляд:

App.js

import { View } from "react-native";
import { styles } from "./styles";
import { useFonts } from "expo-font";
import TestText from "./TestText";

export default function App() {
  const [fontsLoaded] = useFonts({
    "Kablammo-Regular": require("./assets/fonts/Kablammo/Kablammo-Regular.ttf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <TestText />
    </View>
  );
}

TestText.jsx

import React from "react";
import { Text } from "react-native";
import { styles } from "./styles";

const TestText = () => {
  return (
    <>
      <Text style={styles.kablamoFont}>Test Text</Text>
      <Text style={styles.systemFont}>Test Text</Text>
    </>
  );
};

export default TestText;

styles.js

import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  kablamoFont: { fontFamily: "Kablammo-Regular", fontSize: 35 },
  systemFont: { fontSize: 25 },
});

Посилання на офіційну документацію:

Expo Font Guide

Google Fonts