Setting up your app with the Expo SDK

TIP

Make sure that you have already configured your Privy App and Client IDs prior to integrating the Privy Expo SDK into your application.

1. Install the required dependencies

Core Dependencies

Install the Privy Expo SDK along with its peer dependencies using expo:

npx expo install expo-application expo-constants expo-web-browser expo-linking expo-secure-store react-native-webview expo-crypto @privy-io/expo-native-extensions @privy-io/expo

Polyfills

Install polyfills which account for APIs required by the Privy Expo SDK that are not available in the React Native environment.

npm i --save fast-text-encoding react-native-get-random-values @ethersproject/shims

If your app uses the Expo bare workflow, the following must also be run.

npx pod install

2. Import the required polyfills

Next, import the required polyfills that you installed above into your app. The placement of these imports depends on whether your app uses expo/router or not; please make sure to follow the appropriate instructions below.

TIP

You must import polyfills in the exact order specified below to use them in your application.

If your app uses expo/router, required polyfills must come before the Expo router entrypoint.

To do this, import the required polyfills into a new file called entrypoint.js, and update your package.json's main property to point to entrypoint.js:

entrypoint.js

// Import required polyfills first
import 'fast-text-encoding';
import 'react-native-get-random-values';
import '@ethersproject/shims';
// Then import the expo router
import 'expo-router/entry';

package.json

{
  "name": "<your app name>",
  "main": "expo-router/entry", 
  "main": "entrypoint.js"
}

3. Wrap your components with the PrivyProvider

Finally, to use the Expo SDK in your code, import the PrivyProvider component from the SDK, and wrap the rest of your app's components with it. This should likely go either an App.tsx or a _layout.tsx file.

As a prop to this component, you must specify an appId and a clientId. These can can be obtained from the Basic settings page and App Clients page respectively in the Privy Dashboard.

// If your app does NOT use `expo/router`, replace this comment with
// import statements for the required polyfills as described above

import React from 'react';

// Import the PrivyProvider
import {PrivyProvider} from '@privy-io/expo';

// Your components
import {HomeScreen} from './Homescreen';

export default function App() {
  return (
    <PrivyProvider
      // Render the PrivyProvider with your app ID and app client ID
      appId={'insert-your-privy-app-id'}
      clientId={'insert-your-privy-app-client-id'}
    >
      <HomeScreen />
    </PrivyProvider>
  );
}

TIP

To see an example application that has the Privy Expo SDK configured, check out our Expo starter repo!