WidgetSDK Component

The WidgetSDK component is the main entry point for embedding the Oobit Widget in your React Native application. It renders a WebView that loads the widget and handles all communication between your app and the widget.

Import

import { WidgetSDK } from "@oobit/react-native-sdk";

Basic Usage

<WidgetSDK
  accessToken="your-jwt-token"
  userWalletAddress="0x1234..."
  onTransactionRequested={(transaction) => {
    // Navigate user to transaction confirmation screen
    navigation.navigate('ConfirmTransaction', { transaction });
  }}
/>

Props

Required Props

accessToken

JWT token obtained from your backend by calling the Oobit token creation API. This token authenticates the widget session.

<WidgetSDK accessToken={tokenFromBackend} userWalletAddress="..." onTransactionRequested={...} />

Security Never generate tokens client-side. Always obtain them from your backend server.

userWalletAddress

The user's cryptocurrency wallet address. This address is used for receiving crypto deposits.

<WidgetSDK
  accessToken="..."
  userWalletAddress="0x742d35Cc6634C0532925a3b844Bc9e7595f..."
  onTransactionRequested={...}
/>

onTransactionRequested

Called when the user initiates a crypto transaction from the widget. Your app should navigate the user to a confirmation screen where they can review and approve the transaction.

Parameter:

The TransactionRequest is a union type that can be either an EVM or Solana transaction. Use the type field to discriminate:

<WidgetSDK
  accessToken="..."
  userWalletAddress="..."
  onTransactionRequested={(transaction) => {
    const { symbol, amount } = transaction.tokenMetadata;

    // Navigate to confirmation screen
    navigation.navigate('ConfirmTransaction', {
      transaction,
      displayAmount: amount,
      displaySymbol: symbol,
    });
  }}
/>

See Handling Transactions for detailed usage.

Optional Props

onClose

Called when the user requests to close the widget (e.g., taps a close button in the widget UI).

onClose={() => {
  navigation.goBack();
}}

See Also

• TypeScript Types - Complete type definitions
• Handling Transactions - Transaction handling guide