Connect to bluetooth printer in Mobile app by React Native

To connect to a Bluetooth printer using React Native, you can use the react-native-bluetooth-serial library, which is one of the commonly used libraries for interacting with Bluetooth devices, including printers. Below is a step-by-step guide to setting up your React Native app for connecting to a Bluetooth printer.

Steps to Connect Bluetooth Printer in React Native:

Install Dependencies: First, you’ll need to install the necessary libraries.

npm install --save react-native-bluetooth-serial

If you’re using React Native 0.59 or earlier, you’ll need to link the package:

react-native link react-native-bluetooth-serial

Below is the React Native code to connect to a Bluetooth printer.

import React, { useState, useEffect } from 'react';
import { View, Button, Text, PermissionsAndroid, Platform } from 'react-native';
import BluetoothSerial from 'react-native-bluetooth-serial';

const BluetoothPrinter = () => {
  const [isConnected, setIsConnected] = useState(false);
  const [devices, setDevices] = useState([]);
  const [selectedDevice, setSelectedDevice] = useState(null);

  useEffect(() => {
    // Request Bluetooth permission (Android only)
    if (Platform.OS === 'android') {
      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.BLUETOOTH)
        .then(() => {
          // Start Bluetooth scanning on permission granted
          BluetoothSerial.list()
            .then(devices => setDevices(devices))
            .catch(err => console.error(err));
        })
        .catch(err => console.error('Permission denied', err));
    } else {
      BluetoothSerial.list()
        .then(devices => setDevices(devices))
        .catch(err => console.error(err));
    }

    // Cleanup when component unmounts
    return () => {
      BluetoothSerial.stopScanning();
    };
  }, []);

  const connectToDevice = (device) => {
    BluetoothSerial.connect(device.id)
      .then(() => {
        setSelectedDevice(device);
        setIsConnected(true);
      })
      .catch(err => console.error('Connection failed', err));
  };

  const disconnect = () => {
    BluetoothSerial.disconnect()
      .then(() => {
        setIsConnected(false);
        setSelectedDevice(null);
      })
      .catch(err => console.error('Disconnection failed', err));
  };

  const printReceipt = () => {
    if (isConnected && selectedDevice) {
      // Here, you can send data to the printer
      const data = 'Hello Printer!';
      BluetoothSerial.write(data)
        .then(() => console.log('Data sent to printer'))
        .catch(err => console.error('Failed to print', err));
    } else {
      console.log('No device connected');
    }
  };

  return (
    
      Bluetooth Printer Connection

      
        Select Device
        {devices.length > 0 ? (
          devices.map((device) => (
             connectToDevice(device)}
            />
          ))
        ) : (
          No devices found
        )}
      

      
        {isConnected ? (
          
            Connected to {selectedDevice?.name}
            
            
          
        ) : (
          Not connected to any device
        )}
      
    
  );
};

Master Detail view in Asp.Net MVC

The master & detail view is particularly useful in displaying a list of records. In Asp.Net 2.0, it can be achieved by using the control of gridview and detail view. However, the page reload/post back is unavoidable when the gridview item is clicked until Microsoft Asp.Net team releases the Asp.Net AJAX in 2008, Now we are going to take a look how to implement the Master Detail view in Asp.Net MVC.

image
Continue reading “Master Detail view in Asp.Net MVC”

Create A Dashboard Experience In Asp.Net MVC

In most of the time while creating a web application, a secured section for administrating the application is always needed. Something like a control panel or back end of the website(One of my client even call it a database!). No matter how you call it. You do not want to display a bunch of links when you first entered. Instead, you want to show useful data, important notifications or graphical reports using pie or bar chart before they decide where to go in the application. Therefore, a dashboard is needed for that purpose.

dashboard_aspnetmvc

Continue reading “Create A Dashboard Experience In Asp.Net MVC”

How to check if enter key pressed in javascript

In a user specific designed application or website, we want application start taking action without user click extra button. Especially in the scenario of search function. You want user be able to start searching when enter key is pressed on the textbox.

function checkEnter(e){
var keyCode = (e.keyCode ? e.keyCode : e.which);
if(keyCode == 13){
//perform action
alert(‘enter key pressed’)
}
}

[html]
<input type="text" onkeypress="checkEnter(event);" />
[/html]
[javascript]
<script>
function checkEnter(e){
var keyCode = (e.keyCode ? e.keyCode : e.which);
if(keyCode == 13){
//perform action
alert(‘enter key pressed’)
}
}
</script>
[/javascript]]

Click here to see the jquery version