React Native Custom Font Ekleme

React Native projelerinde custom font kullanmak eski sürümlere kıyasla çok basitleşti. Bu rehberde özel yazı tiplerini projemize nasıl dahil edebileceğimizi göreceğiz.

Öncelikle projemizi oluşturalım ve App.js dosyamızı bu şekilde dolduralım;

`App.js`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


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

const App = () => {
  return (
    <SafeAreaView>
      <Text style={styles.customFont}>Merhaba Dünya!</Text>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  customFont: {
    //Kendi ekleyeceğiniz font adı ile değiştirin
    // fontFamily: 'Poppins',
    textAlign: "center",
    fontSize: 20,
  },
});

Kullanmak istediğimiz fontları (Google Fonts veya benzeri sitelerden) indirelim. PROJE-ANA-DIZINI/assets/fonts klasörüne indirdiğimiz .tff uzantılı fontları atalım.
Projenizde hali hazırda react-native.config.js dosyası yoksa oluşturalım ve içerisine yeni eklediğimiz assets klasörünü tanımlayalım.

react-native.config.js
1 2 3 4 5 6 7

module.exports = { project: { ios: {}, android: {}, }, assets: ["./assets/fonts/"], };
React Native 0.69 öncesi sürümlerde aşağıdaki komutu kullanarak link işlemini gerçekleştirebiliriz;
1

npx react-native link
React Native 0.69 sürümünde react-native link komutu kaldırıldı. Bunun yerine react-native-asset komutuyla fontları linkleyebilirsiniz.
1

npx react-native-asset
Bu komutu çalıştırdıktan sonra eklediğiniz fontların Android için android/app/src/main/assets/fonts dizinine IOS içinse Info.plist dosyasına eklendiğini görebilirsiniz.

Hepsi bu kadar! Eklediğiniz custom fontu kullanabilmek artık tek yapmanız gereken fontFamily olarak eklediğiniz fontun adını girmek. (Projenizi yeniden başlatmanız gerekebilir.)
1

fontFamily: 'Poppins',

App.js

react-native.config.js

`App.js`

`react-native.config.js`