Google offers cloud notification service through Firebase Cloud Messaging(FCM) on Android devices and Apple Push Notification service (APNs) for iOS devices.

While you are building with Expo, you don't have direct access to those tools and infrastructure provided by mobile OS vendors.

In this article, we will build our cloud notification service for the Expo app to be used internally by the marketing or sale team.

Subscribe and collect device notification push tokens.

To receive notifications, the app must collect a device push notification token which is unique for each device, and save it in the database to be used later.

Expo offers a package to collect those push tokens - https://docs.expo.dev/versions/latest/sdk/notifications/

import { useState, useEffect, useRef } from "react";
import { Text, View, Button, Platform } from "react-native";
import * as Device from "expo-device";
import * as Notifications from "expo-notifications";

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

export default function App() {
  const [expoPushToken, setExpoPushToken] = useState("");
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    registerForPushNotificationsAsync().then((pushToken) => {
      // Save notification push token on your  database to be used later..

      setExpoPushToken(pushToken);
    });

    notificationListener.current =
      Notifications.addNotificationReceivedListener((notification) => {
        setNotification(notification);
      });

    responseListener.current =
      Notifications.addNotificationResponseReceivedListener((response) => {
        console.log(response);
      });

    return () => {
      Notifications.removeNotificationSubscription(
        notificationListener.current
      );
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  }, []);

  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "space-around",
      }}
    >
      <Text>Your expo push token: {expoPushToken}</Text>
    </View>
  );
}

async function registerForPushNotificationsAsync() {
  let token;

  if (Platform.OS === "android") {
    await Notifications.setNotificationChannelAsync("default", {
      name: "default",
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: "#FF231F7C",
    });
  }

  if (Device.isDevice) {
    const { status: existingStatus } =
      await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== "granted") {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== "granted") {
      alert("Failed to get push token for push notification!");
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log(token);
  } else {
    alert("Must use physical device for Push Notifications");
  }

  return token;
}

Push notification to subscribed users

Once the user subscribed and the app collects a push token, we can send a notification to those users.

Expo offers Expo's Push API service which is built on top of Google and Apple's own notification services.

function sendNotification(pushToken, title, body) {
  fetch("https://exp.host/--/api/v2/push/send", {
    method: "POST",
    body: JSON.stringify({
      to: tokenToSend,
      sound: "default",
      title: title,
      body: body,
      data: { title, body },
      channelId: "default",
    }),
  });
}

We can use sendNotification function to push various types of notifications to target users.

// Promotion notifications
sendNotification(
  "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
  "Black Friday 25% OFF",
  "Exclusive for you until Monday"
);

// Event notifications
sendNotification(
  "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
  "Account upgaraded",
  "You are now eligible for premium features.."
);

You can build your dashboard where the marketing team member writes the notification title and body, and select target users to receive that notification or any other automated notification solution.

Further Reading :

Expo Push Service - https://docs.expo.dev/push-notifications/sending-notifications/

Google Cloud Messaging (FCM) - https://firebase.google.com/docs/cloud-messaging/

Apple Push Notification service (APNs - https://developer.apple.com/documentation/usernotifications/registering_your_app_with_apns

Request a device media library files access permission

Both iOS and Android require a user to grant access to the app before reading or writing to the media library.

Throughout this article, we will use expo-image-picker to request permission and upload an image from the media library.

// hasMediaLibraryPermissionGranted.js

import * as ImagePicker from "expo-image-picker";

const hasMediaLibraryPermissionGranted = async () => {
  let granted =  false;

  const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();

  if (!permission.canAskAgain || permission.status === "denied") {
    granted = false;

  }

  if (permission.granted) {
    granted = true;
  }

  return granted;
};

export default hasMediaLibraryPermissionGranted

Upload image from device media library

expo-image-picker exposes ImagePicker.launchImageLibraryAsync method to select image or video and copy to app cache then return file Universal Resource Identifier (URI) path.

// uploadImageFromDevice.js

const uploadImageFromDevice = async () => {
  let imgURI = null;
  const storagePermissionGranted = await hasMediaLibraryPermissionGranted();

  // Discard execution when  media library permission denied
  if (!storagePermissionGranted) return imgURI;

  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 4],
    quality: 1,
  });

  if (!result.cancelled) {
    imgURI = result.uri;
  }

  return imgURI;
};

