React Native BLE 통신

react-native-ble-manager

설치

yarn add react-native-ble-manager react-native-permissions

Android

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.YOUR_PACKAGE_NAME">
	<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="33" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="33" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" android:maxSdkVersion="33" />
    <uses-permission-sdk-23 android:name="android.permission.ACCESS_FINE_LOCATION" tools:targetApi="Q"/>
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT"
                     android:usesPermissionFlags="neverForLocation"
                     tools:targetApi="s" />
    <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />
		...
		...
</manifest>

iOS

먼저 XCode 실행 후 Background Modes에서 Acts as a Bluetooth LE accessory 체크
ios/<project>/Info.plist

<key>NSBluetoothAlwaysUsageDescription</key>
<string>블루투스 장치를 검색을 위해 권한이 필요합니다.</string>
<key>NSBluetoothPeripheralUsageDescription</key>
<string>블루투스 장치를 검색을 위해 권한이 필요합니다.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>블루투스 장치를 검색을 위해 권한이 필요합니다.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>블루투스 장치를 검색을 위해 권한이 필요합니다.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>블루투스 장치를 검색을 위해 권한이 필요합니다.</string>

ios/Podfile

target <project> do
	config = use_native_modules!
	permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-BluetoothPeripheral', :path => "#{permissions_path}/BluetoothPeripheral"
  pod 'Permission-LocationAccuracy', :path => "#{permissions_path}/LocationAccuracy"
  pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways"
  pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"

	...
end

사용법

import { useEffect } from 'react';
import { NativeModules, NativeEventEmitter } from 'react-native';
import BleManager from 'react-native-ble-manager';
const BleManagerModule = NativeModules.BleManager;
const bleManagerEmitter = new NativeEventEmitter(BleManagerModule);

export default function App () {

	const scan = (): void => {
	  BleManager.scan([], 5, false).then(() => {
        BleManager.getDiscoveredPeripherals().then(() => {
          ...
        }).catch(() => {
          ...
        });
      });
	}

	useEffect(() => {
		// Android에서 먼저 실행 (필수)
		BleManager.enableBluetooth();

		BleManager.start({ showAlert: false }).then(() => {
			// 응답
			bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', bleResponseCallback);
			// 스캔중
			bleManagerEmitter.addListener('BleManagerDiscoverPeripheral', bleScanningCallback);
			// 스캔 정지
	        bleManagerEmitter.addListener('BleManagerStopScan', bleStopScanCallback);

			return () => {
				bleManagerEmitter.removeAllListeners('BleManagerDidUpdateValueForCharacteristic');
				bleManagerEmitter.removeAllListeners('BleManagerDiscoverPeripheral');
	            bleManagerEmitter.removeAllListeners('BleManagerStopScan');
			}
		});
	}, []);
}