Unable to connect to Bluetooth Device via React Native

104 views Asked by At

So I'm working on a Project Where the app will send commands to microcontrollers to do specific tasks via Bluetooth but I tried so many Bluetooth modules which lead to a dead end. where the device is not able to detect those Bluetooth devices and also not able to connect to the Bluetooth devices. Below Providing my Code

  const [isModalVisible, setModalVisible] = useState(false);
  const [devices, setDevices] = useState([]);
  const [selectedDevice, setSelectedDevice] = useState(null);
  const [bleManager, setBleManager] = useState(null);
  const [serviceUUID, setServiceUUID] = useState('');
  const [characteristicUUID, setCharacteristicUUID] = useState('');

  useEffect(() => {
    const manager = new BleManager();
    setBleManager(manager);
    return () => {
      manager.destroy();
    };
  }, []);

  useEffect(() => {
    if (bleManager) {
      bleManager.startDeviceScan(null, null, (error, device) => {
        if (error) {
          console.error(error);
          return;
        }
        setDevices(prevDevices => {
          if (!prevDevices.find(dev => dev.id === device.id)) {
            return [...prevDevices, device];
          }
          return prevDevices;
        });
      });

      return () => {
        bleManager.stopDeviceScan();
      };
    }
  }, [bleManager]);

  const handleConnect = async device => {
    try {
      await device.connect();
      setSelectedDevice(device);

      const serviceUUID = '00001101-0000-1000-8000-00805F9B34FB';
      const characteristicUUID = '00001101-0000-1000-8000-00805F9B34FB';

      setServiceUUID(serviceUUID);
      setCharacteristicUUID(characteristicUUID);

      setModalVisible(true);
    } catch (error) {
      console.error(error);
    }
  };

  const handleSendCommand = async command => {
    if (selectedDevice) {
      try {
        await selectedDevice.writeCharacteristicWithResponseForService(
          serviceUUID,
          characteristicUUID,
          command,
        );
      } catch (error) {
        console.error(error);
      }
    }
  };

  const closeModal = () => {
    setModalVisible(false);
  };


return(
<View>
      <Modal visible={isModalVisible} transparent={true} animationType="slide">
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text style={styles.bluetoothlist}>
              Available Bluetooth Devices
            </Text>
            <FlatList
              data={devices}
              keyExtractor={item => item.id}
              renderItem={({item}) => (
                <TouchableOpacity
                  onPress={() => handleConnect(item)}
                  style={styles.deviceItem}>
                  <Text
                    style={
                      styles.bluetoothlist
                    }>{`${item.name} (${item.id})`}</Text>
                </TouchableOpacity>
              )}
            />
            <Button title="Close" onPress={closeModal} />
          </View>
        </View>
      </Modal>
    </View>
);

So I have Tried the above code and also many other methods but not able to solve any suggestions or any solutions

0

There are 0 answers