Android provides inherent platform support for BLE and provides APIs that applications can use to explore gadgets and the devolution of information. react-native-ble-plx doesn\u2019t support phones through BLE, creating bonds with external devices. GATT shows you how BLE-devices is doing data transmission. For transfer data devices we should have a faithful connection.<\/p>\n\n\n\n Bluetooth is a low-range wireless protocol to connect devices. Currently, Bluetooth has two versions: Bluetooth Classic & Bluetooth Low Energy.<\/p>\n\n\n\n it is generally referred to as Bluetooth. It supports continued connections and delivers large amounts of data. Bluetooth is connected with phone calls, audio and data.<\/p>\n\n\n\n it is known as BLE. Bluetooth version that is conditioned to low-power sensors and equipment. devices do not require stable connection but devices based on long battery life. BLE is a specialist in fitness, healthcare<\/a><\/strong>, securities, and home entertainment companies.<\/p>\n\n\n\n BLE devices are assumed as peripheral devices, mobile phones<\/a><\/strong>, tablets, and other gadgets as central devices. Each external device is connected with a central device, the central device is connected to an external:<\/p>\n\n\n\n IOS Changes: Add NSBluetoothAlwaysUsageDescription in info.plist file<\/strong>.<\/p>\n\n\n\n Android Changes: build.gradle file<\/strong>.<\/p>\n\n\n\n Create BLE example which is a penetration to all Available APIs.<\/p>\n\n\n\n Devices need to be checked first to be able to connect to them. There is a function which allows one recall to be registered to handle detected gadgets:<\/p>\n\n\n\n BLE needs to link and explore services and features and it contains. Services may be explored based on their meaning.<\/p>\n\n\n\n When we need to share information with a nearby device, connecting with the device directly is faster than setting with other connections that require a server and hardware. BLE is efficient at ranges because it is cheaper and faster than others. There is nothing to send, you don\u2019t have to send any data for longer battery life devices that show notification about data when exactly data gets modified and another benefit is easily pairing with other users.<\/p>\n\n\n\n React native developers<\/a> may be doing BLE communication modules via service and Bluetooth Low Energy<\/a><\/strong> commands. this library is very useful, using this library control a device over Web Bluetooth, maintained, asynchronous but requires comparatively slow performance because of multiple libraries.<\/p>\n\n\n\n![\"react](\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/01\/react-native-app-development-mistakes-cta.png\")
<\/a><\/figure>\n\n\n\nWhat is BLE (Bluetooth Low Energy)?<\/h2>\n\n\n\n
1. Bluetooth Classic<\/h3>\n\n\n\n
2. Bluetooth Low Energy<\/h3>\n\n\n\n
![\"bluetooth](\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/02\/bluetooth-has-two-versions.png\")
<\/figure>\n\n\n\n![\"BLE](\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/02\/BLE-Connected-Topology.png\")
<\/figure>\n\n\n\nTop Features of BLE (Bluetooth Low Energy) PLX<\/h2>\n\n\n\n
\n
Steps to implement BLE technology in Applications<\/h2>\n\n\n\n
![\"Steps](\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/02\/BLE-App-Development.png\")
<\/figure>\n\n\n\nProcess to Integrate BLE PLX in React Native<\/h2>\n\n\n\n
Step 1: Install BLE Package<\/h3>\n\n\n\n
npm install --save react-native-ble-plx<\/code><\/pre>\n\n\n\nStep 2: Creating BLE Manager<\/h3>\n\n\n\n
import {BleManager} from 'react-native-ble-plx'\n\nconst _BleManager = new BleManager();<\/code><\/pre>\n\n\n\nStep 3: Scanning devices<\/h3>\n\n\n\n
const startScan = () => {\n _BleManager.startDeviceScan(Null, {\n allowDuplicates: false,\n },\n async (error, device) => {\n setDisplaText('Scanning...');\n if (error) {\n _BleManager.stopDeviceScan();\n }\n console.log(device.localName, device.name);\n if (device.localName == 'Test' || device.name == 'Test') {\n setDevices([...devices, device]);\n _BleManager.stopDeviceScan();} }, );};\n<\/code><\/pre>\n\n\n\nStep 4: Connecting services<\/h3>\n\n\n\n
const connectDevice = device => {\n \t _BleManager.stopDeviceScan();\n \t _BleManager.connectToDevice(device.id).then(async device => {\n \t await device.discoverAllServicesAndCharacteristics();\n \t _BleManager.stopDeviceScan();\n \t setDisplaText(`Device connected\\n with ${device.name}`);\n \t setConnectedDevice(device);\n setDevices([]);\n \tdevice.services().then(async service => {\n \t\t\t for (const ser of service) {\n \t\t\t ser.characteristics().then(characteristic => {\n \t\tgetCharacteristics([...characteristics, characteristic]);\n \t\t\t });\n }\n });\n });\n };\n<\/code><\/pre>\n\n\n\nStep 5: Disconnection Device<\/h3>\n\n\n\n
const disconnectDevice = () => {\n connectedDevice.cancelConnection();\n };\n<\/code><\/pre>\n\n\n\nStep 6: Main View in Index.js file<\/h3>\n\n\n\n
<View style={styles.mainContainer}>\n {devices.length == 0 ? (\n <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>\n <TouchableOpacity\n activeOpacity={0.6}\n onPress={startScan}\n style={styles.circleView}>\n <Text style={styles.boldTextStyle}>{displayText}<\/Text>\n <\/TouchableOpacity>\n <\/View>\n ) : Object.keys(connectedDevice).length != 0 ? (\n <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>\n <Text style={{marginBottom: 12, textAlign: 'center'}}>\n Tap button to disconnect device.\n <\/Text>\n <TouchableOpacity\n activeOpacity={0.6}\n onPress={disconnectDevice}\n style={styles.circleView}>\n <Text style={styles.boldTextStyle}>{displayText}<\/Text>\n <\/TouchableOpacity>\n <\/View>\n ) : (\n <FlatList\n style={{flex: 1}}\n data={devices}\n keyExtractor={item => item.id.toString()}\n renderItem={items => (\n <TouchableOpacity\n activeOpacity={0.6}\n onPress={() => connectDevice(items.item)}\n style={{\n width: '100%',\n paddingVertical: 10,\n paddingHorizontal: 12,\n borderWidth: 1,\n borderRadius: 10,\n }}>\n <Text style={{color: 'black', fontSize: 18}}>\n {items.item.name}\n <\/Text>\n <\/TouchableOpacity>\n )}\n \/>\n )}\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n mainContainer: {\n flex: 1,\n padding: 10,\n \/\/ justifyContent: 'center',\n \/\/ alignItems: 'center',\n },\n circleView: {\n width: 250,\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'center',\n height: 250,\n borderRadius: 150,\n borderWidth: 1,\n },\n boldTextStyle: {\n fontSize: 20,\n color: '#000',\n fontWeight: 'bold',\n textAlign: 'center',\n },\n});\n<\/code><\/pre>\n\n\n\nBenefits of BLE Technology<\/h2>\n\n\n\n
![\"React](\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/01\/React-Native-Developer-CTA1.png\")
<\/a><\/figure>\n\n\n\nConclusion<\/h2>\n\n\n\n
FAQs<\/h2>\n\n\n\n