> **Create chain-agnostic wallets for your React Native apps in minutes** > Supports Solana, 20+ EVM chains (Polygon, Base, etc.), with secure mobile authentication.
npm install @crossmint/client-sdk-react-native-ui> Create chain-agnostic wallets for your React Native apps in minutes
> Supports Solana, 20+ EVM chains (Polygon, Base, etc.), with secure mobile authentication.
``bash`
pnpm add @crossmint/client-sdk-react-native-ui expo-secure-store expo-web-browser expo-device
Option A: With Crossmint Authentication (Recommended)
`tsx
import {
CrossmintProvider,
CrossmintAuthProvider,
CrossmintWalletProvider
} from "@crossmint/client-sdk-react-native-ui";
export default function App() {
return (
chain: "solana",
signer: { type: "email" }
}}
>
);
}
`
Option B: š§ Bring Your Own Authentication
Already have authentication? Skip Crossmint Auth and use wallets with your existing system:
š Complete Custom Auth Guide - Full setup with server-side examples and implementation details.
`tsx
import {
CrossmintProvider,
CrossmintWalletProvider
} from "@crossmint/client-sdk-react-native-ui";
export default function App() {
return (
{/ No CrossmintAuthProvider needed! /}
);
}
`
The React Native SDK uses Expo's SecureStore for secure, encrypted storage of authentication tokens. This provides a platform-native secure storage solution that encrypts sensitive data on the device.
`tsx
import { View, Button, Text } from "react-native";
import { useCrossmintAuth, useWallet } from "@crossmint/client-sdk-react-native-ui";
export default function MainApp() {
const { loginWithOAuth, logout, user } = useCrossmintAuth();
const { wallet, status } = useWallet();
if (!user) {
return (
title="Login with Google"
onPress={() => loginWithOAuth("google")}
/>
);
}
if (status === "loaded") {
return (
title="Send 1 USDC"
onPress={() => wallet?.send(recipient, "usdc", "1.0")}
/>
);
}
return
}
`
tsx
const { loginWithOAuth } = useCrossmintAuth();// Available OAuth providers
`š³ Wallets
$3
- Solana: Native SOL, SPL tokens
- EVM Chains: Ethereum, Polygon, Base, Arbitrum, and 15+ more
- Unified API: Same code works across all chains$3
`tsx
const { wallet, getOrCreateWallet } = useWallet();// Get wallet info
const address = wallet?.address;
const balance = await wallet?.balances();
// Send tokens
const tx = await wallet?.send(recipient, "usdc", "10.5");
console.log("Transaction:", tx.explorerLink);
// For advanced use cases
const customWallet = await getOrCreateWallet({
chain: "",
signer: { type: "" }
});
`Custom Storage Provider
If you need to implement a custom storage solution, you can implement the
StorageProvider interface and pass it to the CrossmintAuthProvider:`tsx
import { CrossmintAuthProvider, type StorageProvider } from "@crossmint/client-sdk-react-native-ui";// Implement your custom storage provider
class CustomStorage implements StorageProvider {
async get(key: string): Promise {
// Your implementation
}
async set(key: string, value: string, expiresAt?: string): Promise {
// Your implementation
}
async remove(key: string): Promise {
// Your implementation
}
}
// Use your custom storage provider
function App() {
const customStorage = new CustomStorage();
return (
{/ Your app content /}
);
}
`š Checkout
Accept credit card payments for tokens and NFTs directly in your React Native app with a fully customizable embedded checkout experience.
$3
`tsx
import {
CrossmintProvider,
CrossmintEmbeddedCheckout
} from "@crossmint/client-sdk-react-native-ui";export default function App() {
return (
recipient={{
walletAddress: "your_recipient_wallet_address"
}}
payment={{
crypto: { enabled: false },
fiat: { enabled: true },
receiptEmail: "customer@example.com" // Required for payment receipts
}}
lineItems={{
tokenLocator: "solana:7EivYFyNfgGj8xbUymR7J4LuxUHLvi7Dgu",
executionParameters: {
mode: "exact-in", // USD amount to spend
amount: "1", // Amount in USD
maxSlippageBps: "500" // 5% slippage tolerance
}
}}
/>
);
}
`$3
Add these to your
.env:
`bash
EXPO_PUBLIC_CROSSMINT_API_KEY=your_api_key_here
`Full Embedded Checkout Quickstart - Complete guide with token purchases and NFT minting examples.
š ļø Environment Setup
1. Get your API key from Crossmint Console
2. Add to your
.env:
`bash
EXPO_PUBLIC_CROSSMINT_API_KEY=your_api_key_here
`3. Configure deep linking in
app.json:
`json
{
"expo": {
"scheme": "your-app-scheme"
}
}
``- Wallets Expo Quickstart - Create and interact with Crossmint wallets using Crossmint Auth for React Native.
---
Questions? Visit our documentation or contact our support team.