React Native Queue integration with react-native-workers

react-native-queue-integration-with-react-native-workers.js

// https://github.com/billmalarky/react-native-queue
// https://github.com/devfd/react-native-workers

// ######################
// From your application:
// ######################
import queueFactory from 'react-native-queue';
import { Worker } from 'react-native-workers';

// Initialize queue and throw a few jobs on it
const queue = await queueFactory();

// TECHNICALLY, we don't have to register worker handler functions on the queue
// in order to start creating jobs. This is because in this example we only run the
// queue in the worker.js thread. Still, typically you should always register the
// react native queue worker handlers associated with each job name before
// using queue.createJob() just as good practice (unless you want to fail fast
// if queue accidentally starts processing in UI thread, which would happen if you forget
// to pass FALSE to createJob()).
queue.createJob('arbitrary-job-name', {data: 'this is some data'}, {}, false); // IMPORTANT! Pass false or queue will start up immediately in your UI thread.
queue.createJob('arbitrary-job-name', {data: 'this is different data'}, {}, false);
queue.createJob('a-different-job', {name: 'Kylo Ren'}, {}, false);
queue.createJob('a-different-job', {name: 'Rey'}, {}, false);

/* start worker */
const worker = new Worker("path/to/worker.js");

/* post message to worker. String only ! */
worker.postMessage("start up the queue yo!");

/* get message from worker. String only ! */
worker.onmessage = (message) => {
  console.log(message); // should print "queue finished my dude!"
  worker.terminate();
}


// ######################
// From your worker.js file:
// ######################

import { self } from 'react-native-workers';

/* get message from application. String only ! */
self.onmessage = (message) => {
  
  console.log(message); // Pointless for this example, but should print "start up the queue yo!"
  
  // Init queue
  queue = queueFactory()
    .then(() => {
    
      // Register react-native-query workers. Bit of naming overlap here which is unfortunately a bit confusing, but this is
      // not of course a "react native worker" but is rather the handler function that will be called when the queue begins
      // processing the "arbitrary-job-name" job.
      queue.addWorker('arbitrary-job-name', async (id, payload) => {

        // Do arbitrary stuff here, but not in your UI thread!
        await new Promise((resolve) => {
          console.log('starting some "work" that will take 3 seconds!');
          console.log(payload, 'payload');
          setTimeout(() => {
            console.log('yea, "work" completed.');
            resolve();
          }, 3000);
        })

      });
    
      queue.addWorker('a-different-job', async (id, payload) => {

        // Do "different" arbitrary stuff here, but not in your UI thread!
        console.log('work work work work work');
        console.log(payload, 'payload');

      });

      queue.start()
        .then(() => {
          self.postMessage('queue finished my dude!');
        });
      
    });

}