DEV Community: Manjot Singh

🚀 Implementing Foreground Services in React Native for Android 🚀🚀

Manjot Singh — Mon, 24 Jun 2024 12:05:16 +0000

Implementing Foreground Services in React Native for Android 🎯

Foreground services are an essential feature in Android applications, particularly for tasks that need to run continuously and keep the user informed via notifications. This can include activities such as music playback, location tracking, or long-running network operations. In this article, we'll explore how to implement foreground services in a React Native application for Android, and we'll throw in some fun GIFs and comments to keep things light and engaging!

What is a Foreground Service?

A foreground service is a service that performs some operation that is noticeable to the user. Foreground services must display a status bar notification, which helps ensure that the user is aware of what your app is doing. This makes them ideal for tasks that the user needs to be aware of, such as playing music or tracking location.

"Yes! Foreground services are going to make my app awesome!"

Setting Up a Foreground Service in React Native

To set up a foreground service in a React Native application, we need to write some native Android code. This involves creating a service in Java or Kotlin and then integrating it with our React Native app.

Step-by-Step Guide:

Create a New React Native Project:

First, create a new React Native project if you don't already have one:



   npx react-native init ForegroundServiceExample
   cd ForegroundServiceExample

"Starting a new project like a boss!"

Modify AndroidManifest.xml:

Update your AndroidManifest.xml to declare the foreground service and add the necessary permissions.



   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.foregroundserviceexample">

       <application
           android:allowBackup="true"
           android:label="@string/app_name"
           android:icon="@mipmap/ic_launcher"
           android:roundIcon="@mipmap/ic_launcher_round"
           android:supportsRtl="true"
           android:theme="@style/AppTheme">

           <service android:name=".MyForegroundService"
                    android:foregroundServiceType="location|mediaPlayback"/>
       </application>

       <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
   </manifest>

Create the Foreground Service:

Create a new Java or Kotlin file for your service. Here, we'll use Java for simplicity.

MyForegroundService.java:



   package com.foregroundserviceexample;

   import android.app.Notification;
   import android.app.NotificationChannel;
   import android.app.NotificationManager;
   import android.app.PendingIntent;
   import android.app.Service;
   import android.content.Intent;
   import android.os.Build;
   import android.os.IBinder;
   import androidx.annotation.Nullable;
   import androidx.core.app.NotificationCompat;

   public class MyForegroundService extends Service {

       private static final String CHANNEL_ID = "ForegroundServiceChannel";

       @Nullable
       @Override
       public IBinder onBind(Intent intent) {
           return null;
       }

       @Override
       public int onStartCommand(Intent intent, int flags, int startId) {
           createNotificationChannel();
           Intent notificationIntent = new Intent(this, MainActivity.class);
           PendingIntent pendingIntent = PendingIntent.getActivity(this, 0, notificationIntent, 0);

           Notification notification = new NotificationCompat.Builder(this, CHANNEL_ID)
                   .setContentTitle("Foreground Service")
                   .setContentText("Service is running in the foreground")
                   .setSmallIcon(R.drawable.ic_notification)
                   .setContentIntent(pendingIntent)
                   .build();

           startForeground(1, notification);

           // Perform your long-running task here

           return START_NOT_STICKY;
       }

       private void createNotificationChannel() {
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
               NotificationChannel serviceChannel = new NotificationChannel(
                       CHANNEL_ID,
                       "Foreground Service Channel",
                       NotificationManager.IMPORTANCE_DEFAULT
               );
               NotificationManager manager = getSystemService(NotificationManager.class);
               if (manager != null) {
                   manager.createNotificationChannel(serviceChannel);
               }
           }
       }

       @Override
       public void onDestroy() {
           super.onDestroy();
       }
   }

"Creating services like a coding ninja!"

Triggering the Foreground Service from React Native:

Use the React Native NativeModules to start and stop the foreground service.

