DEV Community: DEVersity

How to build a Barcode Widget in React Native (part II: iOS)

Jelena Petkovic — Tue, 14 Feb 2023 09:39:20 +0000

In this tutorial we are going to learn how to build a barcode widget for an iOS device.
In the previous part we focused on Android and Java, while in this part we're going to be using Swift.
The process will be similar in many ways, except for the bridging method, which is going to slightly differ.

In part I of this series we will show how to create Android widget using Java.

1. Intro

In order to build the widget we will be creating a simple extension in xCode as well as a "bridge" that will allow our app to communicate with the widget. Let's begin!

2. Creating the widget

We can start by opening our project in xCode. Now, right click on the project folder and navigate to file > new > target.

This will open a new window with different extensions. Let's search for the "Widget Extension".

Next, we can select the product name of our widget.

I am going to name it "BarcodeWidget". Make sure to uncheck “Include Configuration Intent” and "Include live activity".

If we click the finish button, xCode is going to ask us if we want to create an active scheme. Select "activate".

Now, we can select our widget extension in the "targets" section and run it. Be sure to run it for iOS 14.0 and up, as the previous versions of iOS aren't compatible with the extension.

At this point, we should be able to see our widget on the home screen. For now, it is only displaying a simple date.

Let's take a look at the files created in our project. We can see that xCode created a new folder with the same name we set for the widget at the beginning.

To modify our widget we can open the "BarcodeWidget.swift" file.
There are different functions and structures inside the file. Let's take a look at a few of them:

"BarcodeWidget struct" deals with the main configuration of our widget. Here, we can set the display name as well as the widget's description. If we'd like our widget to be non-resizable and of a specific size (the default preview offers three options: small, medium and large) we can set it here by calling the supportedFamilies() function and passing it an argument, an array that contains our preferred widget sizes.

.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])

Next, there is the "BarcodeWidgetEntryView" struct where we can modify the widget's layout.

struct BarcodeWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Text(entry.date, style: .time)
    }
}

You may also find the "getTimeline() method". It provides an array of timeline entries for the current time and, optionally, any future times to update a widget.

func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        // Generate a timeline consisting of five entries an hour apart, starting from the current date.
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }

If you want a better understanding of the TimelineProvider and its functions, you can always check Apple's official documentation in here.

3. Bridging

To display data from our React Native app, we are going to need some additional settings.
First, let's add the "App Group" capability to our project in order to let the widget communicate with the app.
Find your main app target in the Xcode project settings, switch to the Signing & Capabilities tab and click on + Capability.

Then search for "App Groups" and double click on it.

Click the + button in the new "App Groups" capability created and choose your team. The final step is to add an app group identifier. After you finish, you should see your App Group id appear. If it comes up red - make sure to try the refresh button.

Now, we can do the same thing for our widget's target. We can open the widget's Signing & Capabilities tab and add a new "App Groups" capability. If we select the same team as before, we should be able to see the identifier we already created in our main project's target. Make sure the same id is selected on both targets.

We have to set one more thing before we start writing our code in React Native. This includes installing the "SharedGroupPreferences" package. From the terminal, run:

npm i react-native-shared-group-preferences

Open your App file and import:

import SharedGroupPreferences from 'react-native-shared-group-preferences'

