Appearance
Setting up your app with the Expo SDK
To set up your app with Privy's Expo SDK, follow the steps below:
1. Install the required dependencies
Core Dependencies
Install the Privy Expo SDK along with its peer dependencies using npm
:
sh
npx expo install expo-application expo-constants expo-web-browser expo-linking expo-secure-store react-native-webview expo-crypto @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.
sh
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.
sh
npx pod install
Polyfills must then be installed and imported as early as possible in your application.
TIP
Polyfills must be imported in the correct order to work properly.
tsx
import 'fast-text-encoding';
import 'react-native-get-random-values';
import '@ethersproject/shims';
// Your root component
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
:
tsx
// 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';
Then, update your package.json
's main
property to point to entrypoint.js
:
json
// package.json
{
"name": "<your app name>",
"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.
As a prop to this component, you must specify an appId
and an clientId
. These can can be obtained from the Privy Developer Dashboard under Settings > Basics for the app ID and Settings > Clients for the client ID.
tsx
// 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 (
// Render the PrivyProvider with your app ID
<PrivyProvider appId={'insert-your-privy-app-id'} clientId={'insert-your-privy-app-client-id'}>
<HomeScreen />
</PrivyProvider>
);
}