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

​
Loading State

By default, ParaProvider blocks rendering until the SDK is ready. You can customize this behavior:

​
With Fallback UI

Show a loading indicator instead of a blank screen while the SDK initializes: 
<ParaProvider
  paraClientConfig={{ apiKey: "YOUR_API_KEY" }}
  config={{ appName: "My App" }}
  fallback={<ActivityIndicator size="large" />}
>
  <AppContent />
</ParaProvider>

​
With Immediate Rendering

Render children immediately and let them handle the loading state using useParaStatus(): 
<ParaProvider
  paraClientConfig={{ apiKey: "YOUR_API_KEY" }}
  config={{ appName: "My App" }}
  waitForReady={false}
>
  <AppContent />
</ParaProvider>

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

function AppContent() {
  const { isReady } = useParaStatus();

  if (!isReady) return <ActivityIndicator size="large" />;
  return <MainApp />;
}

​
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.
waitForReadybooleanNoWhen true (default), children are not rendered until the SDK is ready. Set to false to render immediately.
fallbackReactNodeNoContent to render while the SDK is initializing. Only used when waitForReady is true.
childrenReactNodeYesYour app’s component tree.