currently i am working on intregation with rfid reader and rfid tag with our devices in react native
my projects description is
1.connect rfid reader with our device
-
when a rfid tag come range of rfid reader then reader read the rfid tag data and show on our devices
-
also in our ui have three button like start stop reset when we clicked on start button it check firstly any rfid tag is range of rfid reader then it scan show data
import React, {useState, useEffect} from 'react';
import {
Text,
View,
ScrollView,
TouchableOpacity,
Modal,
FlatList,
SafeAreaView,
PermissionsAndroid,
NativeModules,
NativeEventEmitter,
useColorScheme,
StyleSheet,
Platform,
Alert,
} from 'react-native';
import BleManager from 'react-native-ble-manager';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {Buffer} from 'buffer';
import encodeUtf8 from 'encode-utf8';
const BleManagerModule = NativeModules.BleManager;
const BleManagerEmitter = new NativeEventEmitter(BleManagerModule);
const BleConnectDevice = () => {
const [isScanning, setIsScanning] = useState(false);
const [devices, setDevices] = useState([]);
const [connectedDevices, setConnectedDevices] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const [readData, setReadData] = useState('');
const isDarkMode = useColorScheme() === 'dark';
const characteristic = 'ffe1';
const service = 'ffe0';
useEffect(() => {
BleManager.enableBluetooth()
.then(() => {
console.log('Bluetooth is turned on!');
})
.catch(error => {
console.error('Bluetooth enable error:', error);
});
if (Platform.OS === 'android') {
requestPermissions();
}
}, []);
const requestPermissions = async () => {
try {
const granted = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
PermissionsAndroid.PERMISSIONS.BLUETOOTH_SCAN,
PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,
PermissionsAndroid.PERMISSIONS.BLUETOOTH_ADVERTISE,
]);
if (
granted['android.permission.ACCESS_FINE_LOCATION'] ===
PermissionsAndroid.RESULTS.GRANTED &&
granted['android.permission.BLUETOOTH_SCAN'] ===
PermissionsAndroid.RESULTS.GRANTED &&
granted['android.permission.BLUETOOTH_CONNECT'] ===
PermissionsAndroid.RESULTS.GRANTED &&
granted['android.permission.BLUETOOTH_ADVERTISE'] ===
PermissionsAndroid.RESULTS.GRANTED
) {
console.log('All permissions granted');
} else {
console.log('Permissions denied');
}
} catch (err) {
console.warn('Permission request error:', err);
}
};
useEffect(() => {
BleManager.start({showAlert: false}).then(() => {
console.log('BleManager initialized');
});
const handleDiscoverPeripheral = peripheral => {
if (!peripheral.name) {
peripheral.name = 'NO NAME';
}
setDevices(prevDevices => {
const deviceExists = prevDevices.find(
device => device.id === peripheral.id,
);
if (deviceExists) {
return prevDevices;
} else {
return [...prevDevices, peripheral];
}
});
};
BleManagerEmitter.addListener(
'BleManagerDiscoverPeripheral',
handleDiscoverPeripheral,
);
return () => {
BleManagerEmitter.removeListener(
'BleManagerDiscoverPeripheral',
handleDiscoverPeripheral,
);
};
}, []);
useEffect(() => {
const stopListener = BleManagerEmitter.addListener(
'BleManagerStopScan',
() => {
setIsScanning(false);
console.log('Scan is stopped');
},
);
return () => {
stopListener.remove();
};
}, []);
const startScan = () => {
if (!isScanning) {
BleManager.scan([], 5, true)
.then(() => {
console.log('Scanning...');
setIsScanning(true);
setModalVisible(true);
})
.catch(error => {
console.error('Scan error:', error);
});
}
};
const stopScan = () => {
if (isScanning) {
BleManager.stopScan()
.then(() => {
console.log('Stopped scanning');
setIsScanning(false);
})
.catch(error => {
console.error('Stop scan error:', error);
});
}
};
const resetScan = () => {
setDevices([]);
setConnectedDevices([]);
setReadData('');
console.log('Reset complete');
};
const connectToDevice = device => {
BleManager.connect(device.id)
.then(() => {
return BleManager.retrieveServices(device.id);
})
.then(peripheralInfo => {
console.log('Services and characteristics:', peripheralInfo);
setModalVisible(false);
setConnectedDevices(prevDevices => [...prevDevices, device]);
})
.then(() => {
return BleManager.startNotification(device.id, service, characteristic);
})
.then(() => {
BleManagerEmitter.addListener(
'BleManagerDidUpdateValueForCharacteristic',
handleUpdateValueForCharacteristic,
);
})
.catch(error => {
console.log('Error connecting to device:', error);
});
};
const handleUpdateValueForCharacteristic = data => {
console.log('Received data from characteristic', data);
const buffer = Buffer.from(data.value);
const sensorData = buffer.toString('ascii');
console.log('Received data:', sensorData);
setReadData(sensorData);
Alert.alert('Received data: ' + sensorData);
};
const disconnectFromDevice = device => {
BleManager.disconnect(device.id)
.then(() => {
console.log('Disconnected from ' + device.name);
setConnectedDevices(prevDevices =>
prevDevices.filter(d => d.id !== device.id),
);
})
.catch(error => {
console.log('Disconnection error', error);
});
};
const readDataFromDevice = (deviceId, serviceUUID, characteristicUUID) => {
BleManager.startNotification(deviceId, serviceUUID, characteristicUUID);
BleManager.read(deviceId, serviceUUID, characteristicUUID)
.then(() => {
console.log('Started notifications.');
})
.then(readData => {
console.log(readData, 'readdddd');
// const buffer = Buffer.from(readData);
// console.log(buffer, 'bufferrr');
// const sensorData = buffer.toString('ascii');
// console.log(sensorData, 'sensorrr');
// setReadData(sensorData);
})
.catch(error => {
console.error('Notification error:', error);
});
BleManager.addListener(
'BleManagerDidUpdateValueForCharacteristic',
handleUpdateValueForCharacteristic,
// data => {
// console.log('Received2333 data:', decodeData(data.value));
// // Update UI with received data
// },
);
};
const decodeData = encodedData => {
// Convert received data to its original format
return encodedData;
};
const sendCom = async peripheral => {
const data = encodeUtf8('1'); // convert data to bytes
BleManager.retrieveServices(peripheral)
.then(() => {
BleManager.startNotification(peripheral, service, characteristic);
})
.then(() => {
BleManager.writeWithoutResponse(
peripheral.id,
service,
characteristic,
data,
);
console.log(`Sent: ${data}`);
})
.catch(error => {
console.log(`Error writing ${characteristic}: ${error}`);
});
};
return (
<SafeAreaView style={styles.container}>
<ScrollView contentContainerStyle={{flex: 1}}>
<Text style={styles.title}>React Native BLE Manager</Text>
<View style={styles.deviceList}>
{connectedDevices.length > 0 ? (
connectedDevices.map(device => (
<View key={device.id} style={styles.connectedDevice}>
<View>
<Text style={styles.deviceName}>{device.name}</Text>
<Text style={styles.deviceId}>{device.id}</Text>
</View>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => disconnectFromDevice(device)}
style={styles.disconnectButton}>
<Text style={styles.buttonText}>Disconnect</Text>
</TouchableOpacity>
</View>
))
) : (
<TouchableOpacity
activeOpacity={0.5}
onPress={startScan}
style={styles.scanButton}>
<Text style={styles.buttonText}>Scan</Text>
</TouchableOpacity>
)}
</View>
{connectedDevices.length > 0 && (
<View style={styles.buttonWrap}>
<TouchableOpacity
activeOpacity={0.5}
onPress={readDataFromDevice(
connectedDevices[0]?.id,
'0000ffe0-0000-1000-8000-00805f9b34fb',
'0000ffe1-0000-1000-8000-00805f9b34fb',
)}
style={[styles.resetButton, {backgroundColor: '#0a84ff'}]}>
<Text style={styles.buttonText}>Start</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.5}
onPress={stopScan}
style={styles.stopButton}>
<Text style={styles.buttonText}>Stop</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.5}
onPress={resetScan}
style={styles.resetButton}>
<Text style={styles.buttonText}>Reset</Text>
</TouchableOpacity>
</View>
)}
<Modal visible={modalVisible} animationType="slide">
<SafeAreaView style={styles.modalContainer}>
<FlatList
data={devices}
renderItem={({item}) => (
<TouchableOpacity
style={styles.deviceContainer}
onPress={() => connectToDevice(item)}>
<Text style={styles.deviceName}>{item.name}</Text>
<Text style={styles.deviceId}>{item.id}</Text>
</TouchableOpacity>
)}
keyExtractor={item => item.id}
/>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => setModalVisible(false)}
style={styles.scanButton}>
<Text style={styles.buttonText}>Close</Text>
</TouchableOpacity>
</SafeAreaView>
</Modal>
<View style={styles.dataContainer}>
<Text style={styles.dataText}>Received Data:</Text>
<Text style={styles.dataText}>{readData}</Text>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: Colors.lighter,
},
title: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
textAlign: 'center',
marginBottom: 24,
},
deviceList: {
marginBottom: 24,
},
connectedDevice: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 16,
backgroundColor: '#f0f0f0',
borderRadius: 8,
marginBottom: 16,
},
deviceContainer: {
padding: 16,
backgroundColor: '#f0f0f0',
borderRadius: 8,
marginBottom: 16,
},
deviceName: {
fontSize: 18,
fontWeight: '600',
color: Colors.black,
},
deviceId: {
fontSize: 12,
color: Colors.dark,
},
scanButton: {
padding: 16,
backgroundColor: '#007aff',
borderRadius: 8,
alignItems: 'center',
},
stopButton: {
padding: 16,
backgroundColor: '#ff3b30',
borderRadius: 8,
alignItems: 'center',
},
resetButton: {
padding: 16,
backgroundColor: '#ffcc00',
borderRadius: 8,
alignItems: 'center',
},
buttonText: {
color: '#fff',
fontWeight: '600',
},
buttonWrap: {
flexDirection: 'row',
justifyContent: 'space-around',
marginBottom: 24,
},
disconnectButton: {
padding: 8,
backgroundColor: '#ff3b30',
borderRadius: 8,
},
modalContainer: {
flex: 1,
padding: 24,
backgroundColor: Colors.lighter,
},
dataContainer: {
marginTop: 16,
padding: 16,
backgroundColor: '#f0f0f0',
borderRadius: 8,
},
dataText: {
fontSize: 16,
color: Colors.black,
},
});
export default BleConnectDevice;
when i click on start button it intregate with rfid reader and if tag is present then give data