Skip to main content
The ParaProvider component sets up the Para context for your React Native app, making all Para hooks available to any component in the tree. It handles client initialization, session persistence via AsyncStorage, and React Query integration.

​
Import

import { ParaProvider } from "@getpara/react-native-wallet";

​
Usage

import "@getpara/react-native-wallet/shim";

import { ParaProvider } from "@getpara/react-native-wallet";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{ apiKey: "YOUR_API_KEY" }}
        config={{ appName: "My App" }}
      >
        <AppContent />
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
With Event Callbacks

Receive lifecycle events like login, logout, and signing: 
<ParaProvider
  paraClientConfig={{
    apiKey: "YOUR_API_KEY",
  }}
  config={{ appName: "My App" }}
  callbacks={{
    onLogin: (event) => console.log("Logged in", event.detail.data),
    onLogout: () => console.log("Logged out"),
    onSignMessage: (event) => console.log("Message signed", event.detail.data),
  }}
>
  <AppContent />
</ParaProvider>

​
With Custom Storage

By default, ParaProvider persists session data using @react-native-async-storage/async-storage. You can provide your own storage adapter to use a different backend (e.g. SecureStore, MMKV, or an encrypted store): 
import { ParaProvider } from "@getpara/react-native-wallet";
import type { ParaStorageAdapter } from "@getpara/react-native-wallet";
import * as SecureStore from "expo-secure-store";

const secureStorageAdapter: ParaStorageAdapter = {
  getItem: (key) => SecureStore.getItemAsync(key),
  setItem: (key, value) => SecureStore.setItemAsync(key, value),
  removeItem: (key) => SecureStore.deleteItemAsync(key),
};

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: "YOUR_API_KEY",
        }}
        config={{ appName: "My App" }}
        storageAdapter={secureStorageAdapter}
      >
        <AppContent />
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
Props

PropTypeRequiredDescription
paraClientConfigParaMobile | { apiKey: string; env?: Environment; opts?: ConstructorOpts }YesA pre-instantiated ParaMobile, or a config object with your API key.
config{ appName: string; rpcUrl?: string }YesProvider configuration.
callbacksCoreCallbacksNoEvent callbacks (onLogin, onLogout, onSignMessage, etc.).
storageAdapterParaStorageAdapterNoCustom storage adapter. Defaults to AsyncStorage.
childrenReactNodeYesYour app’s component tree.