React Native module to detect VPN connection
To install the module, you can use npm:
## You must install @react-native-community/netinfo first
npx expo install @react-native-community/netinfo
npm install react-native-vpn-detector
The VPN detector does not work on simulators. Please test on a real device.
The useIsVpnActive
hook provides a way to use the VPN connection status within a React component.
import React from "react";
import { View, Text } from "react-native";
import { useIsVpnActive } from "react-native-vpn-detector";
const App = () => {
const isVpnActive = useIsVpnActive();
return (
<View>
<Text>VPN is {isVpnActive ? "active" : "inactive"}</Text>
</View>
);
};
The isVpnActive
function checks if a VPN connection is active.
import React from "react";
import { View, Text } from "react-native";
import { isVpnActive } from "react-native-vpn-detector";
const value = isVpnActive();
const App = () => {
return (
<View>
<Text>VPN is {value ? "active" : "inactive"}</Text>
</View>
);
};
The addEventListener
function listens for changes in the VPN connection status.
import React, { useEffect } from "react";
import { View, Text } from "react-native";
import { addEventListener } from "react-native-vpn-detector";
const App = () => {
useEffect(() => {
const listener = (isVpnActive) => {
console.log(`VPN is now ${isVpnActive ? "active" : "inactive"}`);
};
const unsubscribe = addEventListener(listener);
return () => {
unsubscribe();
};
}, []);
return (
<View>
<Text>Listening for VPN status changes...</Text>
</View>
);
};
Contributions are welcome! Please open an issue or submit a pull request for any bugs or enhancements.
This project is licensed under the MIT License. See the LICENSE file for more information.