-
-
Notifications
You must be signed in to change notification settings - Fork 175
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds font guide #435
base: master
Are you sure you want to change the base?
Adds font guide #435
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
# Fonts | ||
|
||
## Loading Google Fonts with next-font, expo-font, and Tailwind/Nativewind | ||
|
||
This guide was written using the expo-router starter in mind. | ||
|
||
1. Load fonts in expo, in apps/expo/_layout.tsx. Make sure to `npx expo add @expo-google-fonts/roboto-slab` whatever fonts you want to use. | ||
|
||
apps/expo/_layout.tsx | ||
``` | ||
import { Provider } from 'app/provider'; | ||
import { useFonts } from 'expo-font'; | ||
import { Stack } from 'expo-router'; | ||
import * as SplashScreen from 'expo-splash-screen'; | ||
import { useEffect } from 'react'; | ||
import { Gurajada_400Regular } from "@expo-google-fonts/gurajada"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's get rid of any code that isn't directly related to this guide like SplashScreen etc. |
||
import { RobotoSlab_400Regular } from "@expo-google-fonts/roboto-slab"; | ||
|
||
export { | ||
// Catch any errors thrown by the Layout component. | ||
ErrorBoundary | ||
} from 'expo-router'; | ||
|
||
export const unstable_settings = { | ||
// Ensure that reloading on `/modal` keeps a back button present. | ||
initialRouteName: '(tabs)', | ||
}; | ||
|
||
// Prevent the splash screen from auto-hiding before asset loading is complete. | ||
SplashScreen.preventAutoHideAsync(); | ||
|
||
export default function RootLayout() { | ||
const [loaded, error] = useFonts({ | ||
Gurajada_400Regular: Gurajada_400Regular, | ||
RobotoSlab_400Regular: RobotoSlab_400Regular, | ||
}); | ||
|
||
// Expo Router uses Error Boundaries to catch errors in the navigation tree. | ||
useEffect(() => { | ||
if (error) throw error; | ||
}, [error]); | ||
|
||
useEffect(() => { | ||
if (loaded) { | ||
SplashScreen.hideAsync(); | ||
} | ||
}, [loaded]); | ||
|
||
if (!loaded) { | ||
return null; | ||
} | ||
|
||
return <RootLayoutNav />; | ||
} | ||
|
||
function RootLayoutNav() { | ||
return ( | ||
<Provider> | ||
<Stack /> | ||
</Provider> | ||
); | ||
} | ||
``` | ||
|
||
|
||
2. In your next app, load the font in the root layout component. Make sure to add the css variable option, and to use that variable in your html tag. | ||
|
||
See the [next-font with tailwind guide](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#with-tailwind-css) for more info. | ||
|
||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You should put |
||
import { StylesProvider } from './styles-provider' | ||
import "./globals.css"; | ||
import {Roboto_Slab} from "next/font/google" | ||
|
||
export const metadata = { | ||
title: 'Create Solito App', | ||
description: 'Generated by create Solito app', | ||
} | ||
|
||
const robotoSlab = Roboto_Slab({weight: "400", subsets: ["latin"], variable: '--font-roboto-slab'}) | ||
|
||
export default function RootLayout({ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's add an example using the Pages RouterIn your // code block here App RouterIn // code here.... |
||
children, | ||
}: { | ||
children: React.ReactNode | ||
}) { | ||
|
||
return ( | ||
<html lang="en" className={`${robotoSlab.variable}`}> | ||
<body> | ||
<StylesProvider>{children}</StylesProvider> | ||
</body> | ||
</html> | ||
) | ||
}``` | ||
|
||
|
||
3. Update /packages/app/design/tailwind/theme.js with the reference for the expo font and the CSS variable used in the next app.. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should have a heading describing how to use this with and without Tailwind across platforms |
||
|
||
``` | ||
// @ts-check | ||
|
||
/** @type {import('tailwindcss').Config['theme']} */ | ||
const Colors = require("../../constants/Colors") | ||
|
||
|
||
const theme = { | ||
extend: { | ||
colors: { | ||
...Colors.light, | ||
}, | ||
fontFamily: { | ||
"roboto-slab": ["RobotoSlab_400Regular", "var(--font-roboto-slab)"], // important that you have both of these! | ||
}, | ||
}, | ||
// edit your tailwind theme here! | ||
// https://tailwindcss.com/docs/adding-custom-styles | ||
} | ||
|
||
module.exports = { | ||
theme, | ||
} | ||
|
||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we could make this more expo-router-agnostic.
Create this file, and then wrap your
App.tsx
with it.If you're using Expo Router, then it would go in the
app/_layout.tsx
file (and show a very minimal example).For example, the way
Fonts
is used in the Dripsy guide in a separate file and then imported simply.It doesn't have to be a separate file, but it's nice to keep it clear and concise like that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, the instructions should work for custom font files themselves