react-native-simple-openvpn

English | 简体中文

A simple react native module to interact with OpenVPN

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

Versions

RNSimpleOpenvpn	React Native
1.0.0 ~ 1.2.0	0.56 ~ 0.66
2.0.0 ~ 2.1.1	0.63 ~ 0.71
2.1.2	0.72
>= 2.1.3	>= 0.73

See CHANGELOG for details

Preview

Installation

Adding dependencies

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

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

Link

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

react-native link react-native-simple-openvpn

Expo

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

Android

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'

useLegacyPackaging

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

Import jniLibs

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
└── ...

iOS

If using CocoaPods, run it in the ios/ directory

pod install

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

Disable VPN connection when app is terminated in iOS

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

Example

Usage

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

OpenVPN library

The following items were used in this project

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

Todo

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

Star History

Contributors

Thanks to all the people who contribute

License

GPLv2 © Nor Cod