Setting up Privy UIs

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

Custom Build Configuration

Using Privy UIs requires a custom build configuration for your React Native application. This is necessary to ensure that the Privy SDK can properly interact with the native components and libraries it relies on. For detailed instructions, see the Custom Build Configuration guide.

Install Peer Dependencies

First, install the necessary peer dependencies:

npx expo install react-native-svg expo-clipboard react-native-qrcode-styled react-native-safe-area-context viem

Fonts

Install Font Packages

Install the following packages:

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

Load Fonts

Using expo/router
Without expo/router

Load the necessary fonts in your app’s root layout (typically 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,
  });

  // ...
}

Load the necessary fonts in your app’s root component (typically in App.tsx):

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

export default function App() {
  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.

Only mount PrivyElements once in your app.

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

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

Get started

Client-side SDKs

Server-side SDKs

REST API

Changelogs

Troubleshooting and tips

Setting up Privy UIs

Custom Build Configuration

Install Peer Dependencies

Fonts

Install Font Packages

Load Fonts

PrivyElements Component

​Custom Build Configuration

​Install Peer Dependencies

​Fonts

​Install Font Packages

​Load Fonts

​PrivyElements Component

Custom Build Configuration

Install Peer Dependencies

Fonts

Install Font Packages

Load Fonts

PrivyElements Component