App.js:



   import React from 'react';
   import { View, Button, NativeModules } from 'react-native';

   const App = () => {
     const startService = () => {
       NativeModules.ForegroundServiceModule.startService();
     };

     const stopService = () => {
       NativeModules.ForegroundServiceModule.stopService();
     };

     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Button title="Start Service" onPress={startService} />
         <Button title="Stop Service" onPress={stopService} />
       </View>
     );
   };

   export default App;

Creating Native Modules:

Create a new Java class for the native module that will allow React Native to communicate with the foreground service.

ForegroundServiceModule.java:



   package com.foregroundserviceexample;

   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   import com.facebook.react.bridge.Callback;
   import android.content.Intent;

   public class ForegroundServiceModule extends ReactContextBaseJavaModule {
       private static ReactApplicationContext reactContext;

       ForegroundServiceModule(ReactApplicationContext context) {
           super(context);
           reactContext = context;
       }

       @Override
       public String getName() {
           return "ForegroundServiceModule";
       }

       @ReactMethod
       public void startService() {
           Intent serviceIntent = new Intent(reactContext, MyForegroundService.class);
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
               reactContext.startForegroundService(serviceIntent);
           } else {
               reactContext.startService(serviceIntent);
           }
       }

       @ReactMethod
       public void stopService() {
           Intent serviceIntent = new Intent(reactContext, MyForegroundService.class);
           reactContext.stopService(serviceIntent);
       }
   }

Finally, register the module in the MainApplication.java:



   import com.foregroundserviceexample.ForegroundServiceModule;

   @Override
   public List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
           new ForegroundServicePackage() // Add this line
       );
   }

"Feeling like a coding ninja after setting up native modules!"

Conclusion

Foreground services in Android allow your React Native application to perform long-running tasks while keeping the user informed through notifications. By following this guide, you can implement foreground services to handle tasks such as music playback, location tracking, and more. Although this requires some native Android code, it significantly enhances the capabilities and user experience of your app.

By leveraging foreground services effectively, you can ensure that critical tasks are performed reliably, even when your app is not in the foreground. This can greatly improve the functionality and user satisfaction of your React Native applications.

"Mission accomplished! Your app is now ready to rock with foreground services."

Utilize React Native's Headless JS for developing advanced features! 🚀

Manjot Singh — Sun, 23 Jun 2024 04:14:32 +0000

Utilizing React Native Headless JS for Background Tasks

In mobile application development, there are often requirements to perform tasks in the background, such as fetching data from an API, handling notifications, or running periodic updates. React Native provides a solution for these scenarios through Headless JS, a powerful tool that enables developers to run JavaScript tasks even when the app is in the background or terminated. In this article, we'll explore what Headless JS is, how it works, and how you can implement it in your React Native applications.

What is Headless JS?

Headless JS is a feature in React Native that allows you to run JavaScript tasks in the background. This is particularly useful for tasks that need to continue running even when the user is not actively interacting with the app. Examples include background geolocation, silent push notifications, and periodic data synchronization.

How Headless JS Works

Headless JS operates by creating a background service that can run JavaScript code independently of the app's main UI thread. This means that tasks can be executed without needing the app to be open or visible to the user.

When a background task is triggered, React Native initializes a new JavaScript runtime environment to execute the specified task. This environment is separate from the one running the app's UI, allowing background tasks to run without affecting the user experience.

Setting Up Headless JS

Let's walk through the steps to set up and use Headless JS in a React Native application.

Install Required Packages: Ensure you have React Native installed and set up.

npx react-native init HeadlessJSExample
cd HeadlessJSExample

Create a Background Task: Define the JavaScript function that you want to run in the background. This function must be registered with AppRegistry.

// backgroundTask.js
import { AppRegistry } from 'react-native';

const backgroundTask = async (taskData) => {
  console.log('Background task executed', taskData);
  // Perform your background task here
};

