Forem: Prajwal Bhandari

How to build a widget for Android using Expo-based React native

Prajwal Bhandari — Tue, 24 Jun 2025 01:54:50 +0000

Learn how to create a home screen widget for Android using React native expo and sync seamlessly with its parent app using shared preferences and a custom Expo module.

Problem Statement

Creating a widget in Expo-based React Native can be tricky. While the Expo makes app development easier by hiding much of the native complexity, widgets often need native access to the device operating system, which the Expo does not fully support outside the box.

To make the widget work with an Expo-based app, you need to write custom native code (i.e., Java or Kotlin for Android), which means moving beyond Expo’s standard setup. You'll need to do some extra setup, like using the Expo Development Client and dealing with possible build issues. Basically, since widgets rely on native code, they don't exactly play nicely with Expo out of the box.

Objective

To implement interactive widgets within an Expo-managed React Native app, which:

Create a widget in Android that displays an image.
The state is synchronised with its parent app using shared storage.

Step 1: Create an Expo app

Run the following command to create the Expo app:

npx create-expo-app@latest myPhotoApp

Create a UI to display that:

Text field to accept the image URL.
Button that submits the image URL to the image view.
Image view to render the images provided in the URL.

Step 2: Create Widget

Expo does not give access to native code out of the box, so we need to run the command to eject the project for native code access.

npx expo prebuild

Once the command is successfully executed, we will have two folders, android and ios. We will be ignoring ios folder for now as we are focused on creating a widget for android

Open the Android folder in Android Studio. Once the build is successful, right click on res > New > Widget > App Widget

Configure your widget, and click finish.

A new file will be created, but we will only focus on three files: MyWidget.java inside the app folder, my_widget.xml inside res/layout, and my_widget_info.xml inside res/xml.

`MyWidget extends the AppWidgetProvider`, where we will code the widget behavior.
my_widget.xml is where we will be implementing the widget UI components.
my_widget_info.xml contains the preview UI of the widget.

We need to customize the UI of the widget to render the image from the URL provided in the parent app. So we will be modifying my_widget.xml to meet our objective.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/widget_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="8dp">

        <!-- Image View (main content) -->
        <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/widget_container_2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="black">

            <ImageView
                android:id="@+id/appwidget_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:visibility="gone" />

            <LinearLayout
                android:id="@+id/fallback_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="10dp">

                <ImageView
                    android:id="@+id/placeholder_icon"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:maxWidth="48dp"
                    android:maxHeight="48dp"
                    android:src="@android:drawable/ic_menu_camera" />

                <TextView
                    android:id="@+id/placeholder_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:gravity="center"
                    android:text="No Photo"
                    android:textColor="@android:color/darker_gray"
                    android:textSize="14dp"
                    android:textStyle="bold" />
            </LinearLayout>
        </FrameLayout>

    </RelativeLayout>
</LinearLayout>

Run the application in Android Studio, and you can add the widget in the emulator.

Note: For every change you make to the widget, you need to rebuild in Android Studio and restart the Expo development server

3. Create a channel between Widget and react native

As we have configured the Widget UI, we must create a channel between the widget and the React native app to communicate with the widget. We will do this via a shared storage between the widget and the react native app. React native can't access shared storage directly, so we will create a native module to help react native access the shared storage to save the image URL.

Create two files:

RNShared: This will extend the ReactContextBaseJavaModule for a native module to save the image URL.

import android.appwidget.AppWidgetManager;
import android.content.ComponentName;
import android.content.Intent;
import android.content.SharedPreferences;

import androidx.annotation.NonNull;

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

public class RNShared extends ReactContextBaseJavaModule {
    ReactApplicationContext context;

    public RNShared(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }

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

    @ReactMethod
    public void setData(String key, String data, Callback callback) {
        SharedPreferences.Editor editor = context.getSharedPreferences("DATA", Context.MODE_PRIVATE).edit();
        editor.putString(key, data);
        editor.commit();

        Intent intent = new Intent(getCurrentActivity().getApplicationContext(), MyWidget.class);
        intent.setAction(AppWidgetManager.ACTION_APPWIDGET_UPDATE);
        int[] ids = AppWidgetManager.getInstance(getCurrentActivity().getApplicationContext()).getAppWidgetIds(new ComponentName(getCurrentActivity().getApplicationContext(), MyWidget.class));
        intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS, ids);
        getCurrentActivity().getApplicationContext().sendBroadcast(intent);
    }
}

