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.

Fonts

To set up the fonts, install the following packages:

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):

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.

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

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