AppRegistry.registerHeadlessTask('BackgroundTask', () => backgroundTask);

Configure Native Code (Android): Headless JS requires some additional setup on the Android side. Modify MainApplication.java to include the background task.

// MainApplication.java
import com.facebook.react.HeadlessJsTaskService;
import android.content.Intent;
import android.os.Bundle;

public class MainApplication extends Application implements ReactApplication {
    // ... existing code

    @Override
    public void onCreate() {
        super.onCreate();
        Intent intent = new Intent(getApplicationContext(), MyHeadlessJsTaskService.class);
        getApplicationContext().startService(intent);
        HeadlessJsTaskService.acquireWakeLockNow(getApplicationContext());
    }
}

// MyHeadlessJsTaskService.java
import com.facebook.react.HeadlessJsTaskService;

public class MyHeadlessJsTaskService extends HeadlessJsTaskService {
    @Override
    protected @Nullable HeadlessJsTaskConfig getTaskConfig(Intent intent) {
        Bundle extras = intent.getExtras();
        if (extras != null) {
            return new HeadlessJsTaskConfig(
                "BackgroundTask", // The task registered in JavaScript
                Arguments.fromBundle(extras),
                5000, // Timeout for the task
                true // Allow the task to run in foreground as well
            );
        }
        return null;
    }
}

Triggering the Background Task: To trigger the background task, you can use an event like a push notification or a periodic timer. Here's an example of triggering it from a button press.🚀

// App.js
import React from 'react';
import { View, Button, NativeModules } from 'react-native';

const App = () => {
  const triggerBackgroundTask = () => {
    NativeModules.BackgroundTaskModule.startBackgroundTask();
  };

  return (
    <View>
      <Button title="Start Background Task" onPress={triggerBackgroundTask} />
    </View>
  );
};

export default App;

Handling Background Task Completion: Ensure that the background task handles its completion properly to avoid unnecessary resource usage.

// backgroundTask.js
const backgroundTask = async (taskData) => {
  console.log('Background task executed', taskData);
  // Perform your background task here
  // Notify the system that the task is complete
  HeadlessJsTaskService.notifyTaskFinished(taskId);
};

AppRegistry.registerHeadlessTask('BackgroundTask', () => backgroundTask);

Use Cases for Headless JS

Background Geolocation: Tracking the user's location continuously, even when the app is not in the foreground.
Silent Push Notifications: Handling push notifications without user interaction.
Periodic Syncing: Syncing data with a server at regular intervals.
Alarm Services: Implementing alarm functionalities that trigger actions at specific times.
Calling Features: Implementing call-related features that need to work even when the app is closed.

iOS Alternatives

Headless JS is not available for iOS, but there are alternative libraries that can be used for background tasks in iOS:

react-native-background-fetch: This library allows periodic background fetching on both Android and iOS.
react-native-background-geolocation: Provides background location tracking for both platforms.
react-native-background-timer: Allows you to run tasks at specified intervals, suitable for both platforms.

Conclusion

Headless JS is a powerful feature in React Native that enables the execution of background tasks seamlessly. By understanding and implementing Headless JS, you can enhance your app's capabilities, providing a better user experience even when the app is not actively in use. Whether it's for background geolocation, silent notifications, periodic syncing, or call-related features, Headless JS provides a robust solution for managing background tasks in React Native applications. For iOS, you can use libraries like react-native-background-fetch, react-native-background-geolocation, and react-native-background-timer to achieve similar functionality.

Manjot Singh
Mobile Engineer

Top State management libs for React Native ✨

Manjot Singh — Sat, 22 Jun 2024 14:49:52 +0000

State Management in React Native: A Comprehensive Guide

State management is a crucial aspect of developing robust and scalable React Native applications. It involves managing the state of your app, ensuring that your components reflect the correct data at all times. In this article, I'll explore various state management techniques in React Native, comparing different libraries and approaches to help you choose the best one for your needs.