RNPackages: We will be adding RNShared as a native module

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class RNPackages implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new RNShared(reactContext));

        return modules;
    }

}

RNPackages cannot be autolinked, so we must manually add them to the MainApplication.

In getPackages() function add RNPackages()

 override fun getPackages(): List<ReactPackage> {
            val packages = PackageList(this).packages
             packages.add(RNPackages()) // add this
            return packages
          }

On the React native side, let's import the native module.

import { NativeModules } from 'react-native';
const RNShared = NativeModules.RNShared;

We want to save the image URL when the Submit button is pressed, so we will implement the setData method of RNShared to save the URL.

  const onSubmit = () => {
    setImageUrl(value); //to set image url for image view;
    RNShared.setData("sharedImageUrl", value,()=>{}); // set image url to shared storage
  };

4. Render image to Widget

Ok, now the fun part begins. Let us modify mywidget.java to render the image from the URL saved in shared storage.

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.content.SharedPreferences;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Build;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.View;
import android.widget.RemoteViews;

import java.net.URL;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;

/**
 * Implementation of App Widget functionality.
 */
public class MyWidget extends AppWidgetProvider {

    static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                                int appWidgetId) {
        SharedPreferences sharedPref = context.getSharedPreferences("DATA", Context.MODE_PRIVATE);
        String imageURL = sharedPref.getString("sharedImageUrl", "");
        RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.my_widget);
        new Thread(() -> {
            Bitmap bitmap = getBitmapFromURL(imageURL);
            if (bitmap != null) {
                views.setViewVisibility(R.id.appwidget_image, View.VISIBLE);
                views.setViewVisibility(R.id.fallback_layout, View.GONE);
                Bitmap resizedBitmap = resizeBitmap(bitmap, 300, 200);
                views.setImageViewBitmap(R.id.appwidget_image, resizedBitmap);
            } else {
                views.setViewVisibility(R.id.appwidget_image, View.GONE);
                views.setViewVisibility(R.id.fallback_layout, View.VISIBLE);
            }
            appWidgetManager.updateAppWidget(appWidgetId, views);
        }).start();
    }
    private static Bitmap getBitmapFromURL(String src) {
        try {
            URL url = new URL(src);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            return BitmapFactory.decodeStream(input);
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // There may be multiple widgets active, so update all of them
        for (int appWidgetId : appWidgetIds) {
            updateAppWidget(context, appWidgetManager, appWidgetId);
        }
    }

    @Override
    public void onEnabled(Context context) {
        // Enter relevant functionality for when the first widget is created
    }

    @Override
    public void onDisabled(Context context) {
        // Enter relevant functionality for when the last widget is disabled
    }

    @Override
    public void onAppWidgetOptionsChanged(Context context, AppWidgetManager appWidgetManager, int appWidgetId, Bundle newOptions) {
        super.onAppWidgetOptionsChanged(context, appWidgetManager, appWidgetId, newOptions);
        updateWidget(context, appWidgetManager, appWidgetId, newOptions);
    }
    private void updateWidget(Context context, AppWidgetManager appWidgetManager, int appWidgetId, Bundle options) {
        RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.my_widget);

        int minWidth = options.getInt(AppWidgetManager.OPTION_APPWIDGET_MIN_WIDTH);
        int minHeight = options.getInt(AppWidgetManager.OPTION_APPWIDGET_MIN_HEIGHT);

        int iconSizeDp;
        int textSizeSp;

        if (minWidth < 120 || minHeight < 120) {
            iconSizeDp = 32;
            textSizeSp = 10;
        } else if (minWidth < 200 || minHeight < 200) {
            iconSizeDp = 48;
            textSizeSp = 12;
        } else {
            iconSizeDp = 64;
            textSizeSp = 14;
        }

        // Update image size
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            views.setViewLayoutWidth(R.id.placeholder_icon, dpToPx(context, iconSizeDp),TypedValue.COMPLEX_UNIT_SP);
            views.setViewLayoutHeight(R.id.placeholder_icon, dpToPx(context, iconSizeDp),TypedValue.COMPLEX_UNIT_SP);
        }
        // Set text size
        views.setTextViewTextSize(R.id.placeholder_text, TypedValue.COMPLEX_UNIT_SP, textSizeSp);

        appWidgetManager.updateAppWidget(appWidgetId, views);
    }
    private int dpToPx(Context context, int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
                context.getResources().getDisplayMetrics());
    }
}

