Skip to content

Commit 453ced7

Browse files
yjoseyjose
committed
feat: update font configuration to use @expo-google-fonts/inter and enhance documentation
1 parent ea7d500 commit 453ced7

6 files changed

Lines changed: 328 additions & 58 deletions

File tree

‎app.config.ts‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const appIconBadgeConfig: AppIconBadgeConfig = {
1919
],
2020
};
2121

22+
// eslint-disable-next-line max-lines-per-function
2223
export default ({ config }: ConfigContext): ExpoConfig => ({
2324
...config,
2425
name: Env.NAME,
@@ -68,7 +69,39 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
6869
[
6970
'expo-font',
7071
{
71-
fonts: ['./assets/fonts/Inter.ttf'],
72+
ios: {
73+
fonts: [
74+
'node_modules/@expo-google-fonts/inter/400Regular/Inter_400Regular.ttf',
75+
'node_modules/@expo-google-fonts/inter/500Medium/Inter_500Medium.ttf',
76+
'node_modules/@expo-google-fonts/inter/600SemiBold/Inter_600SemiBold.ttf',
77+
'node_modules/@expo-google-fonts/inter/700Bold/Inter_700Bold.ttf',
78+
],
79+
},
80+
android: {
81+
fonts: [
82+
{
83+
fontFamily: 'Inter',
84+
fontDefinitions: [
85+
{
86+
path: 'node_modules/@expo-google-fonts/inter/400Regular/Inter_400Regular.ttf',
87+
weight: 400,
88+
},
89+
{
90+
path: 'node_modules/@expo-google-fonts/inter/500Medium/Inter_500Medium.ttf',
91+
weight: 500,
92+
},
93+
{
94+
path: 'node_modules/@expo-google-fonts/inter/600SemiBold/Inter_600SemiBold.ttf',
95+
weight: 600,
96+
},
97+
{
98+
path: 'node_modules/@expo-google-fonts/inter/700Bold/Inter_700Bold.ttf',
99+
weight: 700,
100+
},
101+
],
102+
},
103+
],
104+
},
72105
},
73106
],
74107
'expo-localization',

‎assets/fonts/Inter.ttf‎

-731 KB
Binary file not shown.

‎docs/src/content/docs/ui-and-theme/fonts.mdx‎

Lines changed: 196 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,224 @@ head:
66
content: Fonts | React Native / Expo Starter
77
---
88

9-
With Expo, you can load fonts dynamically using `useFont` hook from `expo-font` library. With this approach, you need to wait for the font to load before showing or hiding your splash screen.
9+
## Overview
1010

11-
With the last version of `expo-font` introduced with Expo 50, you can use `expo-font` as a plugin in your `app.config.js` to load fonts natively.
11+
This starter uses the `expo-font` config plugin to load fonts natively, providing optimal performance and ensuring fonts are available immediately when your app starts.
1212

13-
To add a custom font you only need to put the font file in the `assets/fonts` and update the expo config by adding the exact file path to the config like the following:
13+
## Current Setup
1414

15-
```js title="app.config.js"
16-
import type { ConfigContext, ExpoConfig } from '@expo/config';
15+
The template comes pre-configured with the **Inter** font family including 4 weights:
16+
- Regular (400)
17+
- Medium (500)
18+
- SemiBold (600)
19+
- Bold (700)
1720

21+
Inter is configured as the default sans-serif font in the Tailwind CSS theme, so all text uses Inter by default.
22+
23+
## Using Fonts in Your App
24+
25+
### With Tailwind CSS Classes
26+
27+
Since Inter is configured as the default `font-sans`, you can use standard Tailwind font classes:
28+
29+
```tsx
30+
import { Text } from 'react-native';
31+
32+
<Text className="font-sans font-normal">Regular Text (400)</Text>
33+
<Text className="font-sans font-medium">Medium Text (500)</Text>
34+
<Text className="font-sans font-semibold">SemiBold Text (600)</Text>
35+
<Text className="font-sans font-bold">Bold Text (700)</Text>
36+
```
37+
38+
### With Style Props
39+
40+
You can also use the font directly with React Native style props:
41+
42+
```tsx
43+
<Text style={{ fontFamily: 'Inter', fontWeight: '400' }}>Regular Text</Text>
44+
<Text style={{ fontFamily: 'Inter', fontWeight: '500' }}>Medium Text</Text>
45+
<Text style={{ fontFamily: 'Inter', fontWeight: '600' }}>SemiBold Text</Text>
46+
<Text style={{ fontFamily: 'Inter', fontWeight: '700' }}>Bold Text</Text>
47+
```
48+
49+
## Adding a New Font
50+
51+
To add a new Google Font to your app, follow these steps:
52+
53+
### 1. Install the Font Package
54+
55+
Install the desired font from the `@expo-google-fonts` collection:
56+
57+
```bash
58+
pnpm add @expo-google-fonts/roboto
59+
```
60+
61+
### 2. Update `app.config.ts`
62+
63+
Add the font to your expo-font plugin configuration with platform-specific settings:
64+
65+
```ts title="app.config.ts"
1866
export default ({ config }: ConfigContext): ExpoConfig => ({
1967
...config,
2068
plugins: [
2169
[
2270
'expo-font',
2371
{
24-
fonts: ['./assets/fonts/Inter.ttf'],
72+
ios: {
73+
fonts: [
74+
'node_modules/@expo-google-fonts/inter/400Regular/Inter_400Regular.ttf',
75+
'node_modules/@expo-google-fonts/inter/500Medium/Inter_500Medium.ttf',
76+
'node_modules/@expo-google-fonts/inter/600SemiBold/Inter_600SemiBold.ttf',
77+
'node_modules/@expo-google-fonts/inter/700Bold/Inter_700Bold.ttf',
78+
// Add your new font
79+
'node_modules/@expo-google-fonts/roboto/400Regular/Roboto_400Regular.ttf',
80+
'node_modules/@expo-google-fonts/roboto/700Bold/Roboto_700Bold.ttf',
81+
],
82+
},
83+
android: {
84+
fonts: [
85+
{
86+
fontFamily: 'Inter',
87+
fontDefinitions: [
88+
{
89+
path: 'node_modules/@expo-google-fonts/inter/400Regular/Inter_400Regular.ttf',
90+
weight: 400,
91+
},
92+
{
93+
path: 'node_modules/@expo-google-fonts/inter/500Medium/Inter_500Medium.ttf',
94+
weight: 500,
95+
},
96+
{
97+
path: 'node_modules/@expo-google-fonts/inter/600SemiBold/Inter_600SemiBold.ttf',
98+
weight: 600,
99+
},
100+
{
101+
path: 'node_modules/@expo-google-fonts/inter/700Bold/Inter_700Bold.ttf',
102+
weight: 700,
103+
},
104+
],
105+
},
106+
// Add your new font family
107+
{
108+
fontFamily: 'Roboto',
109+
fontDefinitions: [
110+
{
111+
path: 'node_modules/@expo-google-fonts/roboto/400Regular/Roboto_400Regular.ttf',
112+
weight: 400,
113+
},
114+
{
115+
path: 'node_modules/@expo-google-fonts/roboto/700Bold/Roboto_700Bold.ttf',
116+
weight: 700,
117+
},
118+
],
119+
},
120+
],
121+
},
25122
},
26123
],
27124
],
28125
});
29126
```
30127

31-
Next, Make sure to add your new font to Tailwind CSS config to use it with `className`
128+
### 3. Update Tailwind Theme (Optional)
129+
130+
If you want to use the font with Tailwind CSS, add it to your theme in `src/global.css`:
131+
132+
```css title="src/global.css"
133+
@theme {
134+
/* Font families */
135+
--font-family-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
136+
--font-family-roboto: 'Roboto', ui-sans-serif, system-ui, sans-serif;
137+
138+
/* ... other theme config */
139+
}
140+
```
141+
142+
### 4. Run Prebuild
32143

33-
```js title="tailwind.config.js"
34-
const colors = require('./src/components/ui/theme/colors');
144+
After updating the configuration, run prebuild to apply the changes:
35145

36-
/** @type {import('tailwindcss').Config} */
37-
module.exports = {
38-
// NOTE: Update this to include the paths to all of your component files.
39-
content: ['./src/**/*.{js,jsx,ts,tsx}'],
40-
presets: [require('nativewind/preset')],
41-
theme: {
42-
extend: {
43-
fontFamily: {
44-
inter: ['Inter'],
146+
```bash
147+
pnpm run prebuild
148+
```
149+
150+
Then rebuild your app:
151+
152+
```bash
153+
pnpm run ios # or pnpm run android
154+
```
155+
156+
## Using Local Font Files
157+
158+
If you prefer to use local font files instead of npm packages:
159+
160+
### 1. Add Font Files
161+
162+
Place your font files in the `assets/fonts` directory:
163+
164+
```
165+
assets/fonts/
166+
├── CustomFont-Regular.ttf
167+
└── CustomFont-Bold.ttf
168+
```
169+
170+
### 2. Update `app.config.ts`
171+
172+
Reference the local font files in your configuration:
173+
174+
```ts title="app.config.ts"
175+
plugins: [
176+
[
177+
'expo-font',
178+
{
179+
ios: {
180+
fonts: [
181+
'./assets/fonts/CustomFont-Regular.ttf',
182+
'./assets/fonts/CustomFont-Bold.ttf',
183+
],
184+
},
185+
android: {
186+
fonts: [
187+
{
188+
fontFamily: 'CustomFont',
189+
fontDefinitions: [
190+
{
191+
path: './assets/fonts/CustomFont-Regular.ttf',
192+
weight: 400,
193+
},
194+
{
195+
path: './assets/fonts/CustomFont-Bold.ttf',
196+
weight: 700,
197+
},
198+
],
199+
},
200+
],
45201
},
46-
colors,
47202
},
48-
},
49-
plugins: [],
50-
};
203+
],
204+
],
51205
```
52206

207+
### 3. Run Prebuild
208+
209+
```bash
210+
pnpm run prebuild
211+
```
212+
213+
## Important Notes
214+
215+
:::caution
216+
Font changes require running `expo prebuild` and rebuilding your app. They won't take effect with just a hot reload or app restart.
217+
:::
218+
53219
:::info
54-
As we are linking font natively you need to run `expo prebuild` and then `expo ios` or `expo android` to use the new font.
220+
- **iOS**: Font family names are automatically extracted from the font files
221+
- **Android**: You explicitly define the `fontFamily` name and weight mappings
222+
- Using this approach, you can use `fontFamily: 'FontName'` with `fontWeight` consistently across both platforms
55223
:::
56224

57-
More details about adding fonts with Tailwind CSS can be found in the [Nativewind documentation](https://www.nativewind.dev/v4/tailwind/typography/font-family).
225+
## Resources
226+
227+
- [Expo Fonts Documentation](https://docs.expo.dev/develop/user-interface/fonts/)
228+
- [Google Fonts Expo Packages](https://github.com/expo/google-fonts)
229+
- [Tailwind CSS Font Family](https://tailwindcss.com/docs/font-family)

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,13 @@
4747
"e2e-test": "maestro test .maestro/ -e APP_ID=com.obytes.development"
4848
},
4949
"dependencies": {
50+
"@expo-google-fonts/inter": "^0.4.2",
5051
"@expo/metro-runtime": "^6.1.2",
5152
"@gorhom/bottom-sheet": "^5.2.8",
52-
"@hookform/resolvers": "^5.2.2",
5353
"@shopify/flash-list": "2.0.2",
54+
"@tanstack/react-form": "^1.27.7",
5455
"@tanstack/react-query": "^5.90.19",
56+
"@tanstack/zod-form-adapter": "^0.42.1",
5557
"app-icon-badge": "^0.1.2",
5658
"axios": "^1.13.2",
5759
"expo": "~54.0.31",
@@ -72,7 +74,6 @@
7274
"react": "19.1.0",
7375
"react-dom": "19.1.0",
7476
"react-error-boundary": "^6.1.0",
75-
"react-hook-form": "^7.71.1",
7677
"react-i18next": "^16.5.3",
7778
"react-native": "0.81.5",
7879
"react-native-edge-to-edge": "^1.7.0",

0 commit comments

Comments
 (0)