Printing is blocking main thread

[aargon007]

For first time opening the app i have connect to the printer and set a state. during that time if i do any operation some button action cause laggy. if i print and printing get failed after some time it cause button action laggy. it happens specialy when opening modal again.

is there any option to perform printing in worker thread?

[tr3v3r]

@aargon007 hi.

Need more details.

[aargon007]

@tr3v3r I have tryed finding packages that can be used for manipulating worker thread for printing functionalities. but not get a perfect solution yet.

[tr3v3r]

@aargon007 I need coding deails pleas. What you're doing from printer side, what is the modal you're using and etc.

If you wanna me to help you - it is better to provide demo on clean project, so I can debug it

[aargon007]

const usePrinter = () => {
    const { activePrinter, pushToken } = useAppSelector(state => state.printer);
    const dispatch = useAppDispatch();

    // Ensure `printerInstance` is memoized
    const printerInstance = useMemo(() => {
        if (!activePrinter?.target || !activePrinter?.deviceName) {
            console.warn('Printer is not properly configured');
            return null;
        }
        return new Printer({
            target: activePrinter.target,
            deviceName: activePrinter.deviceName
        });
    }, [activePrinter]);

    // print ticket -- handle error
    const printTicket = async (localUri: string) => {
        if (!printerInstance) {
            return;
        };

        try {
            await printerInstance.addQueueTask(async () => {
                await printerInstance.connect();
                await printerInstance.addFeedLine();
                await printerInstance.addImage({
                    source: { uri: localUri },
                    width: 575,
                    color: PrinterConstants.COLOR_4,
                    mode: PrinterConstants.MODE_GRAY16,
                    halftone: PrinterConstants.HALFTONE_THRESHOLD,
                    brightness: Platform.OS === 'ios' ? 0.3 : 0.1,
                });
                // Cut Paper
                await printerInstance.addCut();

                await printerInstance.sendData();
                await printerInstance.disconnect();
            });
        } catch (e: any) {
            await printerInstance.disconnect();
            const errorMessage = e?.message || 'An unknown error occurred while printing.';
            Alert.alert('Printer Error', errorMessage);
        }
    };

    // first time connect to printer
    const connectToDevice = async () => {
        if (!printerInstance) {
            dispatch(togglePrinterStatus(false));
            return;
        };

        try {
            await printerInstance.connect();
            const status = await printerInstance.getStatus();
            // console.log(status);
            const isConnected = status.connection.statusCode === PrinterConstants.TRUE;
            dispatch(togglePrinterStatus(isConnected));
            if (isConnected && pushToken) {
                printerConnected(pushToken);
            }
            await printerInstance.disconnect();
        } catch (e) {
            dispatch(togglePrinterStatus(false));
            await printerInstance.disconnect();
        }
    };

    // return helper functions
    return {
        printerInstance,
        printTicket,
        connectToDevice
    }
};

this hook i use it in RootNavigator to check status

const RootNavigator = () => {
const { activePrinter } = useAppSelector(state => state.printer);
const { connectToDevice } = usePrinter();
const dispatch = useAppDispatch();

const blePlxManagerRef = useRef<BlePlxManager | null>(null);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);

useEffect(() => {
    if (activePrinter?.target?.includes("BT")) {
        blePlxManagerRef.current = new BlePlxManager();

        const bluetoothStateSubscription = blePlxManagerRef.current.onStateChange((state) => {
            if (state === State.PoweredOff) {
                dispatch(togglePrinterStatus(false));
            } else if (state === State.PoweredOn) {
                timeoutRef.current = setTimeout(() => {
                    connectToDevice();
                }, 3000);
            }
        }, true);

        return () => {
            bluetoothStateSubscription.remove();
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
            }
        };
    } else if (activePrinter?.target?.includes("TCP")) {
        connectToDevice();
    }
}, [activePrinter]);

return
................

[tr3v3r]

@aargon007 Sorry that gives me nothing. If you want me to help please provide the clean React Native project with the code that reproduces your issue.

[aargon007]

@aargon007 Sorry that gives me nothing. If you want me to help please provide the clean React Native project with the code that reproduces your issue.

I have found the issue. The culprit was Animated from react-native. I replaced with it from Reanimated. this sdk working fine no issue . thanks!!