Providers

React Native context providers for React Native SDK reference for Crossmint wallets

This page has been updated for Wallets SDK V1. If you are using the previous version, see the previous version of this page or the V1 migration guide.

1. CrossmintProvider — SDK initialization (required for all Crossmint features)
2. CrossmintWalletProvider — Wallet creation and management

CrossmintProvider

Root provider for the Crossmint SDK. Must wrap your entire application. Initializes the SDK with your API key and sets up logging.

Props

apiKey · string · required

Your Crossmint client-side API key.

appId · string

Application identifier, sent as x-app-identifier header.

consoleLogLevel · ConsoleLogLevel

Minimum log level for console output (or “silent” to suppress all output). Logs below this level will not be written to the console. Set to “silent” to completely suppress console output. Defaults to “debug” (all logs shown) for backward compatibility.

overrideBaseUrl · string

Override the base API URL.

Usage

import { CrossmintProvider } from "@crossmint/client-sdk-react-native-ui";

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            {/* Your app content */}
        </CrossmintProvider>
    );
}

---

CrossmintWalletProvider

Provider for wallet creation and management. Must be nested inside CrossmintProvider. Handles secure communication with the Crossmint signer via a hidden WebView.

Props

appearance · UIConfig

Optional appearance configuration for styling built-in UI components.

Show properties

borderRadius · string

colors · UiConfigColors

Show properties

accent · string

background · string

backgroundSecondary · string

backgroundTertiary · string

border · string

buttonBackground · string

danger · string

inputBackground · string

textLink · string

textPrimary · string

textSecondary · string

fonts · UiConfigFonts

Show properties

cssSrc · string

family · string · required

display · string

src · string

style · "normal" | "italic" | "oblique"

weight · string

fontSizeBase · string

fontWeightPrimary · string

fontWeightSecondary · string

hideCardForm · boolean

spacingUnit · string

callbacks · { onTransactionStart?: () => Promise<void>; onWalletCreationStart?: () => Promise<void> }

Optional lifecycle callbacks invoked during wallet creation and transaction signing.

Show properties

onTransactionStart · () => Promise<void>

Called when a transaction signing flow begins.

onWalletCreationStart · () => Promise<void>

Called when a wallet creation flow begins.

createOnLogin · CreateOnLogin

Wallet configuration for automatic creation on user login. Defines the chain and signer type for the wallet.

Show properties

chain · Chain · required

The blockchain to create the wallet on (e.g. “base-sepolia”).

recovery · SignerConfigForChain · required

The recovery signer configuration (e.g. { type: "email" }). Used for wallet recovery and adding new signers.

signers · SignerConfigForChain[]

Optional array of operational signers. Defaults to a device signer if omitted (e.g. [{ type: "device" }]).

alias · string

Optional wallet alias.

plugins · WalletPlugin[]

Optional array of wallet plugins.

deviceSignerKeyStorage · DeviceSignerKeyStorage

Storage implementation for device signer keys. Defaults to NativeDeviceSignerKeyStorage (Secure Enclave on iOS, Android Keystore on Android). Override for testing or custom storage.

showOtpSignerPrompt · boolean

When true (default), built-in OTP signer UI prompts are shown during signing flows. When false, signing flows must be handled manually via the useWalletOtpSigner hook.

Usage

import {
    CrossmintProvider,
    CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-native-ui";

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintWalletProvider
                createOnLogin={{
                    chain: "base-sepolia",
                    recovery: { type: "email" },
                }}
            >
                {/* Your app content */}
            </CrossmintWalletProvider>
        </CrossmintProvider>
    );
}

Note: CrossmintWalletProvider must be nested inside CrossmintProvider. showOtpSignerPrompt defaults to true in React Native, showing built-in OTP dialogs automatically. Set to false to handle signing flows manually via the useWalletOtpSigner hook.