Now, let's add this to our code:

  // Let's display a random 6 digit number
  const barcode = Math.floor(100000 + Math.random() * 900000).toString()

  const appGroupIdentifier = 'group.widget.barcode.jp'

  useEffect(() => {
  if (Platform.OS === 'ios'){
      const setWidgetData = async () => {await SharedGroupPreferences.setItem('widgetKey', {
        text: barcode !== undefined ? barcode : '',
      }, appGroupIdentifier)}
      setWidgetData()
        .catch((error) => {
          log.info(() => ['error setting widget data, err: ', error])
  },[barcode])

The "appGroupIdentifier" should be the same as the one we just set in our "App Groups".

Great! We are done with the React Native part. Now, let's go back to our widget's code.

To add new text to our widget, first we have to add the following code above our Provider:

struct WidgetData: Decodable { var text: String }

Next, update the "SimpleEntry" struct:

struct SimpleEntry: TimelineEntry { let date: Date let myString: String }

Variable "myString" is going to be our barcode string that we set in the React Native app. When we add this, an error is going to come up - telling you to update the number of arguments of certain methods. After fixing this error, our code should look something like this:

Now let's update our "getTimeline()" method with the following code:

func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
    var entries: [SimpleEntry] = []

    let userDefaults = UserDefaults.init(suiteName: "group.widget.barcode.jp")
    if userDefaults != nil {
      if let savedData = userDefaults!.value(forKey: "widgetKey") as? String {
        let decoder = JSONDecoder()
        let data = savedData.data(using: .utf8)
        if let parsedData = try? decoder.decode(WidgetData.self, from: data!) {
          let currentDate = Date()
          let entryDate = Calendar.current.date(byAdding: .second, value: 3, to: currentDate)!

          let entry = SimpleEntry(date: entryDate, myString: parsedData.text)
          entries.append(entry)

          let timeline = Timeline(entries: entries, policy: .atEnd)
          completion(timeline)
        } else {
          print("Could not parse data")
        }
      } else {
        let currentDate = Date()

        for hourOffset in 0 ..< 2 {
          let entryDate = Calendar.current.date(byAdding: .second, value: hourOffset, to: currentDate)!
          let entry = SimpleEntry(date: entryDate, myString: "No data")
          entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
      }
    }
  }

Replace the "suiteName" value with your own App Group ID in the following line:

UserDefaults.init(suiteName: "group.widget.barcode.jp")

The last thing to set before running our widget again is the "BarcodeWidgetEntryView" struct.
In order to display the barcode text from the React Native app - let's add this:

`struct BarcodeWidgetEntryView : View {
var entry: Provider.Entry

var body: some View {
   Text(entry.myString).font(.system(size: 12)).tracking(2)
}

Remember to run pod install in your iOS folder.
Now, let's start the app.

If everything works well, the barcode number we previously set in our app will be displayed on the widget.

4. Generating the barcode image from a string value

The only thing that's left to do includes generating a barcode image from our barcode number as well as displaying it.

To do this, we are going to add a few functions to our "BarcodeWidget.swift" file.

The first function we are going to add is "generateBarcode()":

func generateBarcode(from string: String) -> UIImage? {

  let data = string.data(using: String.Encoding.ascii)

  if let filter = CIFilter(name: "CICode128BarcodeGenerator") {
    filter.setDefaults()
    //Margin
    filter.setValue(1.00, forKey: "inputQuietSpace")
    filter.setValue(data, forKey: "inputMessage")
    //Scaling
    let transform = CGAffineTransform(scaleX: 3, y: 3)

    if let output = filter.outputImage?.transformed(by: transform) {
        let context:CIContext = CIContext.init(options: nil)
        let cgImage:CGImage = context.createCGImage(output, from: output.extent)!
        let rawImage:UIImage = UIImage.init(cgImage: cgImage)

        //Refinement code to allow conversion to NSData or share UIImage. Code here:
        //http://stackoverflow.com/questions/2240395/uiimage-created-from-cgimageref-fails-with-uiimagepngrepresentation
        let cgimage: CGImage = (rawImage.cgImage)!
        let cropZone = CGRect(x: 0, y: 0, width: Int(rawImage.size.width), height: Int(rawImage.size.height))
        let cWidth: size_t  = size_t(cropZone.size.width)
        let cHeight: size_t  = size_t(cropZone.size.height)
        let bitsPerComponent: size_t = cgimage.bitsPerComponent
        //THE OPERATIONS ORDER COULD BE FLIPPED, ALTHOUGH, IT DOESN'T AFFECT THE RESULT
        let bytesPerRow = (cgimage.bytesPerRow) / (cgimage.width  * cWidth)

        let context2: CGContext = CGContext(data: nil, width: cWidth, height: cHeight, bitsPerComponent: bitsPerComponent, bytesPerRow: bytesPerRow, space: CGColorSpaceCreateDeviceRGB(), bitmapInfo: cgimage.bitmapInfo.rawValue)!

        context2.draw(cgimage, in: cropZone)

        let result: CGImage  = context2.makeImage()!
        let finalImage = UIImage(cgImage: result)

        return finalImage

    }
}

This function will create an UIImage from the string.

Finally, let's update "BarcodeWidgetEntryView" by adding the following:

struct BarcodeWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
      if let image = generateBarcode(from: entry.myString) {
                          Image(uiImage: image).resizable()
                          .imageScale(.small).frame( width: CGFloat(132), height: CGFloat(60)).padding(.bottom, 3)
       }
       Text(entry.myString).font(.system(size: 12)).tracking(2)
    }
}

When we run the application again, the widget should be displaying both the text and the image, as shown below:

5. Updating the widget content

Now, let's focus on keeping our widget up to date.
First let's change our update policy to "never" since we are going to instruct the app on when to update its content.

let timeline = Timeline(entries: entries, policy: .never)

Let's create a "reloadWidget()" function in the Swift code that we are later going to call in our React Native app.
This can be done by adding two files to our project.
Select "new file" and choose "Swift File" in the next window.

Next, let's name the file "WidgetModule" and select your app as the target of this file.

Update the "WidgetModule.swift" file as shown below:

import Foundation
import AVFoundation
import WidgetKit

@objc(WidgetModule)
class WidgetModule: NSObject {

  @objc public func reloadWidget(_ kind: String) -> Void {
     if #available(iOS 14.0, *) {
       #if arch(arm64) || arch(i386) || arch(x86_64)
       WidgetCenter.shared.reloadAllTimelines()
       #endif
     }
   }

  @objc
  static func requiresMainQueueSetup() -> Bool {
    return true
  }

}

Our "reloadWidget" is using WidgetCenter.shared.reloadAllTimelines() method to reload the widget's timeline. For more details about reloading the widget check this link.

Now we need to add the other file. Choose "Objective-C":

Let's name it the same as the file before "WidgetModule" and select the same file target as of the previously created file.

Update the file like this:

#import <Foundation/Foundation.h>

#import "React/RCTBridgeModule.h"
@interface
RCT_EXTERN_MODULE(WidgetModule, NSObject)
RCT_EXTERN_METHOD(reloadWidget: (NSString *)kind)

@end

This file will be used to export our newly created module that we are going to use later in the React Native app.

The last file that we are going to add is a Bridging Header. Again, add a new file and choose "Header".

Paste the following code:

//
//  Use this file to import your target's public headers that you would like to expose to Swift.
//

#import "React/RCTBridgeModule.h"

Finally let's call our "updateWidget" function from the React Native code;

First, import NativeModules in the App file:

`import { NativeModules } from 'react-native'

export const App = () => {
const { WidgetModule } = NativeModules

...
}
`

Then, let's update our "useEffect" hook by adding
.then(() => WidgetModule.reloadWidget(appGroupIdentifier)) to setWidgetData() method.

The final result should look like this:


  if (Platform.OS === 'ios'){
      const setWidgetData = async () => {await SharedGroupPreferences.setItem('widgetKey', {
        text: barcode !== undefined ? barcode : '',
      }, appGroupIdentifier)}
      setWidgetData()
        .then(() => WidgetModule.reloadWidget(appGroupIdentifier))
        .catch((error) => {
          log.info(() => ['error setting widget data, err: ', error])
        })

7. The end

Alright, it looks like we are done!

Don't forget to run npm install && cd iOS && pod install before running your project again. The widget layout should now be updating every time we call the "updateWidget" function.

Feel free to play around with different widget options and try to add some style to it.

Good luck with your project, I hope this tutorial helped you!

How to build a Barcode Widget in React Native (part I: Android)

Jelena Petkovic — Tue, 14 Feb 2023 09:38:54 +0000

A widget, or a gadget, is a tiny application or extension which enables additional features and improves the user's general experience. They can help us facilitate access to the most used functions of a device and offer us visual information without the need to run anything else.

Unfortunately, widget development is not feasible using React Native alone. An alternative is to create a native widget and a "bridge" that will allow communication between the widget and the React Native application.

In this part we are focusing on building barcode widget for Android platform, using Java.

In part II of this series we will show how to create iOS widget using Swift.

1. Intro

First, we are going to create a simple widget that will only display the barcode number (string value) pulled from our React Native app that we're making the widget for.

Later, we will generate a barcode image from our barcode string and display it on our widget layout.

2. Creating the widget

We can start by opening our React Native project in Android Studio. Be sure to select the android folder when opening your project. Navigate to res > New > Widget > App Widget. This will let us create the widget extension for Android.

Here we are able to configure some default options for our widget. This includes: the class name, minimum width and height (in cells), resizability (horizontally, vertically, none), the source language (Java/Kotlin) etc.

This time I am going to create a 2x1 widget that isn't resizable.

If we click "finish", Android studio is going to display a preview of all the files that are going to be created. Here, we can also note that setting our class name to BarcodeWidget will create a java file with the same name.

3. Bridging

In order to let our app communicate with the widget, control what's displayed and share data, we have to make the previously mentioned "bridge". Bridging is simply building your own custom modules that aren't provided by the default Components given by React.

Now you may find the folder where your MainActivity.java file is located. In this folder we are going to add two files: SharedStorage.java and SharedStoragePackager.java.

In the first file we are going to add the code written below. This code includes a set() method that we're going to use later to set some data in the shared storage.

So, let's add the following code to out SharedStorage.java file:

// PUT YOUR PACKAGE NAME HERE, IT'S THE SAME AS IN MainApplication.java
package com.yourpackage;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import android.app.Activity;
import android.appwidget.AppWidgetManager;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.util.Log;

public class SharedStorage extends ReactContextBaseJavaModule {
    ReactApplicationContext context;

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

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

    @ReactMethod
    public void set(String message) {
        SharedPreferences.Editor editor = context.getSharedPreferences("DATA", Context.MODE_PRIVATE).edit();
        editor.putString("appData", message);
        editor.commit();

        // CHANGE TO THE NAME OF YOUR WIDGET
        Intent intent = new Intent(getCurrentActivity().getApplicationContext(), Widget.class);
        intent.setAction(AppWidgetManager.ACTION_APPWIDGET_UPDATE);
        // CHANGE TO THE NAME OF YOUR WIDGET
        int[] ids = AppWidgetManager.getInstance(getCurrentActivity().getApplicationContext())
                .getAppWidgetIds(new ComponentName(getCurrentActivity().getApplicationContext(), Widget.class));
        intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS, ids);
        getCurrentActivity().getApplicationContext().sendBroadcast(intent);

    }
}

Be sure to replace com.yourpackage with your own package name, and Widget.class with the class you created.

As you can see, in the method set() we can now use SharedPreferences object. This object points to a file containing key-value pairs and provides simple methods to read and write them.

The second file is the one that will allow us to use SharedStorage as a native module. So update your SharedStoragePackager.java file like this:

// PUT YOUR PACKAGE NAME HERE, IT'S THE SAME AS IN MainApplication.java
package com.yourpackage;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
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 SharedStoragePackager 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 SharedStorage(reactContext));

        return modules;
    }

}

Again make sure your package name is written correctly at the beginning of the code.

Now that we added the files, we have to import our SharedStoragePackager in the MainApplication.java file. Add the following line to your getPackages() method:

packages.add(new SharedStoragePackager());

It should look something like this:

4. Layout

To start editing the layout, let's check which other files Android Studio created in our project.

Navigate to res > layout.
Here, we can update the interface of our widget. We can add different view elements and styles to the XML file in order to change the widget's appearance.

We can style our Android widget in two ways:

Drag and drop options directly from Android Studio
Adding layout elements to our XML file manually

Drag and drop method

Let's take a look at the first method.
By accessing our XML file (res > layout > XML code) from the Android Studio we are able to browse through a Palette menu and simply drag and drop any element we need.

Underneath the Palette menu you may also find a Component Tree. This window shows us exactly how our elements are being nested in the widget layout.

Manual method

Another way to customize the look of our widget includes opening the XML file through the editor and put in our own elements manually.

Take a note of the android:id attribute since you are going to use it later to access these View components from Java code.

For additional information on these attributes and descriptions, and how to configure your widget, click here.

In the values folder you can set up additional information such as strings, styles, colours, themes...

If, for any reason, you want to edit the configuration properties (eg. minimum height/width) that you set at the very beginning, you can do so by opening barcode_widget_info.xml located in the res > xml folder.

Here you can also set the preview image that will be displayed in the widget gallery. This is done by editing the android:previewImage attribute and importing a new PNG image in drawable-nodpi folder.

Take note of the text that follows after @layout/. In our example this is "barcode_widget". (@layout/barcode_widget)
This information serves as a unique identification and will be crucial later on when we edit data from the java code.

Notice that here we are using targetCellWidth and targetCellHeight displayed in cells for Android 12 and more. For lower versions of Android, make sure that you have set minWidth and minHeight since the previous two attributes would be ignored. (Here you can find more information about these attributes.)

5. Setting the data from the React Native app

If we run our code now - we will be able to see our widget in the widget library, but still no data from our app will be shown.

To display our own data, we have to open our App.js file and try setting the barcode string value in our newly created SharedStorage module.

First, import the native module.

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

Then add this anywhere to your code:

let barcode = "1234567"
useEffect(() => {
  if (Platform.OS === 'android') {
    SharedStorage.set(JSON.stringify({barcode: barcode}))
  }
}, [barcode])

As shown above, we are using the set method from SharedStorage class to set the barcode value to a key barcode.

This is pretty much it for the React Native part, now let's go to our BarcodeWidget.java file that was created in the same folder as MainApplication.java.

6. Updating the widget content

Check out the updateAppWidget() method since this is where we are going to do all the logics. This method is responsible for updating the widget content.

We also need to modify our BarcodeWidget class by adding the SharedPreferences object. This object helps us get the data we set earlier in our App.js file.

import org.json.JSONException;
import org.json.JSONObject;
import android.content.SharedPreferences;
...

static void updateAppWidget(Context context, AppWidgetManager appWidgetManager, int appWidgetId) {

 try {
  SharedPreferences sharedPref = context.getSharedPreferences("DATA", Context.MODE_PRIVATE);
  String appString = sharedPref.getString("appData", "{\"text\":'no data'}");
  JSONObject appData = new JSONObject(appString);
  // Construct the RemoteViews object
  RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.barcode_widget);
  views.setTextViewText(R.id.appwidget_text, appData.getString("barcode"));
  // Instruct the widget manager to update the widget
  appWidgetManager.updateAppWidget(appWidgetId, views);
 } catch (JSONException e) {
  e.printStackTrace();
 }
}

To access specific value from the storage we will use:

appData.getString("barcode")

The argument of the getString method is the key that we set in React Native app with SharedStorage.set() method.

Also, don't forget to change "barcode_widget" in R.layout.barcode_widget to your own widget id (located in barcode_widget_info.xml file that we talked about earlier).

If we run the app again the text displayed on your widget will finally be the same as the one we set in the React Native app.

Let's quickly go back to our updateAppWidget() method. To access any element in the widget layout XML file we are going to use RemoteView.

In our example, we used the setTextViewText() method to set content description to our TextView component.

The first argument is the id of the view component and the second is the value.

For more details about this class and other methods you can use, check this link.

7. Generating the barcode image from a string value

Finally, we are going to modify our BarcodeWidget.java class so it can generate a barcode image from the barcode string we sent before.

Add following functions and imports to the BarcodeWidget class:

import com.google.zxing.BarcodeFormat;
import com.google.zxing.MultiFormatWriter;
import com.google.zxing.WriterException;
import com.google.zxing.common.BitMatrix;
import android.graphics.Bitmap;

public class BarcodeWidget extends AppWidgetProvider {

  private static int size_width = 720;
  private static int size_height = 244;
  public static Bitmap createBarcode(String barcodeText) {
    Bitmap bitmap = null;
    try {
      bitmap = CreateImage(barcodeText);
    } catch (WriterException we) {
      we.printStackTrace();
    }

    return bitmap;
  }

  public static Bitmap CreateImage(String message) throws WriterException {
      BitMatrix bitMatrix = new MultiFormatWriter().encode(message, BarcodeFormat.CODE_128, size_width, size_height);

      int width = bitMatrix.getWidth();
      int height = bitMatrix.getHeight();
      int [] pixels = new int [width * height];
      for (int i = 0 ; i < height ; i++) {
        for (int j = 0 ; j < width ; j++) {
          if (bitMatrix.get(j, i)) {
            pixels[i * width + j] = 0xff000000;
          } else {
            pixels[i * width + j] = 0xffffffff;
          }
        }
      }
      Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
      bitmap.setPixels(pixels, 0, width, 0, 0, width, height);
      return bitmap;
  }
...
}

As shown above, we are using the zxing library here, so we should update the build.gradle file with the following code:

implementation 'com.google.zxing:core:3.5.1'

The CreateImage() method is going to generate a bitmap from the string that we sent as an argument. It works by setting the value of a pixel to either black or white.

There are also many different format options when creating a bit matrix. We are going to use CODE128. For other options check this link.

Now, let's call this function in the updateAppWidget() method:

static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                                int appWidgetId) {
  try {
    SharedPreferences sharedPref = context.getSharedPreferences("DATA", Context.MODE_PRIVATE);
    String appString = sharedPref.getString("appData", "{\"text\":'no data'}");
    JSONObject appData = new JSONObject(appString);

    // Construct the RemoteViews object
    RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.barcode_widget);
    views.setTextViewText(R.id.appwidget_text, appData.getString("barcode"));
    Bitmap myBitmap = createBarcode(appData.getString("barcode"));

    // Instruct the widget manager to update the widget
    appWidgetManager.updateAppWidget(appWidgetId, views);
  } catch (JSONException e) {
    e.printStackTrace();
  }
}

To display our image we need to add the ImageView component to our barcode_widget.xml file located in layout folder:

<RelativeLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <ImageView
    android:id="@+id/imageView_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</RelativeLayout>

Again, pay attention to the id attribute (imageView_id) that we are going to use to get the current ImageView component:

static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                                int appWidgetId) {
  try {
    SharedPreferences sharedPref = context.getSharedPreferences("DATA", Context.MODE_PRIVATE);
    String appString = sharedPref.getString("appData", "{\"text\":'no data'}");
    JSONObject appData = new JSONObject(appString);

    // Construct the RemoteViews object
    RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.barcode_widget);
    views.setTextViewText(R.id.appwidget_text, appData.getString("barcode"));

    //setting up Bitmap image we created from barcode string to ImageView
    Bitmap myBitmap = createBarcode(appData.getString("barcode"));
    views.setImageViewBitmap(R.id.imageView_id, myBitmap);

    // Instruct the widget manager to update the widget
    appWidgetManager.updateAppWidget(appWidgetId, views);
  } catch (JSONException e) {
    e.printStackTrace();
  }
}

8. The end

Now, the only thing that's left is to run the application again.

Your widget should now display both the text and the generated image. If this is the case - then we are done!

You can now play around with the design and customize your widget further by adding more attributes and styles to your barcode layout xml file.

Hope this tutorial helped you and good luck with your project!

Combining Drawer, Tab and Stack navigators in React Navigation 6 (part 2)

Anja Miletic — Mon, 18 Oct 2021 14:57:35 +0000

Originally published at https://blog.deversity.com/2021/10/combining-drawer-tab-and-stack_15.html

This is part 2 of a 2-part react navigation tutorial **Combining Drawer, Tab and Stack navigators in React Navigation 6. If you haven't read that yet, please read it first here

Implementing navigation such that the Drawer and Tab navigators are visible in every screen isn't a simple task. Simply put, the react navigation library is not designed in a way that this functionality is ready out-of-the-box.

When working with nested navigators, the navigation UI of the child navigator is present only in the screens which it contains. Because of this, in order to have BottomTabNavigator in every screen, it must contain every screen.

Since TabNavigator will contain all of our stacks, the only screen present in DrawerNavigator now becomes TabNavigator. But we still want to render 'Home', 'My Rewards' and 'Location' routes in the drawer. We'll refactor CustomDrawerContent to render a custom list of items. To get the focused route, we'll use a reference to the navigation object defined in App.js. Let's begin!

Route items

For each screen we'll have a configuration object that we'll store in an array. Remember that TabNavigator is a screen as well, contained within DrawerNavigator as a Drawer.Screen:

navigation/RouteItems.js

import * as React from 'react'
import Icon from 'react-native-vector-icons/FontAwesome'

export const screens = {
  HomeTab: 'HomeTab',
  HomeStack: 'HomeStack',
  Home: 'Home',
  BookStack: 'BookStack',
  Book: 'Book',
  ContactStack: 'ContactStack',
  Contact: 'Contact',
  MyRewardsStack: 'MyRewardsStack',
  MyRewards: 'MyRewards',
  LocationsStack: 'LocationsStack',
  Locations: 'Locations',
}

export const routes = [
  {
    name: screens.HomeTab,
    focusedRoute: screens.HomeTab,
    title: 'Home',
    showInTab: false,
    showInDrawer: false,
    icon: (focused) =>
      <Icon name="home" size={30} color={focused ? '#551E18' : '#000'} />,
  },
  {
    name: screens.HomeStack,
    focusedRoute: screens.HomeStack,
    title: 'Home',
    showInTab: true,
    showInDrawer: true,
    icon: (focused) =>
      <Icon name="home" size={30} color={focused ? '#551E18' : '#000'} />,
  },
  {
    name: screens.Home,
    focusedRoute: screens.HomeStack,
    title: 'Home',
    showInTab: true,
    showInDrawer: false,
    icon: (focused) =>
      <Icon name="home" size={30} color={focused ? '#551E18' : '#000'} />,
  },

  {
    name: screens.BookStack,
    focusedRoute: screens.BookStack,
    title: 'Book Room',
    showInTab: true,
    showInDrawer: false,
    icon: (focused) =>
      <Icon name="bed" size={30} color={focused ? '#551E18' : '#000'} />,
  },

  {
    name: screens.Book,
    focusedRoute: screens.BookStack,
    title: 'Book Room',
    showInTab: true,
    showInDrawer: false,
    icon: (focused) =>
      <Icon name="bed" size={30} color={focused ? '#551E18' : '#000'} />,
  },

  {
    name: screens.ContactStack,
    focusedRoute: screens.ContactStack,
    title: 'Contact Us',
    showInTab: true,
    showInDrawer: false,
    icon: (focused) =>
      <Icon name="phone" size={30} color={focused ? '#551E18' : '#000'} />,
  },
  {
    name: screens.Contact,
    focusedRoute: screens.ContactStack,
    title: 'Contact Us',
    showInTab: false,
    showInDrawer: false,
    icon: (focused) =>
      <Icon name="phone" size={30} color={focused ? '#551E18' : '#000'} />,
  },

  {
    name: screens.MyRewardsStack,
    focusedRoute: screens.MyRewardsStack,
    title: 'My Rewards',
    showInTab: false,
    showInDrawer: true,
    icon: (focused) =>
      <Icon name="star" size={30} color={focused ? '#551E18' : '#000'} />,
  },
  {
    name: screens.MyRewards,
    focusedRoute: screens.MyRewardsStack,
    title: 'My Rewards',
    showInTab: false,
    showInDrawer: false,
    icon: (focused) =>
      <Icon name="star" size={30} color={focused ? '#551E18' : '#000'} />,
  },

  {
    name: screens.LocationsStack,
    focusedRoute: screens.LocationsStack,
    title: 'Locations',
    showInTab: false,
    showInDrawer: true,
    icon: (focused) =>
      <Icon name="map-marker" size={30} color={focused ? '#551E18' : '#000'} />,
  },
  {
    name: screens.Locations,
    focusedRoute: screens.LocationsStack,
    title: 'Locations',
    showInTab: false,
    showInDrawer: false,
    icon: (focused) =>
      <Icon name="map-marker" size={30} color={focused ? '#551E18' : '#000'} />,
  },
]

Regardless of the navigation style I always use screens and routes to have a centralised place to make changes. Let's jump to BottomTabNavigator:

BottomTabNavigator.js

...
import { Text, StyleSheet, View } from 'react-native'
import { routes, screens } from './RouteItems'
import MyRewardsStackNavigator from './stack-navigators/MyRewardsStackNavigator'
import LocationsStackNavigator from './stack-navigators/LocationsStackNavigator'

const Tab = createBottomTabNavigator()

const tabOptions = ({ route }) => {
  const item = routes.find(routeItem => routeItem.name === route.name) // get the route config object

  if (!item.showInTab) { // hide this tab
    return {
      tabBarButton: () => <View style={{ width: 0 }} />,
      headerShown: false,
      tabBarStyle: styles.tabContainer,
      title: item.title,
    }
  }

  return {
    tabBarIcon: ({ focused }) => item.icon(focused),
    tabBarLabel: () => (
      <Text style={styles.tabBarLabel}>{item.title || ''}</Text>
    ),
    headerShown: false,
    tabBarStyle: styles.tabContainer,
    title: item.title,
  }
}

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator screenOptions={tabOptions}>
      <Tab.Screen name={screens.HomeStack} component={HomeStackNavigator} />
      <Tab.Screen name={screens.BookStack} component={BookStackNavigator} />
      <Tab.Screen name={screens.ContactStack} component={ContactStackNavigator} />

      {/* new stacks */}
      <Tab.Screen name={screens.MyRewardsStack} component={MyRewardsStackNavigator} /> 
      <Tab.Screen name={screens.LocationsStack} component={LocationsStackNavigator} />
    </Tab.Navigator>
  )
}

const styles = StyleSheet.create({
  tabBarLabel: {
    color: '#292929',
    fontSize: 12,
  },
  tabContainer: {
    height: 60,
  }
})
...

We've added 'MyRewardsStack' and 'LocationsStack' as tab screens. Only routes with showInTab: true will render a tab. If you comment-out the if (!item.showInTab) section, you'll get all of the tabs rendered:

With the full code, the page looks the same as before:

Note also that now the screen names aren't hardcoded, we're using the screens object to supply the names.

Let's jump to DrawerNavigator:

DrawerNavigator.js

...
import { routes, screens } from './RouteItems'

const Drawer = createDrawerNavigator()

const CustomDrawerContent = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      {
        routes.filter(route => route.showInDrawer).map((route, index) => {
          const focused = index === props.state.index
          return (
            <DrawerItem
              key={route.name}
              label={() => (
                <Text style={focused ? styles.drawerLabelFocused : styles.drawerLabel}>
                  {route.title}
                </Text>
              )}
              onPress={() => props.navigation.navigate(route.name)}
              style={[styles.drawerItem, focused ? styles.drawerItemFocused : null]}
            />
          )
        })
      }
    </DrawerContentScrollView>
  )
}

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={({ navigation }) => ({
        headerStyle: {
          backgroundColor: '#551E18',
          height: 50,
        },
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.toggleDrawer()} style={styles.headerLeft}>
            <Icon name="bars" size={20} color="#fff" />
          </TouchableOpacity>
        ),
      })}
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    >
      <Drawer.Screen name={screens.HomeTab} component={BottomTabNavigator} options={{
        title: 'Home',
        headerTitle: () => <Image source={require('../assets/hotel_logo.jpg')} />,
        headerRight: () => (
          <View style={styles.headerRight}>
            <Icon name="bell" size={20} color="#fff" />
          </View>
        ),
      }}/>
    </Drawer.Navigator>
  )
}
...

Now we've removed 'MyRewardsStack' and 'LocationsStack', and are rendering selected routes (in the previous code we rendered all of the Drawer.Screens, which in this case would be only HomeTabs screen). We have an issue right now - the focused check will not work since props.state.index will always return 0, we're always in BottomTabNavigator screen:

As a workaround, we need to find out the current route, and we'll do that using a reference to the navigation object.

App.js

import React, { createRef } from 'react'
import { SafeAreaView, StatusBar, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'

import DrawerNavigator from './src/navigation/DrawerNavigator'

// store reference to navigation object
const navigationRef = createRef()
const nav = () => navigationRef.current

const App = () => {
  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" />
      <NavigationContainer ref={navigationRef}>
          <DrawerNavigator nav={nav} />
      </NavigationContainer>
    </SafeAreaView>
  )
}

We're sending this reference as a prop to DrawerNavigator where we can use it to check the focused route:

DrawerNavigator.js

const CustomDrawerContent = (props) => {
  const currentRouteName = props.nav()?.getCurrentRoute().name // get focused route name
  return (
    <DrawerContentScrollView {...props}>
      {
        routes.filter(route => route.showInDrawer).map((route) => {
          const focusedRouteItem = routes.find(r => r.name === currentRouteName) // get route item config object
          const focused = focusedRouteItem ?
            route.name === focusedRouteItem?.focusedRoute :
            route.name === screens.HomeStack
          return (
            <DrawerItem
              key={route.name}
              label={() => (
                <Text style={focused ? styles.drawerLabelFocused : styles.drawerLabel}>
                  {route.title}
                </Text>
              )}
              onPress={() => props.navigation.navigate(route.name)}
              style={[styles.drawerItem, focused ? styles.drawerItemFocused : null]}
            />
          )
        })
      }
    </DrawerContentScrollView>
  )
}

const DrawerNavigator = ({ nav }) => {
  return (
    <Drawer.Navigator
      ...
      drawerContent={(props) => <CustomDrawerContent {...props} nav={nav} />}
      ...

In the first render the getCurrentRoute() will return undefined, in that case we know that the focused route is HomeStack. We then, for each Drawer route, check if its name matches the focusedRouteItem.focusedRoute. For example, if we are on the MyRewards screen (or any other screen we would define in that stack), its focusedRoute would be MyRewardsStack. We get the desired result:

Conclusion

Using react navigation, we have implemented Drawer, Tab and Stack navigation such that the drawer and bottom tab UI is visible in every app route. We've added custom styles and components for Tabs, Headers and Drawer Items. We have also centralised our configuration for each route.

What's next?

For further customisation, you can start by exploring the screenOptions and options props. Perhaps add a HeaderRight component to Drawer's screenOptions, or add a tabBarBadge to Tab Navigators screen options.

When adding a new screen to any stack (or adding a new stack) make sure to add that screen's config to routes to make sure our navigators access all of the required information. Happy coding!

The complete project can be found on github

Combining Drawer, Tab and Stack navigators in React Navigation 6

Anja Miletic — Mon, 18 Oct 2021 14:56:32 +0000

Originally published at https://blog.deversity.com/2021/10/combining-drawer-tab-and-stack.html

Today we will be making use of the Drawer, Tab and Stack navigators. We will cover two cases:

a simpler scenario where we utilize the Tab Navigator in a single Drawer route
a more complicated flow where we want the Tab bar to be visible and accessible inside all our Drawer routes.

In this second example, we will try to overcome a design restriction of React Navigation - the different Navigators, if used together, can only be nested inside one another, and therefore can't be intertwined.

Introduction

Adding navigation to a React Native application is greatly helped by using React Navigation library. It provides different types of navigators, with plenty of customization power. In some simple cases we can get by with using just one navigator, but often times we are presented with a challenge to combine multiple types in an app.

The example chosen is to build an app for a hotel chain. Some of the features include booking a room at one of the hotels, browsing the different locations and using reward points. Here is a preview of what we will be building:

We can see right away the use of Drawer and Tab navigators. We will also implement each of the routes as a Stack Navigator, since we now that, for instance, the Book flow will contain multiple screens.

Getting started

(if this is your first React Native project, please read the official getting started guide before continuing)

Let's initialise a new project. In your terminal, navigate to an empty directory and run the following command:

$ npx react-native init NavigationDemo --version 0.64.2

The react version installed at the time of writing was 17.0.2, while the react-native version was 0.64.2.

Next, let's install react navigation and its dependencies:

$ npm install @react-navigation/native react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated @react-navigation/stack @react-navigation/drawer @react-navigation/bottom-tabs

If you're developing for IOS, you also need to install the pods:

$ cd ios; npx pod install; cd ..

Replace the contents of your App.js file with the following code:

import React from 'react'
import { SafeAreaView, View, StatusBar, StyleSheet, Text } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" />
      <View>
        <Text>Hello navigation!</Text>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    overflow: 'hidden',
  },
})

export default App

Stack and Drawer navigators

Now we can go about adding the different navigators to our app. Remember, for this first example we want the DrawerNavigator to be the main (always visible) navigator in our app, with the BottomTabNavigator visible if the Home route is focused in the Drawer. Let’s begin by adding the following file structure in our project (all the files remain empty for now):

You can download the hotel_logo from the github repo provided at the end of this tutorial, or use your own. Next, we will create our Drawer Navigator that contains three routes (our Stack Navigators). For now, the stacks will contain a single screen defined directly in the stack file. In a real app, the stack can contain many screens, but it's important to have at least one. Following are the contents of the stack files:

HomeStackNavigator.js:

import React from 'react'
import { View, Text } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

const Home = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Home screen!</Text>
  </View>
)

const HomeStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{
      headerShown: false,
    }}>
      <Stack.Screen name="Home" component={Home} />
    </Stack.Navigator>
  )
}

export default HomeStackNavigator

MyRewardsStackNavigator.js:

import React from 'react'
import { View, Text } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

const MyRewards = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>MyRewards screen!</Text>
  </View>
)

const MyRewardsStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{
      headerShown: false,
    }}>
      <Stack.Screen name="MyRewards" component={MyRewards} />
    </Stack.Navigator>
  )
}

export default MyRewardsStackNavigator

LocationsStackNavigator.js:

import React from 'react'
import { View, Text } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

const Locations = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Locations screen!</Text>
  </View>
)

const LocationsStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{
      headerShown: false,
    }}>
      <Stack.Screen name="Locations" component={Locations} />
    </Stack.Navigator>
  )
}

export default LocationsStackNavigator

We will explain screenOptions in a moment. Now that we have defined our drawer stack navigators, we can create the DrawerNavigator:

DrawerNavigator.js:

import * as React from 'react'
import { createDrawerNavigator } from '@react-navigation/drawer'

import HomeStackNavigator from './stack-navigators/HomeStackNavigator'
import MyRewardsStackNavigator from './stack-navigators/MyRewardsStackNavigator'
import LocationsStackNavigator from './stack-navigators/LocationsStackNavigator'

const Drawer = createDrawerNavigator()

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="HomeStack" component={HomeStackNavigator} />
      <Drawer.Screen name="MyRewardsStack" component={MyRewardsStackNavigator} />
      <Drawer.Screen name="LocationsStack" component={LocationsStackNavigator} />
    </Drawer.Navigator>
  )
}

export default DrawerNavigator

And add it to our NavigationContainer in App.js

...
import { NavigationContainer } from '@react-navigation/native'
import DrawerNavigator from './src/navigation/DrawerNavigator'

const App = () => {
  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" />
      <NavigationContainer>
          <DrawerNavigator />
      </NavigationContainer>
    </SafeAreaView>
  )
}
...

Let's run our code to see the results so far. Run

$ npx react-native start

to start the Metro bundler. Then, in a separate terminal, run

$ npx react-native run-android

$ npx react-native run-ios

depending on which platform you're developing for (run both one after the other if you want to simultaneously work on both platforms).
We can see the result now. We have React Navigation's default header, an icon to open the drawer, and our stacks in the drawer menu. We can navigate freely between those stacks.

Now let's circle back to the screenOptions we defined in the stack navigators. Try setting headerShown: true in HomeStackNavigator and observe what happens:

The Home component's header is rendered below the Drawer Navigator's. This is because the parent navigator's UI is rendered on top of child navigator. Since we obviously want only one header, specifying headerShown: false for each of the stack navigator's screenOptions hides the default stack header. Note that the title displayed in the drawer header is HomeStack, not Home. If we were to navigate to another screen in HomeStack, the title would not change. Could we have kept the Stack header and hidden the Drawer header? Yes! But for now, we want the default Drawer header as it provides us with an easy way to open the drawer - by pressing the menu icon in the header.

Tab navigator

We have added Drawer navigation to our app, and defined stack navigators with screens to add to our drawer menu. Now we need to add tab navigation to our Home Route. Firstly, lets define Book and Contact stack navigators in the same way as before:

BookStackNavigator.js:

import React from 'react'
import { View, Text } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

const Book = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Book screen!</Text>
  </View>
)

const BookStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{
      headerShown: false,
    }}>
      <Stack.Screen name="Book" component={Book} />
    </Stack.Navigator>
  )
}

export default BookStackNavigator

ContactStackNavigator.js:

import React from 'react'
import { View, Text } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

const Contact = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Contact screen!</Text>
  </View>
)

const ContactStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{
      headerShown: false,
    }}>
      <Stack.Screen name="Contact" component={Contact} />
    </Stack.Navigator>
  )
}

export default ContactStackNavigator

Now let's create our Tab Navigator.

BottomTabNavigator

import * as React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import HomeStackNavigator from './stack-navigators/HomeStackNavigator'
import BookStackNavigator from './stack-navigators/BookStackNavigator'
import ContactStackNavigator from './stack-navigators/ContactStackNavigator'

const Tab = createBottomTabNavigator()

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator screenOptions={{
      headerShown: false,
    }}>
      <Tab.Screen name="HomeStack" component={HomeStackNavigator} />
      <Tab.Screen name="BookStack" component={BookStackNavigator} />
      <Tab.Screen name="ContactStack" component={ContactStackNavigator} />
    </Tab.Navigator>
  )
}

export default BottomTabNavigator

Notice how the first tab screen we added is the HomeStack, which we have already added in DrawerNavigator. In fact, you can think of BottomTabNavigator as a container of stacks, with the initial stack being HomeStack. Since in HomeStack we have a Home screen, the initial screen being rendered in the Tab navigator is the Home screen. And because we want to show this when the user is on the Home route in the drawer navigation, we will simply replace the HomeStackNavigator component in DrawerNavigator with BottomTabNavigator:

DrawerNavigator.js:

...
import BottomTabNavigator from './BottomTabNavigator'

const Drawer = createDrawerNavigator()

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="HomeTabs" component={BottomTabNavigator} />
      <Drawer.Screen name="MyRewardsStack" component={MyRewardsStackNavigator} />
      <Drawer.Screen name="LocationsStack" component={LocationsStackNavigator} />
    </Drawer.Navigator>
  )
}
...

Let's look at what we get:

When we are in the first route in DrawerNavigator, we can see the bottom tabs and navigate between them. If we move to another route in the Drawer, the tabs are no longer visible (since the tab navigator is just one of the drawer screens). We have again used headerShown: false to avoid rendering a double header.

Header and Tab design

We have implemented all our stacks, now we want to implement a few common requirements. Firstly, let's add icons to our tabs. For this project we will use the react-native-vector-icons package to access FontAwesome icons. The full installation guide can be found here. Once the installation process is complete, we can edit our BottomTabNavigator.js as follows:

import * as React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { Text, StyleSheet } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'

import HomeStackNavigator from './stack-navigators/HomeStackNavigator'
import BookStackNavigator from './stack-navigators/BookStackNavigator'
import ContactStackNavigator from './stack-navigators/ContactStackNavigator'

const Tab = createBottomTabNavigator()

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="HomeStack" component={HomeStackNavigator} options={{
        tabBarIcon: ({ focused }) => (
          <Icon name="home" size={30} color={focused ? '#551E18' : '#000'} />
        ),
        tabBarLabel: () => <Text style={styles.tabBarLabel}>Home</Text>
      }}
      />
      <Tab.Screen name="BookStack" component={BookStackNavigator} options={{
        tabBarIcon: ({ focused }) => (
          <Icon name="bed" size={30} color={focused ? '#551E18' : '#000'} />
        ),
        tabBarLabel: () => <Text style={styles.tabBarLabel}>Book Room</Text>
      }}
      />
      <Tab.Screen name="ContactStack" component={ContactStackNavigator} options={{
        tabBarIcon: ({ focused }) => (
          <Icon name="phone" size={30} color={focused ? '#551E18' : '#000'} />
        ),
        tabBarLabel: () => <Text style={styles.tabBarLabel}>Contact Us</Text>
      }}
      />
    </Tab.Navigator>
  )
}

const styles = StyleSheet.create({
  tabBarLabel: {
    color: '#292929',
    fontSize: 12,
  },
})

export default BottomTabNavigator

For each stack we have specified an icon and a tab label. tabBarIcon receives the focused prop, which we can use to highlight the current route (tabBarLabel can also receive this prop). There are many possibilities with options and screenOptions properties, some of which are explored at https://reactnavigation.org/docs/screen-options/.
Let's use screenOptions in Drawer Navigator to change the header and route names in the drawer menu:

DrawerNavigator.js:

import * as React from 'react'
import { View, StyleSheet, Image, Text, TouchableOpacity } from 'react-native'
import { createDrawerNavigator, DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer'
import Icon from 'react-native-vector-icons/FontAwesome'

import MyRewardsStackNavigator from './stack-navigators/MyRewardsStackNavigator'
import LocationsStackNavigator from './stack-navigators/LocationsStackNavigator'
import BottomTabNavigator from './BottomTabNavigator'

const Drawer = createDrawerNavigator()

const CustomDrawerContent = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      {
        Object.entries(props.descriptors).map(([key, descriptor], index) => {
          const focused = index === props.state.index
          return (
            <DrawerItem
              key={key}
              label={() => (
                <Text style={focused ? styles.drawerLabelFocused : styles.drawerLabel}>
                  {descriptor.options.title}
                </Text>
              )}
              onPress={() => descriptor.navigation.navigate(descriptor.route.name)}
              style={[styles.drawerItem, focused ? styles.drawerItemFocused : null]}
            />
          )
        })
      }
    </DrawerContentScrollView>
  )
}

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={({ navigation }) => ({
        headerStyle: {
          backgroundColor: '#551E18',
          height: 50,
        },
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.toggleDrawer()} style={styles.headerLeft}>
            <Icon name="bars" size={20} color="#fff" />
          </TouchableOpacity>
        ),
      })}
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    >
      <Drawer.Screen name="HomeTabs" component={BottomTabNavigator} options={{
        title: 'Home',
        headerTitle: () => <Image source={require('../assets/hotel_logo.jpg')} />,
        headerRight: () => (
          <View style={styles.headerRight}>
            <Icon name="bell" size={20} color="#fff" />
          </View>
        ),
      }}/>
      <Drawer.Screen name="MyRewardsStack" component={MyRewardsStackNavigator} options={{
        title: 'My Rewards',
        headerTitle: () => <Text style={styles.headerTitle}>My Rewards</Text>,
      }}/>
      <Drawer.Screen name="LocationsStack" component={LocationsStackNavigator} options={{
        title: 'Locations',
        headerTitle: () => <Text style={styles.headerTitle}>Our Locations</Text>,
      }}/>
    </Drawer.Navigator>
  )
}

const styles = StyleSheet.create({
  headerLeft: {
    marginLeft: 15,
  },
  headerTitle: {
    color: 'white',
    fontSize: 18,
    fontWeight: '500',
  },
  headerRight: {
    marginRight: 15,
  },
  // drawer content
  drawerLabel: {
    fontSize: 14,
  },
  drawerLabelFocused: {
    fontSize: 14,
    color: '#551E18',
    fontWeight: '500',
  },
  drawerItem: {
    height: 50,
    justifyContent: 'center'
  },
  drawerItemFocused: {
    backgroundColor: '#ba9490',
  },
})

export default DrawerNavigator

Let's breakdown all of the changes. First of all, looking at the Drawer Screens, we can change the header of each drawer item separately. You might not want to display a title when the user is in the Tab navigator, but maybe show the company's logo instead. The headerTitle prop accepts a string as well as a function - giving us a lot of possibilities for customisation. Furthermore, the title shown in the header can be different than the one shown in the drawer menu.

Next, we want to change the look of the header to fit better with our client's brand. We can do this by passing a function to DrawerNavigator's screenOptions and specifying header style and components. ScreenOptions also receives the route prop. We are passing a function to headerLeft that renders our menu icon, and toggles the drawer - this toggle function is available in the navigation object.

Finally, let's customise the Drawer menu. We only want to change the route item styles for now, and unfortunately there isn't a simple DrawerNavigation prop that enables us to do this. Instead, we must pass a custom drawerContent function that enables us to render a completely custom component for each item. We are using the passed props to iterate through these items, but we could also render more routes using <DrawerItem>, or add an image component at the top of <DrawerContentScrollView>, or any number of other options.

Conclusion

In this tutorial, we have combined Drawer, Tab and Stack navigators to create a simple navigation flow. We have then, through screenOptions, supplied customisation to get the look and feel we needed. In the next section, we will explore the problem of having both the Drawer and Tab navigations always visible and connected.

Part 2 of this tutorial can be found here

The complete project can be found on github

Scaling Postgres DB for better performance - per aspera ad Citus

Darko Zivanovic — Tue, 08 Oct 2019 10:49:12 +0000

Originally published at:
https://blog.deversity.com/2019/10/scaling-postgres-db-for-better.html

Not long ago we came across an issue with database scalability when working on a project for a client with expertise in data-driven management solutions. It threw both business growth and the project’s future into question. With a total size of around 3TB and number of rows that strive to 3 billions, we reached the limit of what a single-node Postgres database instance could do (in an acceptable manner). Read replicas were not effective because the application is write-intensive, and a significant lag was in evidence between the main node and replicas.

We tried various optimization techniques including ones from Postgres and in-memory processing and calculations, but we were still pushing the boundaries of scalability. As shown in the graph below, CPU was hit hard several times during the month.

The average number of disk read operations per second shows that out working set was almost completely in memory on a daily basis. Even we tried with scaling up the DB instance class to a class with more RAM, it didn’t result in a dramatic drop in ReadIOPS.

The average number of disk write operations per second also showed that our write-intensive processes put a really hard load on the DB, especially in the first couple of days of each month, which are always heavy on traffic.

In order to avoid stalling business growth for our client we needed to find a solution that would scale-out our database and improve querying performances. We were short on time and couldn’t allow developers to break from implementing new features and maintaining the project in general.

Attempt #1: DBA experts

Our first instinct was to consult a DBA expert on the matter and see whether particular configuration might alleviate our troubles. After consulting two seasoned PostgreSQL experts, all they could recommend was that we build our own custom Postgres cluster, to partition data on particular dimension and maintain it ourselves. Since our experience of introducing more parts to the system which requires maintenance from our team tells us that such action only leads to a technical debt, a fully-managed solution was more desirable in terms of reducing workload, and stress, and increasing maintainability.

Attempt #2: Amazon Aurora

Since the system was using AWS Relational Database Service (RDS), the next logical step was to try Aurora, a service from AWS. Aurora is a Postgres compatible database, that’s intended for high scalability. Unlike native Postgres, Aurora solves the problem of creating read replicas by replicating a storage layer through the AWS EBS infrastructure. It sounded like it could solve our problem with the replication lag, so we set out to try to migrate our existing native Postgres to AWS Aurora. We did it by creating an Aurora Read Replica out of our RDS Postgres instance. When the replica lag between the Postgres instance and the Aurora Read Replica went to zero, we stopped the replication. At that point, we promoted the Aurora Read Replica to the standalone Aurora Postgres cluster for reading and writing. Sadly, this migration gave us only a marginal performance increase and failed to provide a solution that was satisfactory in terms of performance.

Aurora uses distributed storage layer that is virtualized and sits on a proprietary virtualized storage system backed up by SSD, which is how they allow for greater speeds and greater number of IOPS. With Aurora in place we were able to execute a greater number of read and write operations per second, but heavy concurrent queries and transactions, even though faster, failed to provide results in an acceptable time frame. The reason behind this is most probably the fact that Aurora promises 3x performance improvement when it comes to Postgres, but what we needed was apparently at the greater order of magnitude.

Third time's a charm - Citus Cloud

Our quest for a managed solution continued, and soon afterwards, we stumbled upon Citus Cloud - a fully-managed distributed database as a service. As they state on their official website, Citus is an extension to Postgres that distributes your data and queries across nodes, so your database can scale and your queries are fast. It was important to us that the application would still be running on Postgres in order to reduce infrastructural changes and the need to re-architect everything from scratch. As stated above, Citus transforms Postgres into a distributed database by intelligently distributing your data and queries across multiple nodes. It was everything that DBA experts advised, but with the added benefit of being a managed solution.

Most SaaS applications already have a natural dimension on which to distribute data across nodes - dimensions such as tenant, customer, account etc. Our data model was potentially a good fit for a distributed database like Citus. Even though we had no previous experience of sharding or distributed databases, Citus seemed to be the best and fastest way to protect our development team throughput, and to scale out our database.

I’ll be honest with you - migration wasn’t entirely painless. Migrating an underlying infrastructure isn’t the most exciting job, especially when you know that premature changes could have a significant impact on the client’s business. There were a lot of things to do. We had to adjust the schema and queries all across the application. Even though Citus is a Postgres extension, it’s not a drop-in, magical replacement. Ok, it might be a bit magical.

Migrating our Postgres instance to Citus

Excellent documentation exists on the official Citus website, where they describe all the steps needed for migrating an existing application. Bellow are all the major steps we’ve taken during transition period.

Identifying a distribution strategy

The first step was to choose the distribution key and identify table types - distributed, referenced or local. In Citus, a distributed table is one that is spread across multiple server nodes. They divide each distributed table into multiple logical shards based on the distribution key (column). The best practice is to partition distributed tables by a common tenant_id column. This results in having all tenant’s data in one shard. Referenced tables are ones that are placed on all nodes in a Citus cluster and which you can then join against. All the tables that don’t need to be sharded because they’re small and not joined against, were left as standard Postgres tables.

Preparing source tables for migration

The second step was to modify the data structure for the application’s existing database by adding distribution keys and backfilling newly created columns. It was necessary to do this in small batches with time allotted for each, because updating missing values in those newly created columns led to an unacceptable load on the database.

Updating our Ruby on Rails app

The last step was to update the application code and queries to deal with the schema changes. Our client’s application is based on Ruby on Rails and what made our migrating process so smooth was the activerecord-multi-tenant gem which enabled us to scale-out by following the multi-tenant data model. This Ruby library is supported by the Citus core team and it evolved from their experience with other customers. You can find more details about this library here.

The following example describes Customer as the tenant model, and Payment model states that the payments table needs to have a customer_id column that references the customer to whom the payment belongs.

class Payment < ActiveRecord::Base

  multi_tenant :customer

  # ...

end

By adding multi_tenant :customer annotations to models, the library automatically takes care of including distribution key (customer_id) with all queries. In order for that to work, tenant always needs to be specified. One way is wrapping code in a block like this:

customer = Customer.find(session[:customer_id])

# ...

MultiTenant.with(customer) do
  payment = Payment.find(params[:payment_id])
  payment.update! updated_at: Time.current
end

We changed more than 100 files and modified 2000 lines of code before we were ready to use a distributed multi-tenant database like Citus. The most concerning issues were to find all places where Active Record generates queries and make sure that tenant_id is included wherever we query distributed tables. All model classes that reflect distributed tables had to be refactored in order to support multi-tenancy. Migrations meant for backfilling distributed tables took a significant amount of our time since we didn’t have tenant_id in all the tables that ended up as distributed ones.

Citus requires that primary keys contain the distribution column, so we had to modify primary keys of distributed tables and make them compound to include a tenant id. Making primary keys compound required modifying all the fabricators as well. Another thing to mention is that Citus errors out when you try to update the value of the distribution column. As a consequence, we had to prevent editing distribution table everywhere in the app where it was allowed before. Also, let's not forget how painful it was refactoring all the specs and features since our codebase exists for more than 6 years.

During migration we received tremendous assistance from Citus support and core teams, who were incredibly helpful. We really enjoyed learning from them.

Results

After migration, we succeeded in the most important aspect - our client doesn’t have to worry about how to manage its growth. Citus Cloud provides self-service scaling to deal with an increased load, by means of a web interface that makes it easy to either add new nodes or increase memory and CPU capacity for existing nodes. Naturally, managed database comes with a price. We were aware that the database bill is going to get larger once we migrated to Citus Cloud. Since we have multiple testing environments, we couldn’t afford having DB formations of the same size as production one. As an alternative, we setup multiple development formations that allow only 2 nodes with the maximum capacity of 8GB RAM, 4 vCPUs and 100GB of storage. When that’s not good enough to ensure that our application is rigorously tested before it is deployed, we fork production formation for that purpose only. There is a catch there. You can’t decrease the number of nodes. That leads to having really expensive staging formation that we tend to get rid off as soon as we’re done with testing.

Even though our bill increased by 20% for production DB instance only, our development team is now focused on the application business logic and not maintaining the database, which was our goal from the start. Previously, we worried about performance and running out of memory on our single-node Postgres instance. Even though we’re still really careful, we don’t need to tell our data team and other developers not to use certain “expensive” and “heavy” SQL features. CPU utilization is equally distributed across nodes. Database operations are much faster. We’re now able to execute some heavy aggregate functions on the whole data set which were in the domain of science fiction before we introduced Citus as our DB. This significant improvement in speed and performance is best reflected by the comments we’ve received from the client’s business intelligence and data teams:

FREAKING AWESOME!
So good I almost sharded myself. (pun intended)
For all I grouped about the Citus changes, the database runs stuff REALLY fast now. It’s super nice.
Awesome job on all the Citus stuff, it goes sooo much faster!
This is a huge accomplishment!
This is huge news! Thank you to the whole team for all the hard work on this.

Until the next success story...

P. S. We have no affiliation with Citus Cloud whatsoever, after a long (and moderately painful) migration, now we’re just a happy customer.