React Native Custom Font Yükleme

react-native.config.js dosyamızı ana dizine oluşturuyoruz ve aşağıdaki kodu yazıyoruz.

module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./assets/fonts/'],
  };
  
Ana dizine assets/fonts klasörü açıyoruz ve fontları assets/fonts klasörünün içerisine yüklüyoruz. Örnek;

Daha sonra src klasörün içerisinde constants klasörü açıp Fonts.js dosyasını oluşturuyoruz ve fontlarımızı typelara karşılık gelecek şekilde ayarlıyoruz..

src/constants/Fonts.js

const Fonts = {
  regular: 'Poppins-Regular',
  bold: 'Poppins-Bold',
  light: 'Poppins-Light',
  medium: 'Poppins-Medium',
};

export default Fonts;

Projemizin terminaline npx react-native-asset komutu çalıştırıyoruz ve projeyi cihazdan silip tekrar npx react-native run-android yapıyoruz.

Kullanımı

Burada CustomText componenti oluşturdum. Dışarıdan props vererek fontWeight gibi değişiklikleri yapabilirsiniz.

import React from 'react';
import {StyleSheet, Text} from 'react-native';
import Fonts from '@src/constants/Fonts'; 

const CustomText = props => {
  return (
    <Text {...props} style={[styles.default, props.style]}>
      {props.children}
    </Text>
  );
};

const styles = StyleSheet.create({
  default: {
    fontFamily: Fonts.bold, // default olarak bold gelsin istiyorum.
  },
});

export default CustomText;

Not: en son npx react-native-asset yapmayı unutmayın.