(WIP): Adds web partitions to throw error for unsupported platforms (#205)

cdanwards · web-flow · commit 58037cd5d553 · 2025-02-18T12:05:53.000-05:00
* Updated FaceDetection for web errors

* HomeScreen testing

* Updates face-detection module

* Updates image-labeling module

* Updates object-detection module

* Add partitions for image labeling for web

* Adds partitions for ObjectDetection Module and has the error displaying as desired on Test App

* Image Labeling Web Error throwing as expected

* Switch to using UnavailabilityError

* Updated faceDetectionContext

* docs(changeset): Adds web partitions to throw error on function calls

* Update documentation to reflect changes
diff --git a/.changeset/smart-carrots-do.md b/.changeset/smart-carrots-do.md
@@ -0,0 +1,12 @@
+---
+"@infinitered/react-native-mlkit-document-scanner": minor
+"@infinitered/react-native-mlkit-object-detection": minor
+"@infinitered/react-native-mlkit-face-detection": minor
+"@infinitered/react-native-mlkit-image-labeling": minor
+"@infinitered/react-native-mlkit-core": minor
+"@infinitered/react-native-mlkit-docs": minor
+"@infinitered/tsconfig": minor
+"example-app": minor
+---
+
+Adds web partitions to throw error on function calls
diff --git a/apps/ExampleApp/app/screens/HomeScreen/HomeScreen.tsx b/apps/ExampleApp/app/screens/HomeScreen/HomeScreen.tsx
@@ -28,7 +28,7 @@ export const HomeScreen: FC<HomeScreenProps> = observer(function HomeScreen() {
   )
 
   return (
-    <Screen style={$root} preset="fixed">
+    <Screen style={$root} preset="auto">
       <View style={$shadowSpace}>
         <View style={$titleContainer}>
           <Text preset={"heading"} text={"Infinite Red AI"} />
@@ -60,6 +60,8 @@ const $listContainer: ViewStyle = {
   position: "relative",
   top: -32,
   marginTop: 16,
+  flex: 1,
+  display: "flex",
 }
 
 const $contentContainerStyle: ViewStyle = { paddingBottom: 100, paddingTop: 24 }
diff --git a/docs/index.md b/docs/index.md
@@ -45,4 +45,9 @@ need.
 Logic and classes shared by all the types have been extracted into `react-native-mlkit-core`, to reduce code
 duplication.
 
+### Is RN MLKit compatible with all platforms?
+
+While we aim to support all platforms, we currently only support iOS and Android. The native modules do not work on the
+web, and we do not have plans to support the web at this time.
+
 ---
diff --git a/docs/running-the-example-app/android.md b/docs/running-the-example-app/android.md
@@ -7,6 +7,10 @@ title: Android
 
 An example app is provided that demonstrates the correct use of the modules in a react-native app.
 
+:::note
+MLKit is not supported in the Android emulator. You will need to use a hardware device.
+:::
+
 ## 1. Clone the project
 
 ```bash
diff --git a/docs/running-the-example-app/ios.md b/docs/running-the-example-app/ios.md
@@ -15,6 +15,10 @@ This is a [known issue](https://issuetracker.google.com/issues/178965151?pli=1)
 waiting either for a fix from Google, or for Apple to release a native `arm64` simulator.
 :::
 
+:::note
+MLKit is not supported in the iOS simulator. You will need to use a hardware device.
+:::
+
 ## 1. Clone the project
 
 ```bash
diff --git a/modules/react-native-mlkit-document-scanner/src/constants.ts b/modules/react-native-mlkit-document-scanner/src/constants.ts
@@ -0,0 +1 @@
+export const WEB_ERROR = "react-native-mlkit is not supported on web";
diff --git a/modules/react-native-mlkit-face-detection/src/constants.ts b/modules/react-native-mlkit-face-detection/src/constants.ts
@@ -0,0 +1,2 @@
+export const WEB_ERROR = "react-native-mlkit is not supported on web";
+export const RNMLKIT_MODULE_NAME = "react-native-mlkit-face-detection";
diff --git a/modules/react-native-mlkit-face-detection/src/context/faceDetectionContext.web.tsx b/modules/react-native-mlkit-face-detection/src/context/faceDetectionContext.web.tsx
@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+
+import { RNMLKitFaceDetectorOptions } from "../types";
+
+interface Props extends PropsWithChildren {
+  options?: RNMLKitFaceDetectorOptions;
+  deferInitialization?: boolean;
+}
+
+export const FaceDetectionProvider = ({ children }: Props) => children;
diff --git a/modules/react-native-mlkit-face-detection/src/hooks/useFaceDetection.web.tsx b/modules/react-native-mlkit-face-detection/src/hooks/useFaceDetection.web.tsx
@@ -0,0 +1,16 @@
+import { UnavailabilityError } from "expo-modules-core";
+
+import { WEB_ERROR, RNMLKIT_MODULE_NAME } from "../constants";
+
+const useFaceDetection = () => ({
+  detectFaces: () => {
+    throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+  },
+  error: null,
+  initialize: () => {
+    throw new Error(WEB_ERROR);
+  },
+  status: "ready",
+});
+
+export default useFaceDetection;
diff --git a/modules/react-native-mlkit-face-detection/src/hooks/useFacesInPhoto.web.ts b/modules/react-native-mlkit-face-detection/src/hooks/useFacesInPhoto.web.ts
@@ -0,0 +1,15 @@
+import { UnavailabilityError } from "expo-modules-core";
+
+import { UseFaceDetectionReturnType } from "./useFacesInPhoto";
+import { RNMLKIT_MODULE_NAME, WEB_ERROR } from "../constants";
+
+export function useFacesInPhoto(imageUri?: string): UseFaceDetectionReturnType {
+  return {
+    clearFaces: () => {
+      throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+    },
+    error: WEB_ERROR,
+    status: "ready",
+    faces: [],
+  } as UseFaceDetectionReturnType;
+}
diff --git a/modules/react-native-mlkit-image-labeling/src/constants.ts b/modules/react-native-mlkit-image-labeling/src/constants.ts
@@ -0,0 +1,2 @@
+export const WEB_ERROR = "react-native-mlkit is not supported on web";
+export const RNMLKIT_MODULE_NAME = "react-native-mlkit-image-labeling";
diff --git a/modules/react-native-mlkit-image-labeling/src/context/ImageLabelingContext.ts b/modules/react-native-mlkit-image-labeling/src/context/ImageLabelingContext.ts
@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 
-import { RNMLKitClassifier } from "./RNMLKitClassifier";
+import { RNMLKitClassifier } from "../module/RNMLKitClassifier";
 
 export type ModelAssets = Record<string, number>;
 
diff --git a/modules/react-native-mlkit-image-labeling/src/context/ImageLabelingContext.web.ts b/modules/react-native-mlkit-image-labeling/src/context/ImageLabelingContext.web.ts
@@ -0,0 +1,19 @@
+import { UnavailabilityError } from "expo-modules-core";
+import { createContext } from "react";
+
+import { RNMLKIT_MODULE_NAME, WEB_ERROR } from "../constants";
+import { RNMLKitClassifier } from "../module/RNMLKitClassifier";
+
+export type ModelAssets = Record<string, number>;
+
+export type Models<T extends ModelAssets> = {
+  [K in keyof T]?: RNMLKitClassifier;
+};
+
+export const ImageLabelingContext = createContext<
+  Models<ModelAssets> | undefined
+>(undefined);
+
+export function useRNMLKitImageLabelerContext() {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
diff --git a/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabeling.ts b/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabeling.ts
@@ -4,7 +4,7 @@ import {
   ModelAssets,
   ImageLabelingContext,
   Models,
-} from "./ImageLabelingContext";
+} from "../context/ImageLabelingContext";
 
 export function useImageLabeling<T extends ModelAssets>(modelName: keyof T) {
   const context: Models<T> | undefined = useContext(ImageLabelingContext);
diff --git a/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabeling.web.ts b/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabeling.web.ts
@@ -0,0 +1,17 @@
+import { UnavailabilityError } from "expo-modules-core";
+
+import { RNMLKIT_MODULE_NAME, WEB_ERROR } from "../constants";
+
+const useImageLabeling = () => ({
+  modelSpec: "ImageLabeling",
+  loaded: () => false,
+  isLoaded: false,
+  classifyImage: () => {
+    throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+  },
+  updateOptionsAndReload: () => {
+    throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+  },
+});
+
+export { useImageLabeling };
diff --git a/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabelingModels.ts b/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabelingModels.ts
@@ -1,9 +1,9 @@
 import { useAssets } from "expo-asset";
 import { useState, useEffect } from "react";
 
-import { RNMLKitClassifier } from "./RNMLKitClassifier";
-import { RNMLKitImageLabelerSpec } from "./RNMLKitImageLabeler";
-import { ImageLabelingConfig, ImageLabelingModels } from "./types";
+import { RNMLKitClassifier } from "../module/RNMLKitClassifier";
+import { RNMLKitImageLabelerSpec } from "../module/RNMLKitImageLabeler";
+import { ImageLabelingConfig, ImageLabelingModels } from "../types";
 
 export function useImageLabelingModels<T extends ImageLabelingConfig>(
   assets: T
diff --git a/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabelingModels.web.ts b/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabelingModels.web.ts
@@ -0,0 +1,9 @@
+import { UnavailabilityError } from "expo-modules-core";
+
+import { RNMLKIT_MODULE_NAME, WEB_ERROR } from "../constants";
+
+export function useImageLabelingModels() {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
+
+export default useImageLabelingModels;
diff --git a/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabelingProvider.tsx b/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabelingProvider.tsx
@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 
-import { ImageLabelingContext } from "./ImageLabelingContext";
-import { ImageLabelingConfig, ImageLabelingModels } from "./types";
+import { ImageLabelingContext } from "../context/ImageLabelingContext";
+import { ImageLabelingConfig, ImageLabelingModels } from "../types";
 
 export function useImageLabelingProvider<T extends ImageLabelingConfig>(
   models: Partial<ImageLabelingModels<T>>
diff --git a/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabelingProvider.web.tsx b/modules/react-native-mlkit-image-labeling/src/hooks/useImageLabelingProvider.web.tsx
@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react";
+
+import { ImageLabelingConfig, ImageLabelingModels } from "../types";
+
+interface Props<T extends ImageLabelingConfig> extends PropsWithChildren {
+  models: Partial<ImageLabelingModels<T>>;
+  deferInitialization?: boolean;
+}
+
+export function useImageLabelingProvider<T extends ImageLabelingConfig>(
+  models: Partial<ImageLabelingModels<T>>
+) {
+  const ImageLabelingModelProvider = ({ children }: Props<T>) => ({ children });
+
+  return { ImageLabelingModelProvider };
+}
diff --git a/modules/react-native-mlkit-image-labeling/src/index.ts b/modules/react-native-mlkit-image-labeling/src/index.ts
@@ -1,9 +1,9 @@
-import RNMLKitImageLabelingModule from "./RNMLKitImageLabeler";
+import RNMLKitImageLabelingModule from "./module/RNMLKitImageLabeler";
 
 export default RNMLKitImageLabelingModule;
-export { useImageLabeling } from "./useImageLabeling";
-export { useImageLabelingProvider } from "./useImageLabelingProvider";
-export { useImageLabelingModels } from "./useImageLabelingModels";
+export { useImageLabeling } from "./hooks/useImageLabeling";
+export { useImageLabelingProvider } from "./hooks/useImageLabelingProvider";
+export { useImageLabelingModels } from "./hooks/useImageLabelingModels";
 export * from "./types";
 
-export type { ClassificationResult } from "./RNMLKitImageLabeler";
+export type { ClassificationResult } from "./module/RNMLKitImageLabeler";
diff --git a/modules/react-native-mlkit-image-labeling/src/module/RNMLKitClassifier.ts b/modules/react-native-mlkit-image-labeling/src/module/RNMLKitClassifier.ts
diff --git a/modules/react-native-mlkit-image-labeling/src/module/RNMLKitImageLabeler.ts b/modules/react-native-mlkit-image-labeling/src/module/RNMLKitImageLabeler.ts
diff --git a/modules/react-native-mlkit-image-labeling/src/module/RNMLKitImageLabeler.web.ts b/modules/react-native-mlkit-image-labeling/src/module/RNMLKitImageLabeler.web.ts
@@ -0,0 +1,68 @@
+import { requireNativeModule } from "expo";
+import { UnavailabilityError } from "expo-modules-core";
+
+import { RNMLKIT_MODULE_NAME } from "../constants";
+
+const WEB_ERROR = "Method not available on web";
+
+export type RNMLKitImageLabel = {
+  text: string;
+  index: number;
+  confidence: number;
+};
+
+export type ClassificationResult = RNMLKitImageLabel[];
+
+export type RNMLKitCustomImageLabelerOptions = {
+  maxResultCount?: number;
+  confidenceThreshold?: number;
+};
+
+export type RNMLKitImageLabelerSpec = {
+  modelName: string;
+  modelPath: string;
+  options?: RNMLKitCustomImageLabelerOptions;
+};
+
+type RNMLKitImageLabelingModule = {
+  addModel: (modelSpec: RNMLKitImageLabelerSpec) => Promise<string | undefined>;
+  loadModel: (
+    modelSpec: RNMLKitImageLabelerSpec
+  ) => Promise<string | undefined>;
+  isLoaded: (modelName: string) => boolean;
+  runClassification: (imagePath: string) => Promise<ClassificationResult>;
+  classifyImage: (
+    modelName: string,
+    imagePath: string
+  ) => Promise<ClassificationResult>;
+  updateOptionsAndReload: (
+    modelName: string,
+    newOptions: RNMLKitCustomImageLabelerOptions
+  ) => Promise<void>;
+};
+
+function loadModel(
+  modelSpec: RNMLKitImageLabelerSpec
+): Promise<string | undefined> {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
+
+function isLoaded(modelName: string): boolean {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
+
+async function classifyImage(
+  modelName: string,
+  imagePath: string
+): Promise<ClassificationResult> {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
+
+async function updateOptionsAndReload(
+  modelName: string,
+  newOptions: RNMLKitCustomImageLabelerOptions
+): Promise<void> {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
+
+export default { loadModel, classifyImage, updateOptionsAndReload, isLoaded };
diff --git a/modules/react-native-mlkit-image-labeling/src/types.ts b/modules/react-native-mlkit-image-labeling/src/types.ts
@@ -1,10 +1,10 @@
 import { ModelInfo } from "@infinitered/react-native-mlkit-core";
 
-import { RNMLKitClassifier } from "./RNMLKitClassifier";
+import { RNMLKitClassifier } from "./module/RNMLKitClassifier";
 import {
   RNMLKitCustomImageLabelerOptions,
   RNMLKitImageLabel,
-} from "./RNMLKitImageLabeler";
+} from "./module/RNMLKitImageLabeler";
 
 export type ImageLabelingModelInfo =
   ModelInfo<RNMLKitCustomImageLabelerOptions>;
diff --git a/modules/react-native-mlkit-object-detection/src/constants.ts b/modules/react-native-mlkit-object-detection/src/constants.ts
@@ -0,0 +1,2 @@
+export const WEB_ERROR = "react-native-mlkit is not supported on web";
+export const RNMLKIT_MODULE_NAME = "react-native-mlkit-object-detection";
diff --git a/modules/react-native-mlkit-object-detection/src/context/ObjectDetectionContext.ts b/modules/react-native-mlkit-object-detection/src/context/ObjectDetectionContext.ts
@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 
-import { ObjectDetectionConfig, ObjectDetectionModels } from "./types";
+import { ObjectDetectionConfig, ObjectDetectionModels } from "../types";
 
 export type ObjectDetectionContextValue<T extends ObjectDetectionConfig> =
   ObjectDetectionModels<T>;
diff --git a/modules/react-native-mlkit-object-detection/src/context/ObjectDetectionContext.web.ts b/modules/react-native-mlkit-object-detection/src/context/ObjectDetectionContext.web.ts
@@ -0,0 +1,7 @@
+import { UnavailabilityError } from "expo-modules-core";
+
+import { RNMLKIT_MODULE_NAME, WEB_ERROR } from "../constants";
+
+export function useObjectDetectionContext() {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
diff --git a/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetection.ts b/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetection.ts
@@ -1,5 +1,5 @@
-import { useObjectDetectionContext } from "./ObjectDetectionContext";
-import { ObjectDetectionConfig, RNMLKitObjectDetector } from "./types";
+import { useObjectDetectionContext } from "../context/ObjectDetectionContext";
+import { ObjectDetectionConfig, RNMLKitObjectDetector } from "../types";
 
 export function useObjectDetection<T extends ObjectDetectionConfig>(
   modelName: keyof T | "default"
diff --git a/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetection.web.ts b/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetection.web.ts
@@ -0,0 +1,10 @@
+import { UnavailabilityError } from "expo-modules-core";
+
+import { RNMLKIT_MODULE_NAME, WEB_ERROR } from "../constants";
+import { ObjectDetectionConfig, RNMLKitObjectDetector } from "../types";
+
+export function useObjectDetection<T extends ObjectDetectionConfig>(
+  modelName: keyof T | "default"
+): RNMLKitObjectDetector | undefined {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
diff --git a/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetectionModels.ts b/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetectionModels.ts
@@ -1,14 +1,14 @@
 import { useAssets } from "expo-asset";
 import { useState, useEffect } from "react";
 
-import { RNMLKitCustomObjectDetector } from "./RNMLKitCustomObjectDetector";
-import { RNMLKitDefaultObjectDetector } from "./RNMLKitDefaultObjectDetector";
+import { RNMLKitCustomObjectDetector } from "../module/RNMLKitCustomObjectDetector";
+import { RNMLKitDefaultObjectDetector } from "../module/RNMLKitDefaultObjectDetector";
 import {
   RNMLKitObjectDetectorOptions,
   ObjectDetectionModels,
   ObjectDetectionConfig,
   RNMLKitObjectDetector,
-} from "./types";
+} from "../types";
 
 export function useObjectDetectionModels<T extends ObjectDetectionConfig>({
   assets = {} as T,
diff --git a/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetectionModels.web.ts b/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetectionModels.web.ts
@@ -0,0 +1,20 @@
+import { UnavailabilityError } from "expo-modules-core";
+
+import { RNMLKIT_MODULE_NAME, WEB_ERROR } from "../constants";
+import {
+  RNMLKitObjectDetectorOptions,
+  ObjectDetectionModels,
+  ObjectDetectionConfig,
+} from "../types";
+
+export function useObjectDetectionModels<T extends ObjectDetectionConfig>({
+  assets = {} as T,
+  loadDefaultModel,
+  defaultModelOptions,
+}: {
+  assets?: T;
+  loadDefaultModel?: boolean;
+  defaultModelOptions?: RNMLKitObjectDetectorOptions;
+}): ObjectDetectionModels<T> {
+  throw new UnavailabilityError(RNMLKIT_MODULE_NAME, WEB_ERROR);
+}
diff --git a/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetectionProvider.tsx b/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetectionProvider.tsx
diff --git a/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetectionProvider.web.tsx b/modules/react-native-mlkit-object-detection/src/hooks/useObjectDetectionProvider.web.tsx
diff --git a/modules/react-native-mlkit-object-detection/src/index.ts b/modules/react-native-mlkit-object-detection/src/index.ts
diff --git a/modules/react-native-mlkit-object-detection/src/module/RNMLKitCustomObjectDetector.ts b/modules/react-native-mlkit-object-detection/src/module/RNMLKitCustomObjectDetector.ts
diff --git a/modules/react-native-mlkit-object-detection/src/module/RNMLKitDefaultObjectDetector.ts b/modules/react-native-mlkit-object-detection/src/module/RNMLKitDefaultObjectDetector.ts
diff --git a/modules/react-native-mlkit-object-detection/src/module/RNMLKitObjectDetectionModule.ts b/modules/react-native-mlkit-object-detection/src/module/RNMLKitObjectDetectionModule.ts
diff --git a/modules/react-native-mlkit-object-detection/src/module/RNMLKitObjectDetectionModule.web.ts b/modules/react-native-mlkit-object-detection/src/module/RNMLKitObjectDetectionModule.web.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const WEB_ERROR = "react-native-mlkit is not supported on web";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const WEB_ERROR = "react-native-mlkit is not supported on web";`
	`2`	`+export const RNMLKIT_MODULE_NAME = "react-native-mlkit-face-detection";`