techStackGuru

React Native Broadcast Receiver


Wifi Example

Wi-Fi connectivity can be managed in React Native using the react-native-wifi-reborn library. Using this library, you can implement an on/off Wi-Fi broadcast receiver:

To get started, you will need to install the react-native-wifi-reborn library. You can then add the library to your project by following these steps

npm install react-native-wifi-reborn
react-native link react-native-wifi-reborn

To set up a Wi-Fi on/off broadcast receiver, follow the example code below

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import WifiManager from 'react-native-wifi-reborn';

const App = () => {
  useEffect(() => {
    const wifiOnBroadcastReceiver = WifiManager.addListener(
      'OnWifiConnect',
      ({ ssid, BSSID, capabilities, level }) => {
        console.log(`Wi-Fi connected to ${ssid}`);
        console.log(`BSSID: ${BSSID}`);
        console.log(`Capabilities: ${capabilities}`);
        console.log(`Signal Level: ${level}`);
      }
    );

    const wifiOffBroadcastReceiver = WifiManager.addListener(
      'OnWifiDisconnect',
      ({ ssid, BSSID, capabilities, level }) => {
        console.log(`Wi-Fi disconnected from ${ssid}`);
        console.log(`BSSID: ${BSSID}`);
        console.log(`Capabilities: ${capabilities}`);
        console.log(`Signal Level: ${level}`);
      }
    );

    return () => {
      wifiOnBroadcastReceiver.remove();
      wifiOffBroadcastReceiver.remove();
    };
  }, []);

  return (
    <View>
      <Text>React Native Wi-Fi On/Off Broadcast Receiver Example</Text>
    </View>
  );
};

export default App;

Battery Example

A React Native library called react-native-device-info allows you to access device information, including battery level. The following example illustrates how to use this library to implement a battery-low broadcast receiver:

First, install the react-native-device-info library:

npm install react-native-device-info

In order to set up a battery low broadcast receiver, follow the instructions below:

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const App = () => {
  useEffect(() => {
    const batteryLevelListener = DeviceInfo.addEventListener(
      'batteryLow',
      () => {
        console.log('Battery is low!');
        // Perform actions when the battery is low
      }
    );

    return () => {
      batteryLevelListener.remove();
    };
  }, []);

  return (
    <View>
      <Text>React Native Battery Low Broadcast Receiver Example</Text>
    </View>
  );
};

export default App;