export default uploadImageFromDevice;

Fetch uploadable image binary data.

The URI return by ImagePicker.launchImageLibraryAsync is a reference to the cached image and doesn't hold the image data.

Most cloud storage providers including Firebase Cloud Storage support a binary large object (BLOB) for uploading various files types.

Let us fetch BLOB data from an image URI .

// getBlobFroUri.js

const getBlobFroUri = async (uri) => {
  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", uri, true);
    xhr.send(null);
  });

  return blob;
};



export default getBlobFroUri

Upload Binary data to Firebase Cloud Storage

Image BLOB data are ready now, Firebase provides a cloud object storage service with the free-tier plan for an early-stage app.

// manageFileUpload.js


import firebase from "firebase";

const manageFileUpload = async (
  fileBlob,
  { onStart, onProgress, onComplete, onFail }
) => {
  const imgName = "img-" + new Date().getTime();

  const storageRef = firebase.storage().ref(`images/${imgName}.jpg`);

  console.log("uploading file", imgName);

  // Create file metadata including the content type
  const metadata = {
    contentType: "image/jpeg",
  };

  // Trigger file upload start event
  onStart && onStart();
  const uploadTask = storageRef.put(fileBlob, metadata);
  // Listen for state changes, errors, and completion of the upload.
  uploadTask.on(
    "state_changed",
    (snapshot) => {
      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;

      // Monitor uploading progress
      onProgress && onProgress(Math.fround(progress).toFixed(2));
    },
    (error) => {
      // Something went wrong - dispatch onFail event with error  response
      onFail && onFail(error);
    },
    () => {
      // Upload completed successfully, now we can get the download URL

      uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
        // dispatch on complete event
        onComplete && onComplete(downloadURL);

        console.log("File available at", downloadURL);
      });
    }
  );
};

export default manageFileUpload;

Finally, Connect all pieces together

//App.js

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  Image,
  Platform,
  useWindowDimensions,
} from "react-native";
import Constants from "expo-constants";
import firebase from "./config/firebase";
import { AntDesign, Feather } from "@expo/vector-icons";
import uplodImageFromDevice from "./uploadImageFromDevice";
import getBlobFromUri from "./getBlobFromUri";
import manageFileUpload from "./manageFileUpload";
export default function App() {
  const [imgURI, setImageURI] = React.useState(null);

  const [isUploading, setIsUploading] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const [remoteURL, setRemoteURL] = React.useState("");

  const [error, setError] = React.useState(null);
  const { width } = useWindowDimensions();

  const handleLocalImageUpload = async () => {
    const fileURI = await uplodImageFromDevice();

    if (fileURI) {
      setImageURI(fileURI);
    }
  };

  const onStart = () => {
    setIsUploading(true);
  };

  const onProgress = (progress) => {
    setProgress(progress);
  };
  const onComplete = (fileUrl) => {
    setRemoteURL(fileUrl);
    setIsUploading(false);
    setImageURI(null);
  };

  const onFail = (error) => {
    setError(error);
    setIsUploading(false);
  };
  const handleCloudImageUpload = async () => {
    if (!imgURI) return;

    let fileToUpload = null;

    const blob = await getBlobFromUri(imgURI);

    await manageFileUpload(blob, { onStart, onProgress, onComplete, onFail });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Attach and upload image</Text>
      {Boolean(imgURI) && (
        <View>
          <Image
            source={{ uri: imgURI }}
            resizeMode="contain"
            style={{ width, height: width }}
          />
        </View>
      )}

      {!isUploading && (
        <View style={styles.row}>
          <AntDesign
            name="addfile"
            size={36}
            color={imgURI ? "green" : "black"}
            onPress={handleLocalImageUpload}
          />

          {Boolean(imgURI) && (
            <Feather
              name="upload-cloud"
              size={36}
              color="black"
              onPress={handleCloudImageUpload}
            />
          )}
        </View>
      )}

      {isUploading && (
        <View style={styles.uploadProgressContainer}>
          <Text> Upload {progress} of 100% </Text>
        </View>
      )}

      {Boolean(remoteURL) && (
        <View style={{ paddingVertical: 20 }}>
          <Text>
            Image has been uploaded at
            <Text style={{ color: "blue" }}> {remoteURL} </Text>
          </Text>
        </View>
      )}
    </View>
  );
}

