English | 简体中文

A simple react native module to interact with OpenVPN

If this project has helped you out, please support us with a star 🌟

See CHANGELOG for details

# npm
npm install --save react-native-simple-openvpn

# or use yarn
yarn add react-native-simple-openvpn

From react-native 0.60 autolinking will take care of the link step

react-native link react-native-simple-openvpn

If your project is based on Expo, you should create a development build locally to use this module, and then configure it according to the README

https://docs.expo.dev/get-started/set-up-your-environment/?mode=development-build&buildEnv=local

Any library that is compatible with React Native is compatible with the Expo project when you create a development build. However, it may not be compatible with the Expo Go app

There is an example project for Android only, available at Expo: https://github.com/ccnnde/rnovpn-expo-example

Add the following to android/settings.gradle :

rootProject.name = 'example'
+ include ':vpnLib'
+ project(':vpnLib').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-simple-openvpn/vpnLib')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'

If your React Native version is 0.74 or higher, add the following to android/app/build.gradle :

android {
    // ...
+   packaging {
+       jniLibs {
+           useLegacyPackaging = true
+       }
+   }
}

But if your project is based on Expo and RN >= 0.74, please use the following modifications to the android/gradle.properties file instead

-expo.useLegacyPackaging=false
+expo.useLegacyPackaging=true

Due to file size limitations, jniLibs are too big to be published on npm. Use the assets on GitHub Releases instead

Download and unzip the resources you need for the corresponding architecture, and put them in android/app/src/main/jniLibs (create a new jniLibs folder if you don't have one)

project
├── android
│   ├── app
│   │   └── src
│   │       └── main
│   │           └── jniLibs
│   │               ├── arm64-v8a
│   │               ├── armeabi-v7a
│   │               ├── x86
│   │               └── x86_64
│   └── ...
├── ios
└── ...

If using CocoaPods, run it in the ios/ directory

pod install

See iOS Guide for iOS side Network Extension configuration and OpenVPN integration

Add the following to your project's AppDelegate.m :

+ #import "RNSimpleOpenvpn.h"

@implementation AppDelegate

// ...

+ - (void)applicationWillTerminate:(UIApplication *)application
+ {
+   [RNSimpleOpenvpn dispose];
+ }

@end

Please make sure the Header Search Paths of Build Settings contain the following paths:

$(SRCROOT)/../node_modules/react-native-simple-openvpn/ios

Or, if using CocoaPods, the following paths should be automatically included there:

"${PODS_ROOT}/Headers/Public/react-native-simple-openvpn"

Example

import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import RNSimpleOpenvpn, { addVpnStateListener, removeVpnStateListener } from 'react-native-simple-openvpn';

const isIPhone = Platform.OS === 'ios';

const App = () => {
  useEffect(() => {
    async function observeVpn() {
      if (isIPhone) {
        await RNSimpleOpenvpn.observeState();
      }

      addVpnStateListener((e) => {
        // ...
      });
    }

    observeVpn();

    return async () => {
      if (isIPhone) {
        await RNSimpleOpenvpn.stopObserveState();
      }

      removeVpnStateListener();
    };
  });

  async function startOvpn() {
    try {
      await RNSimpleOpenvpn.connect({
        remoteAddress: '192.168.1.1 3000',
        ovpnFileName: 'client',
        assetsPath: 'ovpn/',
        providerBundleIdentifier: 'com.example.RNSimpleOvpnTest.NEOpenVPN',
        localizedDescription: 'RNSimpleOvpn',
      });
    } catch (error) {
      // ...
    }
  }

  async function stopOvpn() {
    try {
      await RNSimpleOpenvpn.disconnect();
    } catch (error) {
      // ...
    }
  }

  function printVpnState() {
    console.log(JSON.stringify(RNSimpleOpenvpn.VpnState, undefined, 2));
  }

  // ...
};

export default App;

For more, read the API Reference

The following items were used in this project

• Android - ics-openvpn v0.7.33
• iOS - OpenVPNAdapter v0.8.0

• Resolve RN 0.65 warning
• Upgrade to the latest Android OpenVPN library

Thanks to all the people who contribute

GPLv2 © Nor Cod