Skip to content

AliAkhgar/react-native-openvpn

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React Native OpenVPN Banner

React Native Turbo Module OpenVPN Support MIT License

Features

Turbo Module architecture for optimal performance
🍎 +70 Dynamically Controlled OpenVPN Options
🔔 Customizable notifications with actions and timers
🔄 Event-driven connection state management
🔧 OpenVPN 2.x and 3.x SDK compatibility
📝 Fully typed APIs with IntelliSense support
🔐 Multiple TLS profiles and security options
📄 Config file support and inline configurations
🌐 Advanced routing and custom DNS features

🧭 Fast Navigation

📦 Installation - Complete setup and platform configuration guide
→ Browse Installation Guide

📋 API Reference - Complete method and interface documentation
→ Browse API Documentation

💡 Usage Example - Practical implementation examples and guides
→ View Usage Examples

🔧 Troubleshoot and Debug - Problem solutions and debugging tools
→ Access Troubleshooting Guide


📦 Installation

Quick Install

# Using npm
npm install @aliakhgar1/react-native-openvpn

# Using yarn
yarn add @aliakhgar1/react-native-openvpn

# Install iOS dependencies (iOS only)
cd ios && pod install

🎯 Prerequisites

React Native: 0.68+
Android: API 24+
iOS: 15.1+


🚀 Quick Start

Get up and running with VPN connectivity in under 5 minutes:

import * as OpenVPN from 'react-native-openvpn';

// 1. Check permissions (Android only)
const connectToVPN = async () => {
  if (Platform.OS === 'android') {
    const isPrepared = await OpenVPN.isPrepared();
    if (!isPrepared) {
      const granted = await OpenVPN.prepare();
      if (!granted) return; // User denied permission
    }
  }

  // 2. Connect with minimal configuration
  await OpenVPN.connect({
    address: 'your-vpn-server.com',
    username: 'your-username', 
    password: 'your-password',
    openVPNConfig: yourOvpnConfigString,
    
    iOSOptions: {
      localizedDescription: 'My VPN Connection',
      networkExtensionBundleIdentifier: 'com.yourapp.vpn-extension',
      disconnectOnSleep: false,
      onDemandEnabled: false,
    },
    
    androidOptions: {
      Notification: {
        openActivityPackageName: 'com.yourapp.MainActivity',
        titleNotification: 'VPN Connected',
        titleConnected: '🔒 Secure Connection Active',
        titleConnecting: '🔄 Connecting to VPN...',
        showDisconnectAction: true,
      },
    },
  });
};

// 3. Listen for connection state changes
const subscription = OpenVPN.addOpenVPNStateChangeListener((state) => {
  switch (state.state) {
    case OpenVPN.ConnectionState.CONNECTED:
      console.log('🟢 VPN Connected Successfully!');
      break;
    case OpenVPN.ConnectionState.DISCONNECTED:
      console.log('🔴 VPN Disconnected');
      break;
    case OpenVPN.ConnectionState.CONNECTING:
      console.log('🟡 Connecting to VPN...');
      break;
  }
});

// 4. Disconnect when done
await OpenVPN.disconnect();
subscription.remove();