@crossmint/client-sdk-react-native-ui

Crossmint React Native SDK

Create chain-agnostic wallets for your React Native apps in minutes
Supports Solana, 20+ EVM chains (Polygon, Base, etc.), with secure mobile authentication.

🚀 Quick Start

pnpm add @crossmint/client-sdk-react-native-ui expo-secure-store expo-web-browser

1. Setup Providers

Option A: With Crossmint Authentication (Recommended)

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

export default function App() {
  return (
    <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CROSSMINT_API_KEY}>
      <CrossmintAuthProvider>
        <CrossmintWalletProvider
          createOnLogin={{
            chain: "solana",
            signer: { type: "email" }
          }}
        >
          <MainApp />
        </CrossmintWalletProvider>
      </CrossmintAuthProvider>
    </CrossmintProvider>
  );
}

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.

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

export default function App() {
  return (
    <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CROSSMINT_API_KEY}>
      {/* No CrossmintAuthProvider needed! */}
      <CrossmintWalletProvider>
        <MainApp />
      </CrossmintWalletProvider>
    </CrossmintProvider>
  );
}

2. Use Authentication & Wallets

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.

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 (
      <View style={{ padding: 20 }}>
        <Button 
          title="Login with Google" 
          onPress={() => loginWithOAuth("google")} 
        />
      </View>
    );
  }

  if (status === "loaded") {
    return (
      <View style={{ padding: 20 }}>
        <Text>Welcome {user.email}!</Text>
        <Text>Wallet: {wallet?.address}</Text>
        <Button 
          title="Send 1 USDC" 
          onPress={() => wallet?.send(recipient, "usdc", "1.0")} 
        />
        <Button title="Logout" onPress={logout} />
      </View>
    );
  }

  return <Text>Loading wallet...</Text>;
}

🔐 Authentication

OAuth Login Methods

const { loginWithOAuth } = useCrossmintAuth();

// Available OAuth providers
<Button title="Google" onPress={() => loginWithOAuth("google")} />
<Button title="Twitter" onPress={() => loginWithOAuth("twitter")} />

💳 Wallets

Multi-Chain Support

• Solana: Native SOL, SPL tokens
• EVM Chains: Ethereum, Polygon, Base, Arbitrum, and 15+ more
• Unified API: Same code works across all chains

Using Wallets

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: "<your-chain>",
  signer: { type: "<your-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:

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<string | undefined> {
    // Your implementation
  }

  async set(key: string, value: string, expiresAt?: string): Promise<void> {
    // Your implementation
  }

  async remove(key: string): Promise<void> {
    // Your implementation
  }
}

// Use your custom storage provider
function App() {
  const customStorage = new CustomStorage();

  return (
    <CrossmintProvider apiKey="YOUR_API_KEY">
      <CrossmintAuthProvider customStorageProvider={customStorage}>
        {/* Your app content */}
      </CrossmintAuthProvider>
    </CrossmintProvider>
  );
}

🛠️ Environment Setup

1. Get your API key from Crossmint Console

2. Add to your .env:

EXPO_PUBLIC_CROSSMINT_API_KEY=your_api_key_here

3. Configure deep linking in app.json:

{
  "expo": {
    "scheme": "your-app-scheme"
  }
}

📚 Examples & Documentation

• Wallets Expo Quickstart - Create and interact with Crossmint wallets using Crossmint Auth for React Native.

---

Questions? Visit our documentation or contact our support team.