Image URL cannot be directly rendered in native, like we have been doing in React native, so we will be converting the image from URL to a bitmap so we can render the image in our widget. getBitmapFromURL() will convert the image from the URL to a bitmap.

Finally, we have everything ready:

Widget
Widget UI
Channel for the communication between React native and the widget.

Let’s try to rebuild the application in Android Studio and rerun the Expo development server to implement changes in the emulator.

Conclusion

While React Native doesn’t directly support Android widgets, you can still implement them natively. This hybrid approach lets you keep your main app in Expo/RN while supporting widgets the Android way.

Here is the link to source code.

Build Rest API with FastAPI in 3 steps

Prajwal Bhandari — Thu, 02 Feb 2023 07:12:39 +0000

This article will explore the detailed tutorial for creating Rest API with FastAPI. FastAPI is the python based framework to create Rest API. According to their documentation.

FastAPI is a modern, fast (high-performance), a web framework for building APIs with Python 3.6+ based on standard Python type hints.

After working on FastAPI in a couple of projects yes I can say that it is fast, very fast due to the async feature in python 3.6+. So it is recommended to use python 3.6+ with FastAPI. There are other features too that make FastAPI developers favorite.

Out-of-box API documentation.
In-build data validation.
FastAPI provides concurrent programming.
The minimal robust code base.

For a better understanding and development of the API with FastAPI, I have divided the process into 3 steps. We will achieve each step one by one with better learning and development.

STEP-1: Creation of a virtual environment

There are many tools to create a virtual environment for python but I will be using venv for this tutorial.

venv is a lightweight tool to create an isolated python environment. venv creates a folder that includes all the packages that the python project would use.

First, create a directory for your project. I will be creating a learning directory from the terminal and changing the directory to it.

$ mkdir learning & cd learning

Once we are in our learning directory we can set up our venv. To set up, a virtual environment in our directory run the command

$ python -m venv environment

Above command should create an environment directory inside our learning directory which will contain all the packages for our python project. We have successfully created our virtual environment and to activate it we can run the command.

$ source environment/bin/activate

Once the command is executed without any error message the environment should be activated, then we can proceed to step 2

STEP-2: Setup FastAPI

In this step, we will be creating our first API. Before creating our first API let’s install FastAPI with pip install in our virtual environment.

$ pip install fastapi

Once the FastAPI library has been installed we can create a file main.py. In main.py let’s import the FastAPI library

from fastapi import FastApI

Once the FastAPI is imported we can now create the instance of FastAPI and assigned it to the app variable:

from fastapi import FastApI
app= FastAPI()

The app variable is the main point of interaction to create all APIs. Now let’s define a path operation decorator to define our route path and HTTP method.

from fastapi import FastApI
app= FastAPI()
@app.get('/') #path operation decorator

In the above code, we are creating a GET request with a ’/’ path similarly for POST, PUT, and DELETE we can use the operations:

@app.post(‘/’)
@app.put(‘/’)
@app.delete(‘/’)

To provide the path to our HTTP request, the code should look like this:

@app.get('/custom_path') #path operation decorator
Once the path operation decorator is implemented now we can implement the path operation function:

from fastapi import FastApI
app= FastAPI()
@app.get('/') #path operation decorator
def root():
 return {'message':'Hello world'}

The root() function is called out when the user tries to make a GET request to our path and gets dict as a response. You can also return a list, of singular values such as str, int, etc

The final code in our main.py should be:

from fastapi import FastApI
app= FastAPI()
@app.get('/') #path operation decorator
def root():
 return {'message':'Hello world'}

Now we have created our first API method which should be enough for our 3 steps.

STEP-3: Run the server

Finally, after creating the environment and making our first API we have to run the server. For the server, we will be using uvicorn. Uvicorn is an ASGI web server implementation for Python.

Before using uvicorn we need to install it in our environment.

$ pip install uvicorn

Now once the uvicorn is installed we can start the server with the below command in our terminal:

$ uvicorn main:app - reload

Let’s break down the above command for better understanding.

uvicorn is the keyword that triggers uvicorn library
The ASGI application should be specified in the form path.to.module:instance.path
While using locally we use the --reload flag for hot reload So now we have successfully made the Rest API with FastAPI.

Now go to http://127.0.0.1:8000 in the browser which should give a response like in the screen snippet:

If we visit http://127.0.0.1:8000/doc we can get the documentation page:

Finally 🎉, we have developed and served (locally) our first Rest API with FastAPI.