šŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket

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

Package Overview
Dependencies
Maintainers
7
Versions
52
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

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.

0.8.2
latest
Source
npm
Version published
Weekly downloads
463
-10.62%
Maintainers
7
Weekly downloads
Ā 
Created
Source

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

EXPO_PUBLIC_CROSSMINT_API_KEY=your_api_key_here
  • Configure deep linking in app.json:
{
  "expo": {
    "scheme": "your-app-scheme"
  }
}

šŸ“š Examples & Documentation

Questions? Visit our documentation or contact our support team.

FAQs

Package last updated on 27 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts