React-Native’de Custom Font ya da Google Font Eklemek

React-Native’de Google Fonts üzerinden ya da başka kendi yazı tipinizi uygulamanıza ekleyebilirsiniz. Bunun için yapmanız gerekenlere hemen göz atalım.

Öncelikle Google Fonts üzerinden bir yazı tipi seçelim ve bunu indirelim. Buradan Google fonts’a gidebilirsiniz. Projenize dahil etmek istediğiniz yazı tipini seçip download butonuna basarak yazı tipimizin tüm dosyalarını indiriyoruz.

Projemizin ana dizini üzerinde (node_modules’in ve package.json’un olduğu dizin) assets adında bir klasör oluşturuyoruz. assets’in altında fonts adında bir klasör oluşturuyoruz. Ve indirdiğimiz bu yazı tipini bu fonts adındaki klasöre taşıyoruz.

Eğer react-native sürümünüz 0.6’dan eskiyse package.json dosyasında bir komut eklemeniz gerekiyor.

// React Native 0.6 ve altı için package.json dosyasına yazılacak
"rnpm": {
    "assets": ['./assets/fonts/']
}

Eğer 0.6 ve daha güncelse react-native.config.js dosyasına geliyoruz. Eğer bu dosya yoksa oluşturun korkmayın. Dosyanın içerisine şu şekilde fontların klasörünün nerede olduğunu belirten komutu belirtiyoruz.

// React Native 0.6 ve üzeri için react-native.config.js dosyasına yazılacak
module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: ['./assets/fonts/']
};

Bu aşamadan sonra react-native’in bu eklediğimiz dosyaları projeye dahil etmesi için link’lememiz gerekiyor bunun için command line‘a şu kodu yazıyoruz.

react-native link

Bu komutla birlikte font dosyalarımız projeye dahil oldu. Şimdi de kullanmak için küçük bir component oluşturup deneyin isterseniz.

<Text style={fontFamily:Montserrat-Regular}>Omen Tonrem!</Text>;

Son olarak yazı tipinizin değiştiğini görmeniz için projeyi tekrar ayağa kaldırmanız yeterlidir. Tebriks. Şukrahn.