LazorKit LogoLazorKit
React Native SDK

Getting Started

Complete guide to integrating the LazorKit React Native SDK.

Integration Guide

Default Configuration

Use these default values for quick integration on Devnet:

const DEFAULT_CONFIG = {
  rpcUrl: 'https://api.devnet.solana.com',
  portalUrl: 'https://portal.lazor.sh',
  configPaymaster: {
    paymasterUrl: 'https://kora.devnet.lazorkit.com',
    // apiKey: 'YOUR_API_KEY' // Optional
  }
};

1. Installation

npm install @lazorkit/wallet-mobile-adapter

2. Polyfills & Configuration

Since React Native doesn't have a standardized Node.js environment, some Solana libraries (like @solana/web3.js) need a little help to work correctly. You'll need to install a few polyfills.

Install Dependencies

npm install react-native-get-random-values react-native-url-polyfill buffer

Configure Entry Point

Add these imports to the very top of your entry file (e.g., app/_layout.tsx, index.js, or App.tsx):

import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import { Buffer } from 'buffer';

global.Buffer = global.Buffer || Buffer;

Note: If you're using Expo and run into issues with random values, make sure expo-crypto is installed.

3. Setup Provider

Wrap your application with LazorKitProvider. Ensure you have expo-web-browser installed.

// App.tsx
import { LazorKitProvider } from '@lazorkit/wallet-mobile-adapter';

export default function App() {
  return (
    <LazorKitProvider
      rpcUrl="https://api.devnet.solana.com"
      portalUrl="https://portal.lazor.sh"
      configPaymaster={{ 
        paymasterUrl: "https://kora.devnet.lazorkit.com" 
      }}
    >
      <HomeScreen />
    </LazorKitProvider>
  );
}

4. Authentication

Use the connect method to log a user in. You'll need to provide a redirectUrl so the app knows where to return after the user finishes signing in on the portal.

Important: This redirectUrl must match the Custom URL Scheme you set up in your app.json (for Expo) or Info.plist (for iOS).

// ConnectScreen.tsx
import { useWallet } from '@lazorkit/wallet-mobile-adapter';
import { Button, View, Text } from 'react-native';

export function ConnectScreen() {
  const { connect, isConnected, wallet } = useWallet();
  const APP_SCHEME = 'myapp://home';

  if (isConnected) {
    return <Text>Welcome back, {wallet?.smartWallet}</Text>;
  }

  return (
    <Button 
      title="Connect with Passkey" 
      onPress={() => connect({ redirectUrl: APP_SCHEME })} 
    />
  );
}

5. Signing Messages

Sign messages by directing users to the portal.

// SignScreen.tsx
import { useWallet } from '@lazorkit/wallet-mobile-adapter';
import { Button } from 'react-native';

export function SignScreen() {
  const { signMessage } = useWallet();

  const handleSign = async () => {
    try {
      const signature = await signMessage(
        "Welcome to LazorKit!", 
        { redirectUrl: 'myapp://callback' }
      );
      console.log("Verified Signature:", signature);
    } catch (e) {
      console.error(e);
    }
  };

  return <Button title="Sign Message" onPress={handleSign} />;
}

6. Sending Transactions

Send SOL or execute instructions on-chain.

// TransferScreen.tsx
import { useWallet } from '@lazorkit/wallet-mobile-adapter';
import { SystemProgram, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js';
import { Button } from 'react-native';

export function TransferScreen() {
  const { signAndSendTransaction, wallet } = useWallet();

  const handleTransfer = async () => {
    if (!wallet) return;

    // 1. Create Instruction
    const ix = SystemProgram.transfer({
      fromPubkey: new PublicKey(wallet.smartWallet),
      toPubkey: new PublicKey("RECIPIENT_ADDRESS"),
      lamports: 0.01 * LAMPORTS_PER_SOL,
    });

    // 2. Sign and Send
    const signature = await signAndSendTransaction(
      { 
        instructions: [ix], 
        transactionOptions: { feeToken: 'USDC' } 
      },
      { redirectUrl: 'myapp://callback' }
    );
    console.log("Tx:", signature);
  };

  return <Button title="Send SOL" onPress={handleTransfer} />;
}

7. Next Steps

See the Troubleshooting guide for help with common issues like deep linking configuration.