Skip to content

startVpn() resolves to true but no connection is established in React Native #2

@darkloveir

Description

@darkloveir

Hello,
I’m trying to integrate react-native-outline-vpn into a new React Native project (RN 0.75.3 / Android). I installed the package, imported it, and used the following code:

import { useEffect } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import Outline from 'react-native-outline-vpn';

const vpnData = {
  host: 'srv.xyz',
  port: 1234,
  password: 'PBJVUoyVFEcCOda0uvseVaa',
  method: 'chacha20-ietf-poly1305',
  prefix: '\u0005\u00DC\u005F\u00E0\u0001\u0020',
  providerBundleIdentifier: 'org.reactjs.native.OutlineVpn.OutlineVpn', //apple bundle identifier declared step-2 on guide
  serverAddress: 'OutlineServer', //can be any string which user see MyPreciousVpn
  tunnelId: 'OutlineTunnel', //can be random string
  localizedDescription: 'OutlineVpn', //can be random string
}

export default function App() {
  const startConnnection = () => {
    console.log('Starting Connection : ', vpnData)
    Outline.startVpn(vpnData).then((res) => {
      console.log('Connection Status : ', res)
    }).catch((err) => {
      console.log('Connection Error : ', err)
    })
  }

  const stopConnnection = () => {
    console.log('Stopping Connection')
    Outline.stopVpn()
  }

  // Tried both inside and outside useEffect – same result
  // useEffect(() => {
  //   Outline.startVpn(vpnData);
  // }, []);

return (
    <View style={styles.container}>
      <TouchableOpacity onPress={startConnnection} style={{ marginTop: 20 }}>
        <Text>Tap for Starting</Text>
      </TouchableOpacity>
      <Text>Connection Status : !!!</Text>
      <TouchableOpacity onPress={stopConnnection} style={{ marginTop: 20 }}>
        <Text>Tap for Stopping</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

What I’ve tried

Calling Outline.startVpn(vpnData) both inside and outside a useEffect.

Verifying that the native module is linked.

Checking logs on both emulator and physical device.

Observed behavior

The promise from startVpn() always resolves to true.

No actual VPN tunnel appears in device settings.

No error is thrown or logged.

Environment:

React Native: 0.75.3

react-native-outline-vpn: 1.0.7

Android API 36

Additional context

I can confirm the server is reachable (tested via Outline desktop client).

App has all required permissions and entitlements.

Could someone please advise what I’m missing or how to debug further? Any pointers would be greatly appreciated!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions