Usage Guide

Complete guide to integrating and using Solana App Kit in your React Native applications

This comprehensive guide shows you how to integrate and use Solana App Kit in your React Native applications. From installation to advanced customization, learn how to leverage the full power of the kit for your Solana mobile app development.

Integration Steps

Follow these steps to integrate Solana App Kit into your existing React Native or Expo application:

1. Installation

   Install the library in your React Native or Expo application:

   yarn

   yarn add solana-app-kit
   

2. Configuration

   Set up the authentication provider and configuration

3. Component Integration

   Start using pre-built screens and components

4. Customization

   Apply custom themes and styling

5. Service Integration

   Utilize blockchain services and operations

6. State Management

   Integrate with Redux store and state management

Configuration Setup

Basic Configuration

Configure the authentication provider in your application:

// In your app's configuration
import { CustomizationProvider } from 'solana-app-kit';

const myConfig = {
  auth: {
    provider: 'privy', // or 'dynamic', 'turnkey'
    apiKey: process.env.PRIVY_APP_ID,
    clientId: process.env.PRIVY_CLIENT_ID,
  },
  wallet: {
    autoConnect: true,
    enabledProviders: ['privy', 'dynamic', 'mwa']
  },
  theme: {
    mode: 'dark',
    accentColor: '#9945FF'
  }
};

// In your App.tsx or equivalent
function App() {
  return (
    <CustomizationProvider config={myConfig}>
      <NavigationContainer>
        {/* Your app components */}
      </NavigationContainer>
    </CustomizationProvider>
  );
}

Component Usage

Pre-built Screens

Use complete, ready-to-deploy screens for common Solana operations:

Social Feed

import { Thread } from 'solana-app-kit';

function MyFeedScreen() {
  const currentUser = useSelector(state => state.auth.user);
  const posts = useSelector(state => state.thread.posts);
  
  return (
    <Thread 
      rootPosts={posts} 
      currentUser={currentUser}
      onPostCreate={handlePostCreate}
      onLike={handleLike}
      onComment={handleComment}
    />
  );
}

Individual Components

Use specific components for granular integration:

components · object

Show 🔄 Swap Components

import { SwapCard, TokenSelector } from 'solana-app-kit';

function CustomSwapInterface() {
  const [inputToken, setInputToken] = useState('SOL');
  const [outputToken, setOutputToken] = useState('USDC');

  return (
    <View style={styles.container}>
      <TokenSelector
        selectedToken={inputToken}
        onTokenSelect={setInputToken}
        label="From"
      />
      
      <SwapCard
        inputToken={inputToken}
        outputToken={outputToken}
        onSwapComplete={handleSwapComplete}
      />
    </View>
  );
}

Show 👛 Wallet Components

import { WalletButton, WalletInfo } from 'solana-app-kit';

function WalletSection() {
  const { connected, wallet } = useWallet();

  return (
    <View>
      {connected ? (
        <WalletInfo 
          wallet={wallet}
          showBalance={true}
          showDisconnect={true}
        />
      ) : (
        <WalletButton
          onConnect={handleConnect}
          providers={['privy', 'dynamic']}
        />
      )}
    </View>
  );
}

Show 🎨 NFT Components

import { NFTCard, NFTGrid } from 'solana-app-kit';

function NFTGallery() {
  const { nfts, loading } = useFetchNFTs(walletAddress);

  return (
    <NFTGrid
      nfts={nfts}
      loading={loading}
      onNFTSelect={handleNFTSelect}
      renderItem={(nft) => (
        <NFTCard
          nft={nft}
          onTrade={handleTrade}
          onView={handleView}
        />
      )}
    />
  );
}

Theme Customization

Basic Theming

Override default theming with your brand colors:

import { Thread } from 'solana-app-kit';

function MyCustomizedFeed() {
  const themeOverrides = {
    colors: {
      primary: '#3498db',
      secondary: '#e74c3c',
      background: '#f5f5f5',
      surface: '#ffffff',
      text: '#2c3e50',
      accent: '#9b59b6'
    },
    spacing: {
      xs: 4,
      sm: 8,
      md: 16,
      lg: 24,
      xl: 32
    },
    borderRadius: {
      small: 4,
      medium: 8,
      large: 16
    }
  };
  
  return (
    <Thread 
      rootPosts={myPosts} 
      currentUser={currentUser}
      themeOverrides={themeOverrides}
    />
  );
}

Service Utilization

Direct Service Usage

Use blockchain services directly for custom implementations:

Token Operations

import { pumpfunService, swapService } from 'solana-app-kit';

// Token creation and trading
async function createAndBuyToken() {
  try {
    // Create a new meme token
    const tokenResult = await pumpfunService.createAndBuyTokenViaPumpfun({
      name: 'My Meme Token',
      symbol: 'MMT',
      description: 'The next big meme!',
      image: imageFile,
      initialBuy: 0.1 // SOL
    });
    
    console.log('Token created:', tokenResult.mint);
    
    // Execute a swap
    const swapResult = await swapService.executeSwap(
      'SOL',
      tokenResult.mint,
      1.0, // 1 SOL
      wallet.publicKey,
      sendTransaction
    );
    
    console.log('Swap completed:', swapResult.signature);
  } catch (error) {
    console.error('Operation failed:', error);
  }
}