Stuck with code and need 1:1 assistance. Ping me

What Is Infinite Scroll?

A design technique where, as the user scrolls down a page, more content automatically and continuously loads at the bottom, eliminating the user's need to click to the next page. The idea behind infinite scroll is that it allows people to enjoy a frictionless scrolling experience.

In this tutorial we will implement this design pattern with Firebase's Firestore database and Expo .

Despite relational databases like PostgreSQL, MySQL and others. Firestore is a document database and saves data in JSON-like format.

Firestore collection contains documents, the same SQL table contain records.

/**
* Firestore collection which documents data structure
*/
{
  "xyrt023": {
    "id": "xyrt02",
    "fullName": "Leonard M. Adleman",
    "knownFor": "Computational Complexity Theory, Cryptography",
    "bio": "Adleman was born in San Francisco...",
    "avatar": "https://res.cloudinary.com/highereducation/image/upload/h_300,w_180,c_scale,f_auto,q_auto:eco,/v1/TheBestSchools.org/leonard-adleman"
  },
  "y7rt0bb": {
    "id": "y7rt0bb",
    "fullName": " Frances E. Allen",
    "knownFor": "Compilers, Program optimization, Parallel computing",
    "bio": "Allen was born in the town of Peru....",
    "avatar": "https://res.cloudinary.com/highereducation/image/upload/h_300,w_180,c_scale,f_auto,q_auto:eco,/v1/TheBestSchools.org/frances-allen"
  },
  "qoft080": {
    "id": "qoft080",
    "fullName": " Timothy J. Berners-Lee",
    "knownFor": "Network design, World Wide Web, HTTP",
    "bio": "Berners-Lee was born in London in ....",
    "avatar": "https://res.cloudinary.com/highereducation/image/upload/h_300,w_180,c_scale,f_auto,q_auto:eco,/v1/TheBestSchools.org/timothy-berners-lee-1"
  }
}

With that knowledge, It's time to build a simple mobile app listing the most influential computer scientists.

Here the final app

Batching Stream of Content

Continuously stream content require fetching data as multiple batches with limited size. Ideally, each content batch has at least 10 items

When the app is initialized, we will fetch the initial batch includes 10 documents, and save the last document ID from the initial batch to use it as the starting point for the next batch and recursively for all next batches.

To make our life easier, Let write a function with the following responsibilities:

1. When the last document ID is not provided, it starts from the first document in the collection, otherwise starts after the last document from the previous batch.

2. For each batch, the function will return an object contains :

docs : array of documents in current batch.

lastDocId : last document ID from previous batch to be used as starting point for next batch.

status : asynchronous loading status which should be UNDETERMINED, PENDING, SUCCEEDED or FAILED .

error : returned by Firestore when something went wrong.

import firebase from "firebase";

const collection = firebase.firestore().collection("[COLLECTION_NAME_HERE]");

/**
 * Utilities function to extract documents in snapshots
 */

const extractSnapshots = (snapshots) => {
  let extracts = [];
  snapshots.forEach((documentSnapshot) => {
    extracts.push(documentSnapshot.data());
  });
  return extracts;
};

/**
 * Retrieve documents in batches of specified limit.
 * when last document  ID  provided, fetch documents after that
 * document (pagination query fetching)
 * @param {String} options.lastDocId -  ID of last document in previous batch
 * @param {Number} options.limit -  limit of documents per batch
 *
 * @returns - promise which will resolve into  object contains `docs`,`lastDoc`,`status`,`error`
 *
 */

