Setting up Privy UIs

Before integrating Privy’s default UIs into your app, you must first ensure the necessary components and fonts are installed.

​

Install Peer Dependencies

First, install the necessary peer dependencies:

npx expo install viem

​

Fonts

​

Install Font Packages

Install the following packages:

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

​

Load Fonts

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,
  });

  // ...
}

​

PrivyElements Component

Privy’s default UIs in the React Native SDK are powered by the PrivyElements modal component.

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

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