Headless JS React Native

JAVA API

Users need to enhance HeadlessJsTaskService and override the getTaskConfig described below.

package com.your_application_name;
import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.HeadlessJsTaskService;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.jstasks.HeadlessJsTaskConfig;
import javax.annotation.Nullable;
public class MyTaskService extends HeadlessJsTaskService {
  @Override
  protected @Nullable HeadlessJsTaskConfig getTaskConfig(Intent intent) {
    Bundle extras = intent.getExtras();
    if (extras != null) {
      return new HeadlessJsTaskConfig(
          "SomeTaskName",
          Arguments.fromBundle(extras),
          5000, // timeout for the task
          false // optional: defines whether or not  the task is allowed in foreground. Default is false
        );
    }
    return null;
  }
}

You can also try this code with Online Javascript Compiler

Run Code

Then, add the user’s service to the AndroidManifest.xml file.

Retries

By default, the headless JS task does not perform any retries. To do so, users need to create a HeadlessJsRetryPolicy and subject to a specific Error.

LinearCountingRetryPolicy is a way of implementing the HeadlessJsRetryPolicy that allows users to predict a maximum number of retries corresponding to a fixed delay between each attempt. If that does not suit users' needs, they can implement their HeadlessJsRetryPolicy. These policies can be passed as an extra argument to the HeadlessJsTaskConfig constructor with the code described below.

HeadlessJsRetryPolicy retryPolicy = new LinearCountingRetryPolicy(
 3, // Max number of retry attempts
 1000 // Delay between each retry attempt
);
return new HeadlessJsTaskConfig(
 'SomeTaskName',
 Arguments.fromBundle(extras),
 5000,
 false,
 retryPolicy
);

You can also try this code with Online Javascript Compiler

Run Code

Caveats

• The function passed to setTimeout does not always behave as expected. Instead, the process is called only when the application is relaunched. If you only need to wait, use the retry functionality.
• By default, your app will crash if you try to run a task while the app is in the foreground. This prevents developers from shooting themselves in the foot by doing a lot of work on a job and slowing the UI. You can pass a fourth boolean argument to control this behaviour.
• If you start your service from a BroadcastReceiver, call HeadlessJsTaskService.acquireWakeLockNow() before returning from onReceive().

Also see,  React Native Reanimated

Frequently asked questions

Define Headless JS.

Headless JS is a technique to employ tasks in JavaScript while the user's app is in the background.

Write down the purpose of JS API.

A task is an async function that users register on AppRegistry, similar to writing React applications.

Define JAVA API.

Users need to enhance HeadlessJsTaskService and override the getTaskConfig.

Explain the purpose of LinearCountingRetryPolicy.

LinearCountingRetryPolicy is a way of implementing the HeadlessJsRetryPolicy that allows users to predict a maximum number of retries corresponding to a fixed delay between each attempt.

How to perform the retries in Headless JS?

Users need to create a HeadlessJsRetryPolicy and subject to a specific Error.

Key Takeaways

Congratulations on finishing the blog!! After reading this blog, you will grasp the concept of the Headless JS - React Native.

If you are preparing yourself for the top tech companies, don't worry. Coding Ninjas has your back. Visit this link for a well-defined and structured material that will help you provide access to knowledge in every domain.

Happy Learning!!