Jede App ist einzigartig.

Deshalb sollte das Look and Feel einer App genauso einzigartig wie die App-Idee selbst sein - dazu gehört auch die Wahl einer möglichst passenden Font (z. Dt. Schrift).

In diesem kurzen Tutorial betrachten wir, wie man eine Font in einem React Native CLI Projekt einbindet und nutzt.

Lass uns eine Schrift auswählen.

Lass uns auf die Suche nach einer passenden Schrift gehen. Eine mögliche Quelle ist Google Fonts.

Für die zu entwickelnde App nutzen wir die weltbeste Schrift die es gibt, Comic Neue 😉

Custom Fonts im React Native CLI Project.

Lass uns ein Demo Projekt aufsetzen:

npx react-native init ComicFontDemoApp --template react-native-template-typescript

Wir wechseln nun in das Projektverzeichnis…

cd ComicFontDemoApp

…und starten unsere Entwicklungsumgebung (bspw. Visual Studio Code)

code .

Für unseren Test wollen wir eine einfache View, die uns zentriert einen Text anzeigt.

Hierzu ersetzen wir den Inhalt der Datei App.tsx durch folgenden Code:

import React from 'react';
import {StyleSheet, SafeAreaView, Text} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Comic Font Demo App</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 24,
    color: '#000000',
  },
});

export default App;

Vorausgesetzt wir haben ein funktionierendes Setup für die Entwicklung, installieren wir die notwenidgen Pods

npx pod-install ios

… und starten das Projekt im Simulator.

npm run ios

Wir kriegen Folgendes im Simulator zu Gesicht:

Lass uns nun die Schrift einrichten.

Wir laden die Schrift entsprechend hier runter und entpacken das Archiv.

Wir erstellen den Ordner und Unterordner assets/fonts in unserem Projektverzeichnis und kopieren den Inhalt (die Schriftdateien) aus dem heruntergeladenen und entpackten Verzeichnis rein.

mkdir -p assets/fonts && cp ~/Downloads/Comic_Neue/* assets/fonts

Unsere Entwicklungsumgebung (hier: Visual Studio Code) dürfte nun wie folgt aussehen:

Als nächstes erstellen wir die Datei react-native.config.js

touch react-native.config.js

… mit folgendem Inhalt:

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./assets/fonts/'], // let's bundle the fonts
};

Mit der Datei react-native.config.js haben wir die Möglichkeit Plattformspezifisches und Linkinginformationen zu konfigurieren.

Damit wir jetzt gleich und in Zukunft vereinfacht linken können, ergänzen wir die package.json in scripts Bereich um Folgendes:

"scripts": {
  // [...]
  "link": "react-native link"
}

Wir sind nun in der Lage Folgendes im Projektverzeichnis aufzurufen:

npm run link

Sofern die Ausgabe wie hier ausschaut…

> ComicFontDemoApp@0.0.1 link /Users/pawel/tmp/rn/ComicFontDemoApp
> react-native link

info Linking assets to ios project
warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
info Linking assets to android project
success Assets have been successfully linked to your project

… hat alles wunderbar funktioniert.

Das native iOS und Android Projekt wurde entsprechend um die Fonts aktualisiert.

Lasst uns nun die Schrift Comic Neue auf unserem Text innerhalb der App anwenden.

Hierzu aktualisieren wir die styles Konstante wie folgt:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 24,
    color: '#000000',
    fontFamily: 'Comic Neue',
  },
});

Um die Änderung im Simulator zu sehen, ist es notwendig die Anwendung neu zu starten. Hierzu stoppen/ schließen wir das Terminal mit dem laufendem Metro Bundler und starten die Anwendung neu, mittels…

npm run ios

Bei jeder Änderung des nativen Android bzw. iOS Moduls im Projekt (wie unter Verwendung von react-native link) muss die Anwendung im jeweiligen Simulator neu gestartet werden.

Voilà! Hier ist das erhoffte Resultat: