React Native Ve Expo İle Özel Font Kullanımı

Raşit Çolakel
3 min readJan 26, 2021

--

Merhaba herkese, bu benim ilk makalem. Umarım okumaktan keyif alırsınız.

React Native Nedir?

React native Facebook tarafından geliştirilen, native uygulamalar geliştirmek için kullanılan açık kaynak kodlu bir frameworktür.

Expo Nedir?

Expo veya Expo CLI olarak bilinen, native(Android ve iOS) uygulamalar geliştirmek için kullanılan açık kaynak kodlu bir frameworktür. Ayrıca, uygulama geliştirmeyi daha da kolaylaştırabilecek araçlar ve servisler barındırmaktadır.

Expo Kurulumu

Expo CLI kurulumu için gerekli komut:

npm install --global expo-cli

Expo İle Proje Oluşturma

Expo kurulumu tamamlandıktan sonra, aşağıdaki komut sayesinde proje oluşturma komutu:

expo init ozel-font-kullanimi

Bu komutu çalıştırdıktansonra, şablonu(template) blank olarak seçiyoruz. Ve indirme ve kurulum işlemlerinin gerçekleşmesini bekliyoruz. (Resim 1'de olduğu gibi)

Resim 1

Kurulum tamamlandıktan sonra expo start veya npm start komutu sayesinde “Expo Developer Tools” paneli varsayılan tarayıcı üzerinde açılacaktır. Panel açıldıktan sonra, QR kodunu, Expo Go’nun Android veya iOS uygulamaları ile taratarak telefonunuz, panelin solunda bulunan butonlar sayesinde iOS veya Android emülatör üzerinde expo projenizi test edebilirsiniz. Emülatör üzerinde Expo’yu ilk defa kullanıyorsanız, Expo, Expo Go adlı uygulamasını yükleyecektir.

Resim 2 (Expo Developer Tools)

Yukarıdaki işlemler tamamlandıktan sonra uygulamamızın App.js dosyası aşağıdaki gibi olacaktır.

Özel Font Dahil Etme

Uygulamamız kurulduktan sonra özel font ekleme işlemine başlayalım. Bu işlem için iki seçeneğimiz bulunmakta. Bunlar, Expo’nun bize google-fonts adlı paketi kullanabilir veya desteklenen formatlar ile de bu işlemi gerçekleştirebilirsiniz.

1- Expo google-fonts

google-fonts paketi kullanarak font eklemek için aşağıdaki komutu Google Fonts üzerinden seçtiğimiz fontun adı ile değiştirerek gerçekleştirebiliriz.

expo install @expo-google-fonts/<font-adi>

Inter için

expo install @expo-google-fonts/inter

Roboto için

expo install @expo-google-fonts/roboto

Ben özel font olarak Roboto’yu seçtim. Yüklediğimiz Roboto fontu beraberinde aşağıdaki seçenekleri sunuyor.

Roboto_100Thin
Roboto_100Thin_Italic
Roboto_300Light
Roboto_300Light_Italic
Roboto_400Regular
Roboto_400Regular_Italic
Roboto_500Medium
Roboto_500Medium_Italic
Roboto_700Bold
Roboto_700Bold_Italic
Roboto_900Black
Roboto_900Black_Italic

Aşağıdaki kod parçasını App.js dosyamıza ekleyerek fontumuzu dahil edebiliriz.

import { 
useFonts,
Roboto_100Thin,
Roboto_400Regular,
Roboto_700Bold,
} from "@expo-google-fonts/roboto";

Dahil ettiğimiz Roboto seçeneklerini kullanabilmek için aşağıdaki kod parçasını da App.js dosyamıza dahil ediyoruz.

let [fonts] = useFonts({
Roboto_100Thin,
Roboto_400Regular,
Roboto_700Bold,
});

Sonrasında, fontlarımızın yüklenmesini kontrol etmek için şöyle bir kod bloğunu ekleyebiliriz.

if (!fonts) return <Text>Fontlar Yükleniyor</Text>;

Fontlarımızı kullanmak için StyleSheet ile aşağıdaki styles objesini oluşturuyoruz.

Tüm işlemler bittikten sonra App.js dosyamız aşağıdaki gibi olacaktır.

İşlemlerin ekran görüntüsü:

2- Yazı Tipi Dahil Ederek

Bu işlem için Google Fonts üzerinden dilediğiniz fontu seçip dahil edebilirsiniz. Dahil etmeden önce kullanmamız geren expo-font paketini eklemek için aşağıdaki komutu çalıştırmamız gerekemektedir.

expo install expo-font

Aşağıdaki kod parçasını App.js dosyamıza ekliyor

import * as Font from "expo-font";

İndirdiğiniz dosyaları assets/fonts klasörüne kopyalıyoruz.

Kopyaladıktan sonra eklediğimiz dosyaları kullanabilmek içinkullanabilmek için aşağıdaki kod parçasını da App.js dosyamıza dahil ediyoruz.

let [fonts2] = Font.useFonts({
"roboto-thin": require("./assets/fonts/Roboto-Thin.ttf"),
"roboto-regular": require("./assets/fonts/Roboto-Regular.ttf"),
"roboto-bold": require("./assets/fonts/Roboto-Bold.ttf"),
});

Sonrasında, fontlarımızın yüklenmesini kontrol etmek için şöyle bir kod bloğunu ekleyebiliriz.

if (!fonts2) return <Text>Fontlar Yükleniyor</Text>;

Fontlarımızı kullanmak için StyleSheet ile aşağıdaki styles objesini oluşturuyoruz.

Tüm işlemler bittikten sonra App.js dosyamız aşağıdaki gibi olacaktır.

İşlemlerin ekran görüntüsü:

Github Linki: https://github.com/rasitcolakel/ozel-font-kullanimi

Yararlı olması dileğimle…

--

--

No responses yet