react-native-senraise-printer

Getting started

$ npm install react-native-senraise-printer --save

Mostly automatic installation

$ react-native link react-native-senraise-printer

Manual installation

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.senraise.printer.PrinterPackage; to the imports at the top of the file
• Add new PrinterPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-senraise-printer'
   project(':react-native-senraise-printer').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-senraise-printer/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-senraise-printer')

Usage

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';

import RNSenraisePrinter from 'react-native-senraise-printer';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  // Basic text printing
  const printBasicText = () => {
    RNSenraisePrinter.printText('Hello World!\n');
  };

  // Print with formatting
  const printFormattedText = () => {
    RNSenraisePrinter.setAlignment(1); // Center alignment
    RNSenraisePrinter.setTextSize(28.0);
    RNSenraisePrinter.setTextBold(true);
    RNSenraisePrinter.printText('Receipt Title\n');
    // Reset formatting
    RNSenraisePrinter.setTextSize(24.0);
    RNSenraisePrinter.setTextBold(false);
    RNSenraisePrinter.setAlignment(0);
  };

  // Print table
  const printTable = () => {
    RNSenraisePrinter.printTableText(
      ['Item', 'Qty', 'Price'], // Column texts
      [1, 1, 1], // Column weights
      [0, 1, 2] // Column alignments (0: left, 1: center, 2: right)
    );
    RNSenraisePrinter.printTableText(
      ['Product A', '2', '$10.00'],
      [1, 1, 1],
      [0, 1, 2]
    );
    RNSenraisePrinter.nextLine(1);
  };

  // Print QR Code
  const printQRCode = () => {
    RNSenraisePrinter.printQRCode('https://example.com', 8, 2);
    RNSenraisePrinter.printText('\n');
  };

  // Print Barcode
  const printBarcode = () => {
    RNSenraisePrinter.printBarCode('MIT-1234567890', 7, 80, 2);
    RNSenraisePrinter.printText('\n');
  };

  // Print sample receipt
  const printReceipt = () => {
    // Header
    RNSenraisePrinter.setAlignment(1);
    RNSenraisePrinter.setTextBold(true);
    RNSenraisePrinter.printText('STORE NAME\n');
    RNSenraisePrinter.setTextBold(false);
    RNSenraisePrinter.printText('123 Main Street, City\n');
    RNSenraisePrinter.printText('Tel: 123-456-7890\n');
    RNSenraisePrinter.nextLine(1);
    
    // Date and receipt number
    RNSenraisePrinter.setAlignment(0);
    RNSenraisePrinter.printText(`Date: ${new Date().toLocaleString()}\n`);
    RNSenraisePrinter.printText('Receipt #: 1001\n');
    RNSenraisePrinter.nextLine(1);
    
    // Items
    RNSenraisePrinter.printTableText(['Item', 'Qty', 'Price'], [2, 1, 1], [0, 1, 2]);
    RNSenraisePrinter.printTableText(['Product A', '2', '$10.00'], [2, 1, 1], [0, 1, 2]);
    RNSenraisePrinter.printTableText(['Product B', '1', '$15.00'], [2, 1, 1], [0, 1, 2]);
    RNSenraisePrinter.nextLine(1);
    
    // Total
    RNSenraisePrinter.setAlignment(2);
    RNSenraisePrinter.setTextBold(true);
    RNSenraisePrinter.printText('Total: $35.00\n');
    RNSenraisePrinter.setTextBold(false);
    RNSenraisePrinter.nextLine(1);
    
    // Footer
    RNSenraisePrinter.setAlignment(1);
    RNSenraisePrinter.printText('Thank you for your purchase!\n');
    RNSenraisePrinter.printQRCode('https://example.com', 8, 2);
    RNSenraisePrinter.nextLine(2);
  };

  return (
    <View style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView contentContainerStyle={styles.container}>
        <Text style={styles.title}>Printer Demo</Text>
        
        <View style={styles.buttonContainer}>
          <Button title="Print Basic Text" onPress={printBasicText} />
        </View>
        
        <View style={styles.buttonContainer}>
          <Button title="Print Formatted Text" onPress={printFormattedText} />
        </View>
        
        <View style={styles.buttonContainer}>
          <Button title="Print Table" onPress={printTable} />
        </View>
        
        <View style={styles.buttonContainer}>
          <Button title="Print QR Code" onPress={printQRCode} />
        </View>
        
        <View style={styles.buttonContainer}>
          <Button title="Print Barcode" onPress={printBarcode} />
        </View>
        
        <View style={styles.buttonContainer}>
          <Button title="Print Sample Receipt" onPress={printReceipt} />
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    padding: 16,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 24,
    marginTop: 16,
  },
  buttonContainer: {
    width: '80%',
    marginVertical: 8,
  },
});

export default App;