Skip to content
Wallet UI Wallet UI

Getting started with Expo

Generate a new application

Section titled “Generate a new application”

Start from a new Expo app:

Terminal window
npx create-expo-app@latest

Install development build dependencies

Section titled “Install development build dependencies”

Wallet UI for React Native works with Expo development builds.

Terminal window
npx expo install expo-dev-client

Install the native dependencies required by Mobile Wallet Adapter:

Terminal window
npx expo install expo-linking expo-secure-store react-native-get-random-values react-native-url-polyfill

Install Wallet UI

Section titled “Install Wallet UI”
Terminal window
npm install @wallet-ui/react-native-kit

Build the app

Section titled “Build the app”

Create and run a development build:

Terminal window
npx expo run:ios
npx expo run:android

Create app providers

Section titled “Create app providers”

Create components/app-providers.tsx and configure MobileWalletProvider with the package-specific network client setup.

components/app-providers.tsx
import { ReactNode } from 'react';
import { MobileWalletProvider, createSolanaDevnet } from '@wallet-ui/react-native-kit';


const cluster = createSolanaDevnet();


export function AppProviders({ children }: { children: ReactNode }) {
    return (
        <MobileWalletProvider cluster={cluster} identity={{ name: 'Wallet UI Example Expo' }}>
            {children}
        </MobileWalletProvider>
    );
}

Wrap the app with the provider:

app/_layout.tsx
import { Stack } from 'expo-router';
import { AppProviders } from '../components/app-providers';


export default function RootLayout() {
    return (
        <AppProviders>
            <Stack />
        </AppProviders>
    );
}

You can now use the React Native hooks in your app.

Connect to a wallet

Section titled “Connect to a wallet”

Add a simple connection component to confirm the provider is working.

app/index.tsx
import { useMobileWallet } from '@wallet-ui/react-native-kit';
import { useCallback } from 'react';
import { Button, Text, View } from 'react-native';


export default function IndexScreen() {
    const { account, connect, disconnect } = useMobileWallet();


    const handleConnect = useCallback(async () => {
        await connect();
    }, [connect]);


    const handleDisconnect = useCallback(async () => {
        await disconnect();
    }, [disconnect]);


    return (
        <View>
            {account ? (
                <>
                    <Text>Connected to: {account.address}</Text>
                    <Button title="Disconnect" onPress={handleDisconnect} />
                </>
            ) : (
                <Button title="Connect Wallet" onPress={handleConnect} />
            )}
        </View>
    );
}