Appearance

Setup ​

Before integrating Privy login with Privy's default UIs into your app, you must first ensure the necessary components and fonts are installed, per the guide below. To get started, first install the necessary peer dependencies:

bash
npx expo install viem

Fonts ​

To set up the fonts, install the following packages:

bash
npx expo install expo-font @expo-google-fonts/inter

Next, import the packages and load the fonts into your app like so. Make sure to follow the appropriate guidance depending on whether your app uses expo/router or not.

Load the necessary fonts in your app's root layout (hint: look for the RootLayout component in app/_layout.tsx):

tsx
import {Inter_400Regular, Inter_500Medium, Inter_600SemiBold} from '@expo-google-fonts/inter';
import {useFonts} from 'expo-font';

export default function RootLayout() {
  useFonts({
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold,
  });

  // ...
}

The PrivyElements component ​

Privy's default UIs in the Expo SDK are powered by PrivyElements, a modal component. Make sure to mount the PrivyElements component in your app's root layout or under authentication routes like so:

WARNING

Only mount PrivyElements once in your app.

tsx
import {PrivyElements} from '@privy-io/expo';

export default function RootLayout() {
  return (
    <>
      {/* Your app's content */}
      <PrivyElements />
    </>
  );
}