Understanding State in React Native

In React Native, state refers to a data structure that determines how a component renders and behaves. State is mutable, meaning it can change over time, usually in response to user actions or network responses. Proper state management ensures that your app's UI updates correctly when the state changes.

Built-in State Management

React Native provides a built-in way to manage state using the useState hook for functional components and this.setState for class components. This method is ideal for simple state management within individual components.

Example using useState:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const CounterApp = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default CounterApp;

Context API

For managing state across multiple components, React Native offers the Context API. It allows you to share state without passing props down manually through every level of the component tree.

Example using Context API:

import React, { createContext, useState, useContext } from 'react';
import { View, Text, Button } from 'react-native';

const CountContext = createContext();

const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
};

const Counter = () => {
  const { count, setCount } = useContext(CountContext);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const App = () => (
  <CountProvider>
    <Counter />
  </CountProvider>
);

export default App;

Redux

Redux is a popular library for managing state in React and React Native applications. It provides a predictable state container and ensures that state changes are traceable and manageable. Redux is ideal for larger applications with complex state logic.

Example using Redux:

Install Redux and React-Redux:

npm install redux react-redux

Create a Redux Store:

import { createStore } from 'redux';

const initialState = { count: 0 };

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

Create React Components and Connect to Redux:

import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { View, Text, Button } from 'react-native';
import store from './store'; // Import your store

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
    </View>
  );
};

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

export default App;

MobX

MobX is another state management library that uses observables to track state changes. It is known for its simplicity and flexibility, making it an excellent choice for developers who prefer a more straightforward approach than Redux.

Example using MobX:

Install MobX and MobX-React:

npm install mobx mobx-react

Create a MobX Store:

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action increment = () => {
    this.count += 1;
  };
}

export default new CounterStore();

Create React Components and Connect to MobX:

import React from 'react';
import { observer } from 'mobx-react';
import { View, Text, Button } from 'react-native';
import counterStore from './store'; // Import your store

const Counter = observer(() => (
  <View>
    <Text>{counterStore.count}</Text>
    <Button title="Increment" onPress={counterStore.increment} />
  </View>
));

const App = () => <Counter />;

export default App;

Zustand

Zustand is a lightweight state management library that provides a more flexible and straightforward approach compared to Redux and MobX. It uses hooks for state management, making it very easy to integrate into React Native applications.

Example using Zustand:

Install Zustand:

npm install zustand

Create a Zustand Store:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

export default useStore;

Create React Components and Use Zustand:

import React from 'react';
import { View, Text, Button } from 'react-native';
import useStore from './store'; // Import your Zustand store

const Counter = () => {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
};

const App = () => <Counter />;

export default App;

Valtio

Valtio is another lightweight state management library that uses proxies to manage state. It provides a simple and reactive way to manage state in your React Native applications.

Example using Valtio:

Install Valtio:

npm install valtio

Create a Valtio Store:

import { proxy, useSnapshot } from 'valtio';

const state = proxy({ count: 0 });

const increment = () => {
  state.count += 1;
};

export { state, increment };

Create React Components and Use Valtio:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useSnapshot } from 'valtio';
import { state, increment } from './store'; // Import your Valtio store

const Counter = () => {
  const snapshot = useSnapshot(state);

  return (
    <View>
      <Text>{snapshot.count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
};

const App = () => <Counter />;

export default App;

Conclusion

Choosing the right state management solution depends on the complexity and scale of your React Native application. For simple applications, the built-in state management and Context API are often sufficient. For larger applications with more complex state logic, Redux, MobX, Zustand, or Valtio can provide the necessary tools to manage state effectively.

By understanding and implementing the appropriate state management techniques, you can ensure your React Native application remains maintainable, scalable, and responsive to user interactions.

Valtio is my personal favourite for small or medium-sized apps.❤️

Manjot Singh,
Senior Mobile Engineer at Yara.com