https://github.com/ftzi/expo-font-loader
https://github.com/ftzi/expo-font-loader
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/ftzi/expo-font-loader
- Owner: ftzi
- License: mit
- Created: 2022-02-06T23:58:20.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-12T20:32:52.000Z (almost 4 years ago)
- Last Synced: 2025-04-06T19:17:04.190Z (about 1 year ago)
- Language: TypeScript
- Size: 289 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/expo-font-loader)
[](http://www.typescriptlang.org/)
[](http://makeapullrequest.com)
# expo-font-loader
Almost 2 years ago [I've shared a little hack for expo-font](https://github.com/expo/google-fonts/issues/6). Now, it's improved and it's a npm package!
It's about smartly loading and using fonts with [@expo-google-fonts](https://github.com/expo/google-fonts) and icons with [@expo/vector-icons](https://github.com/expo/vector-icons) - icons are actually fonts!
Without this, you have to manually type the `fontFamily` in a Text style, e.g. `fontFamily: 'Roboto_500Medium'`. This is bad because you may not know or forget exactly what is its name, you may make a typo, you may have forgot to load it, you have to fully type it...
With this package, you speficify the fonts to be loaded, and it's returned a `Fonts` (or `F`, alias) object to be used in the fontFamily. As it's type smart, when you have `fontFamily: F.`, the IntelliSense will show all the available fontsFamilies you can use, and you can safely and quickly pick the one you want. It will complete with for example `F.Roboto_500Medium`. It's very useful when dealing with various fontsFamilies, so you can see all the options and quickly pick the one that best fits the text.
If you remove a font to be loaded and it's being used somewhere, there will be a Type error, as it knows that font isn't available to be used.
## 💿 Installation
```bash
expo install expo-font-loader expo-font
```
## 📖 Usage
#### Font and icon usage
```tsx
const styles = StyleSheet.create({
text: {
// Type safe and smart!
fontFamily: F.Roboto_500Medium
},
monoText: {
// Aliases are used in the same way!
fontFamily: F.monospace
}
});
function Component() {
return ()
}
```
#### Setup
```tsx
import { Platform } from 'react-native';
// Your icons to be loaded on start
import { Entypo, MaterialCommunityIcons } from '@expo/vector-icons';
// Your fonts to be loaded on start
import * as Roboto from '@expo-google-fonts/roboto';
// You can load single fonts instead of the whole family
import { Inter_900Black } from '@expo-google-fonts/inter';
import { createFontsToLoad } from 'expo-font-loader'
// F is an alias to Fonts, as I is an alias to Icons.
export const { F, Icons, useFonts, loadFonts } = createFontsToLoad({
fontsToLoad: {
...Roboto,
Inter_900Black
},
// If we don't previously load the icons, they may take a while to show up!
iconsToLoad: {
MaterialCommunityIcons,
Entypo,
},
aliases: {
monospace: Platform.OS === 'ios' ? 'Courier' : 'monospace', // 'monospace' is automatically added by default!
},
});
```
#### App init
```tsx
import { useFonts } from './fonts.ts'
const App () => {
/**
* 1.1.0 Update!
* You can now use loadFonts instead of useFonts, to be used instead of Font.loadAsync(fonts)
* as described in https://docs.expo.dev/versions/latest/sdk/splash-screen.
* */
const [fontsLoaded, error] = useFonts();
if (!fontsLoaded)
// https://docs.expo.dev/versions/latest/sdk/app-loading/
return
return
}
```
## 📰 [Changelog](https://github.com/SrBrahma/expo-font-loader/blob/main/CHANGELOG.md)