Pre-built Screen Integration

Or use complete pre-built screens for faster development:

import { 
  PumpfunScreen, 
  NftScreen, 
  TokenMillScreen,
  RaydiumScreen 
} from 'solana-app-kit';

function MainAppNavigator() {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarStyle: { backgroundColor: '#1A1A1A' }
      }}
    >
      <Tab.Screen 
        name="Trading" 
        component={PumpfunScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name="trending-up" size={size} color={color} />
          )
        }}
      />
      <Tab.Screen 
        name="NFTs" 
        component={NftScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name="image" size={size} color={color} />
          )
        }}
      />
      <Tab.Screen 
        name="Launch" 
        component={TokenMillScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name="rocket" size={size} color={color} />
          )
        }}
      />
      <Tab.Screen 
        name="Professional" 
        component={RaydiumScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name="briefcase" size={size} color={color} />
          )
        }}
      />
    </Tab.Navigator>
  );
}

State Management Integration

Redux Store Setup

Extend your Redux store with pre-built slices:

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { 
  authReducer, 
  threadReducer, 
  transactionReducer,
  chatReducer,
  profileReducer 
} from 'solana-app-kit';

// Combine with existing reducers
const rootReducer = combineReducers({
  // Solana App Kit reducers
  auth: authReducer,
  thread: threadReducer,
  transaction: transactionReducer,
  chat: chatReducer,
  profile: profileReducer,
  
  // Your custom reducers
  myCustomFeature: myCustomReducer,
  anotherFeature: anotherReducer,
});

// Create store with combined reducers
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST']
      }
    })
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

Advanced Integration Patterns

Custom Hook Integration

Create custom hooks that leverage Solana App Kit functionality:

import { useWallet, useSwap, useFetchTokens } from 'solana-app-kit';
import { useState, useEffect } from 'react';

function usePortfolioManagement() {
  const { wallet, connected } = useWallet();
  const { executeSwap } = useSwap();
  const { tokens, loading, refetch } = useFetchTokens(wallet?.address);
  const [totalValue, setTotalValue] = useState(0);

  useEffect(() => {
    if (tokens.length > 0) {
      const value = tokens.reduce((sum, token) => sum + (token.value || 0), 0);
      setTotalValue(value);
    }
  }, [tokens]);

  const rebalancePortfolio = async (targetAllocations) => {
    const results = [];
    
    for (const allocation of targetAllocations) {
      try {
        const result = await executeSwap(
          allocation.from,
          allocation.to,
          allocation.amount
        );
        results.push(result);
      } catch (error) {
        console.error('Rebalance failed for', allocation, error);
      }
    }
    
    await refetch(); // Refresh portfolio
    return results;
  };

  return {
    tokens,
    totalValue,
    loading,
    connected,
    rebalancePortfolio,
    refetch
  };
}

// Usage in component
function PortfolioScreen() {
  const { 
    tokens, 
    totalValue, 
    loading, 
    rebalancePortfolio 
  } = usePortfolioManagement();

  return (
    <View>
      <Text>Portfolio Value: ${totalValue.toFixed(2)}</Text>
      <TokenList tokens={tokens} loading={loading} />
      <RebalanceButton onRebalance={rebalancePortfolio} />
    </View>
  );
}

Context Provider Pattern

Wrap your app with multiple providers for enhanced functionality:

import React from 'react';
import { 
  CustomizationProvider,
  WalletProvider,
  NotificationProvider 
} from 'solana-app-kit';

function AppProviders({ children }) {
  return (
    <CustomizationProvider config={appConfig}>
      <WalletProvider autoConnect={true}>
        <NotificationProvider>
          <Provider store={store}>
            {children}
          </Provider>
        </NotificationProvider>
      </WalletProvider>
    </CustomizationProvider>
  );
}

function App() {
  return (
    <AppProviders>
      <NavigationContainer>
        <MainNavigator />
      </NavigationContainer>
    </AppProviders>
  );
}

Best Practices

Performance

Optimize rendering by using React.memo for expensive components and implementing proper key props for lists

Error Handling

Implement error boundaries around kit components and handle network failures gracefully

State Management

Use selectors efficiently and avoid unnecessary re-renders by selecting only needed state slices

Security

Validate transactions before execution and implement proper user confirmation flows

Next Steps

Explore Modules

Dive deeper into specific protocol integrations and advanced features

Custom Components

Learn to build custom components that integrate with the kit’s architecture

State Patterns

Master advanced state management patterns and optimization techniques

Production Deploy

Deploy your app to iOS App Store and Google Play Store

---