const getDocs = async ({ lastDocId, limit = 10 }) => {
  let docs = []; // Array of docs in current bath
  let newLastDocId = null; // Last document ID in this batch
  let error = null;
  let batch;

  /***
   *  Fetching  documents is asynchronous operation,  It's good practice to
   *  to monitor each status of operation. Status should be UNDETERMINED, PENDING, SUCCEEDED
   *  or FAILED.
   */
  let status = "undetermined";

  try {
    /***
     * In case lastDocId provided, start after that document, otherwise
     * start on first document.
     */

    if (lastDocId) {
      const lastDoc = await collection.doc(lastDocId).get();

      /**
       *  Read more about Firestore paginated query here
       *  https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate_a_query
       */
      batch = collection
        .orderBy("createdAt", "desc")
        .startAfter(lastDoc)
        .limit(limit);
    } else {
      /**
       *  The {lastDocId} not provided. Start on first document in collection
       */
      batch = collection.orderBy("createdAt", "desc").limit(limit);
    }

    status = "pending";
    const snapshots = await batch.get();

    /**
     *  For current batch, keep lastDocId to be used in next batch
     *  as starting point.
     */

    newLastDocId =
      snapshots.docs[snapshots.docs.length - 1]?.data()?.id || null;

    docs = extractSnapshots(snapshots);
    status = "succeeded";

    return {
      status,
      error,
      docs,
      lastDocId: newLastDocId,
    };
  } catch (error) {
    status = "failed";
    return {
      status,
      error: error,
      docs,
      lastDocId: newLastDocId,
    };
  }
};

Fetch Initial Batch

When app initialized or main component mounted, by using useEffect hook, we fetch initial batch documents and save last document ID for this batch to be used as the start point for next batch.

/** Fetch initial batch docs and save last document ID */
const getInitialData = async () => {
  setData({ initialBatchStatus: "pending", error: null });
  const {
    docs,
    error,
    lastDocId,
    status: initialBatchStatus,
  } = await getDocs({ limit: 10 });

  if (error) {
    return setData({ initialBatchStatus, error });
  }
  return setData({ initialBatchStatus, docs, lastDocId });
};

useEffect(() => {
  // Load initial batch documents when main component mounted.
  getInitialData();
}, []);

Fetch next batches

Before we proceed with fetching the next batch, let us examine how to render the content. We use 2 components.

1. <ListItem> : Re-usable component to render document information, in our context, it's information for each scientist.

2. <List> : By using React Native built-in FlatList. It renders the list of <ListItem/> components.

Interesting things here are props provided by FlatList, which help us to determine how far user reach scrolling content then the app can fetch the next batch. Those props are onEndReachedThreshold and onEndReached.

onEndReachThreshold set to 0.5 which translate to the half of scrollable height, it simply means that whole scrollable height equal 1. You can set to any value you want in range between 0 to 1.

When user scroll until half of content, this indicate that, she has interest to view more content and FlatList fires onEndReached event which trigger function to fetch next batch of documents then append new fetched documents to existing ones.

/*
 * Fetch next batch of documents start from {lastDocId}
 */
  const getNextData = async () => {
    // Discard next API call when there's pending request
    if (data.nextBatchStatus === "pending" || !data.lastDocId) return;

    setData({ ...data, nextBatchStatus: "pending", error: null });
    const {
      docs,
      error,
      lastDocId,
      status: nextBatchStatus,
    } = await getDocs({ limit: 3, lastDocId: data.lastDocId });

    if (error) {
      return setData({ nextBatchStatus, error });
    }

    const newDocs = [...data.docs].concat(docs);
    return setData({ ...data, nextBatchStatus, docs: newDocs, lastDocId });
  };

Fetching documents is an asynchronous operation that should take a while depending on user device network speed or server availability, the app will show the Activity Indicator component when the request is pending by listening to nextBatchStatus when equal to pending.

Debouncing Server Calls

Debounce is fancy way to say that we want to trigger a function, but only once per use case.

Let's say that we want to show suggestions for a search query, but only after a visitor has finished typing it.

Or we want to save changes on a form, but only when the user is not actively working on those changes, as every "save" costs us a database read.

When user scroll and reach threshold we trigger new documents fetch, but when user is scrolling quickly we don't have to trigger more unnecessary requests.

By debouncing the getNextData function, we can delay it for a certain period like 1000 ms and save database cost while optimizing the app for performance.

Here simple debounce function

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

Here Expo snack for whole app

Further Reading

Firebase Firestore

React Native FlatList

Firestore paginate query