React Native Custom Font Ekleme
22 Eylül 2022React 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
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ğimizassets
klasörünü tanımlayalım.react-native.config.js
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;npx react-native link
React Native 0.69 sürümünde
react-native link
komutu kaldırıldı. Bunun yerinereact-native-asset
komutuyla fontları linkleyebilirsiniz.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çinseInfo.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.)fontFamily: 'Poppins',