React-native-openvpn-next NPM

react-native-openvpn-next

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`	`>= 0.63`

See CHANGELOG for details

Preview

Installation

Adding dependencies

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

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

Link

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

react-native link react-native-openvpn-next

Android

Add the following to android/settings.gradle :

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

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-openvpn-next/ios

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

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

Example

Usage

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

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

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

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

    observeVpn();

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

      removeVpnStateListener();
    };
  });

  async function startOvpn() {
    try {
      await RNOpenvpn.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 RNOpenvpn.disconnect();
    } catch (error) {
      // ...
    }
  }

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

  // ...
};

export default App;

For more, read the API Reference