MobileWalletProvider

The MobileWalletProvider is the shared app-level entrypoint for both React Native packages. It makes wallet connection state and app identity available to child components. The main difference is how each package configures the Solana client.

The provider always supplies app identity, authorization state, and wallet access to child components. The package choice mainly changes the network configuration props and the client that gets exposed downstream.

Kit

Props

Name	Type	Description	Default
cache	WalletAuthorizationCache	Optional. A cache instance for storing authorization data. Defaults to a cache that uses AsyncStorage.
children	ReactNode	Child components that should receive the mobile wallet context.
cluster	Pick<SolanaCluster, 'id' | 'url' | 'urlWs'>	Cluster configuration. Helpers like createSolanaDevnet() create the expected shape.
createClient	(cluster: Pick<SolanaCluster, 'url' | 'urlWs'>) => Client	Optional. A function to create a custom RPC client. By default the provider creates one with createSolanaRpc() and createSolanaRpcSubscriptions().
identity	AppIdentity	The application identity shown to the wallet.

Network configuration

Kit expects a cluster object with:

Name	Type	Description
id	SolanaClusterId	The cluster identifier, for example 'solana:devnet'.
url	string	The Solana RPC endpoint.
urlWs	string	Optional WebSocket endpoint for subscriptions.

Helpers available in the docs include:

• createSolanaDevnet()
• createSolanaMainnet(url)
• createSolanaTestnet()
• createSolanaLocalnet()

Example

import { MobileWalletProvider, createSolanaDevnet } from '@wallet-ui/react-native-kit';
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';

const cluster = createSolanaDevnet();
const appIdentity = {
    name: 'My Wallet App',
    uri: 'https://mywalletapp.com',
    icon: 'https://mywalletapp.com/icon.png',
};

function Root() {
    return (
        <MobileWalletProvider cluster={cluster} identity={appIdentity}>
            <App />
        </MobileWalletProvider>
    );
}

AppRegistry.registerComponent('MyWalletApp', () => Root);

Web3.js

Props

Name	Type	Description	Default
cache	Cache<WalletAuthorization> | undefined	Optional. A cache instance for storing authorization data.
chain	Chain	The blockchain chain to connect to, for example 'solana:devnet'.
children	ReactNode	Child components that should receive the mobile wallet context.
commitmentOrConfig	Commitment | ConnectionConfig	Optional commitment level or connection configuration.	{ commitment: 'confirmed' }
endpoint	string	The Solana RPC endpoint URL.
identity	AppIdentity	The application identity shown to the wallet.

Network configuration

Web3.js expects chain plus endpoint, which map directly to the chain identifier and Connection endpoint URL used by @solana/web3.js.

Example

import { MobileWalletProvider } from '@wallet-ui/react-native-web3js';
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';

const chain = 'solana:devnet';
const endpoint = 'https://api.devnet.solana.com';
const appIdentity = {
    name: 'My Wallet App',
    uri: 'https://mywalletapp.com',
    icon: 'https://mywalletapp.com/icon.png',
};

function Root() {
    return (
        <MobileWalletProvider chain={chain} endpoint={endpoint} identity={appIdentity}>
            <App />
        </MobileWalletProvider>
    );
}

AppRegistry.registerComponent('MyWalletApp', () => Root);

Advanced Kit client customization

Advanced client customization is available for @wallet-ui/react-native-kit.

Custom RPC client

import { createSolanaRpc, createSolanaRpcSubscriptions } from '@solana/kit';
import { MobileWalletProvider, Client, createSolanaDevnet } from '@wallet-ui/react-native-kit';

const cluster = createSolanaDevnet();

function createMyClient(cluster: { url: string; urlWs?: string }): Client {
    const rpc = createSolanaRpc(cluster.url);
    const wsUrl = cluster.urlWs ?? cluster.url.replace(/^http/, 'ws');
    const rpcSubscriptions = createSolanaRpcSubscriptions(wsUrl);
    return { rpc, rpcSubscriptions };
}

function Root() {
    return (
        <MobileWalletProvider cluster={cluster} createClient={createMyClient} identity={{ name: 'My App' }}>
            <App />
        </MobileWalletProvider>
    );
}

@solana/kit-plugins

npm

npm install @solana/kit-plugins

pnpm

pnpm add @solana/kit-plugins

bun

bun add @solana/kit-plugins

import { createEmptyClient } from '@solana/kit';
import { rpc } from '@solana/kit-plugins';
import { MobileWalletProvider, createSolanaDevnet } from '@wallet-ui/react-native-kit';

const cluster = createSolanaDevnet();

async function createMyClient(cluster: { url: string; urlWs?: string }) {
    const urlWs = cluster.urlWs ?? cluster.url.replace(/^http/, 'ws');
    const client = await createEmptyClient().use(rpc(cluster.url, { url: urlWs }));
    return { rpc: client.rpc, rpcSubscriptions: client.rpcSubscriptions };
}

function Root() {
    return (
        <MobileWalletProvider cluster={cluster} createClient={createMyClient} identity={{ name: 'My App' }}>
            <App />
        </MobileWalletProvider>
    );
}