React-native ile yazı stili/font ekleme (0.59, 0.60, 0.69+)

1.Yazı tipi edinmek

Yazı tipinizi uygulamanıza eklemek için, desteklenen tüm stiller .ttf (.otf gibi diğer formatlar da desteklenir) dosyalarına ihtiyacınız olacaktır.

Biz örneğimizde Baloo Bhai adında bir yazı stili kullanacağız.  https://fonts.google.com/specimen/Baloo+Bhai

Bu linkten başka stiller de seçebilirsiniz. 

Seçtikten sonra bilgisayarınıza indiriniz.

2.Projeye (indirdiğimiz) yazı stilini eklemek

Projemizin içine “styleSheet” adında bir klasör oluşturup, onun da içine “fonts” adında bir klasör oluşturuyoruz.

Bilgisayarımıza indirdiğimiz yazı stili dosyasını zipten çıkartıp, projemizin içinde oluşturduğumuz assets/fonts klasörünün içine  ekliyoruz.

Dosya dizini şu şekilde olacaktır : AppName/assets/fonts/Blob_Bahai

3. Yazı Tipini Bağlamak

Eğer react native versiyonu >= 0.60 ise react-native.config.js dosyası oluşturup aşağıdaki gibi export edebilirsiniz.

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ["./assets/fonts/"], // stays the same
};

Eğer react native versiyonunuz <= 0.59.9 ise package.json içerisine aşağıdaki scripti ekleyiniz.

"rnpm": {
"assets": ["assets/fonts/Blob_Bahai"]
}

bağlamını ekleyiniz.

0.69 dan düşük olan her iki durum için de, link işlemini yapacağız.

$ react-native link

0.69+ ise;

$ npx react-native-asset

4. Yeni Yazı Stilini Kullanma

Aşağıdaki gibi kullanabilirsiniz yeni yazı stilinizi.

<Text style={{fontFamily: 'BalooBhai-Regular'}}> “Vicdan, kalp penceresinden bakar. Akıl, gözünü kapasa da vicdanın gözü daima açıktır!” B.S.N. </Text>

Bu işlemlerden sonra ios ve android için build işlemlerini yapmalısınız.

react-native run-ios
react-native run-android

Ekran Görüntüleri;

ios;

android;

Olası Hatalar;

• “Cycle inside Pods-templateTests; building could produce unreliable results.”
  Bu hatayı ekran görüntüsündeki gibi çözdüm. (File -> Workspace Settings)
  
• Eklediğiniz bir fontu kaldırmak istediğiniz zaman IDE üzerinden silmenin dışında, xcode üzerinden de /Resources altından kaldırmanız gerekir. Yoksa bu fontu bulamadığı için hata verecektir.
• Yeni bir font ekledikten sonra da gene aynı şekilde link’leme işlemi yapılmalıdır.