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 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

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:

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

​
Theme Customization

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:

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

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