feat: Add new enableCodeScanner prop to build.gradle to make sure CodeScanner always works (#2355)

* feat: Always download model instead of relying on Google Play Services

* feat: Use `VisionCamera_enableCodeScanner` flag instead of unsafely replacing

* Update CODE_SCANNING.mdx

docs/docs/guides/CODE_SCANNING.mdx

@@ -30,7 +30,7 @@ A Code Scanner is a separate Camera output (just like photo or video) that can d
 
 On iOS, the Code Scanner uses the platform-native APIs and can be used out of the box.
 
-On Android, the [MLKit Vision Barcode Scanning](https://developers.google.com/ml-kit/vision/barcode-scanning) API will be used, and the model (2.2MB) needs to be downloaded first.
+On Android, the [MLKit Vision Barcode Scanning](https://developers.google.com/ml-kit/vision/barcode-scanning) API will be used, and the model (2.2MB) needs to be included into your app first.
 
 <Tabs
   groupId="environment"
@@ -41,21 +41,16 @@ On Android, the [MLKit Vision Barcode Scanning](https://developers.google.com/ml
   ]}>
 <TabItem value="rn">
 
-To download the model when the user installs your app, add this to your `AndroidManifest.xml` file:
+Inside your `gradle.properties` file, add the `enableCodeScanner` flag:
 
-```xml
+```groovy
-<application ...>
+VisionCamera_enableCodeScanner=true
-      ...
-      <meta-data
-          android:name="com.google.mlkit.vision.DEPENDENCIES"
-          android:value="barcode" />
-</application>
 ```
 
 </TabItem>
 <TabItem value="expo">
 
-To download the model when the user installs your app, add the `enableCodeScanner` flag to your Expo config (`app.json`, `app.config.json` or `app.config.js`):
+Add the `enableCodeScanner` flag to your Expo config (`app.json`, `app.config.json` or `app.config.js`):
 
 ```json
 {
@@ -77,7 +72,7 @@ To download the model when the user installs your app, add the `enableCodeScanne
 
 ## Usage
 
-To use a codescanner, simply create a [`CodeScanner`](/docs/api/interfaces/CodeScanner) and pass it to the `<Camera>`:
+To scan codes, simply create a [`CodeScanner`](/docs/api/interfaces/CodeScanner) instance and pass it to the `<Camera>`:
 
 <Tabs
   groupId="component-style"

package/android/build.gradle

@@ -71,6 +71,8 @@ def nodeModules = findNodeModules(projectDir)
 def hasWorklets = !safeExtGet("VisionCamera_disableFrameProcessors", false) && findProject(":react-native-worklets-core") != null
 logger.warn("[VisionCamera] react-native-worklets-core ${hasWorklets ? "found" : "not found"}, Frame Processors ${hasWorklets ? "enabled" : "disabled"}!")
 
+def enableCodeScanner = safeExtGet("VisionCamera_enableCodeScanner", false)
+
 repositories {
   google()
   mavenCentral()
@@ -162,7 +164,15 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-android:+"
   implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.2"
-  implementation "com.google.android.gms:play-services-mlkit-barcode-scanning:18.3.0"
+
+  if (enableCodeScanner) {
+    // User enabled code-scanner, so we bundle the 2.4 MB model in the app.
+    implementation 'com.google.mlkit:barcode-scanning:17.2.0'
+  } else {
+    // Fall-back to just including the code for the CodeScanner to avoid the 2.4 MB bundle in the app.
+    // On devices with Google Play Services, this can also download the CodeScanner model on-demand.
+    implementation "com.google.android.gms:play-services-mlkit-barcode-scanning:18.3.0"
+  }
 
   if (hasWorklets) {
     // Frame Processor integration (optional)

package/example/android/gradle.properties

@@ -41,3 +41,5 @@ hermesEnabled=true
 
 # Can be set to true to disable the build setup
 #VisionCamera_disableFrameProcessors=true
+# Can be set to true to include the full 2.4 MB MLKit dependency
+#VisionCamera_enableCodeScanner=true

package/src/expo-plugin/@types.ts

@@ -22,13 +22,15 @@ export type ConfigProps = {
    */
   disableFrameProcessors?: boolean
   /**
-   * Whether to enable the QR/Barcode Scanner Model. If true, the MLKit Model will
+   * Whether to enable the QR/Barcode Scanner Model.
-   * automatically be downloaded on app startup. If false, it will be downloaded
+   *
-   * once the Camera is created with a `CodeScanner`.
+   * - When set to `true`, the MLKit Model will be bundled alongside
+   * with your app. (~2.4 MB in size).
+   * - When set to `false`, it can still be downloaded on-the-fly on devices with Google Play Services installed if you are using the `CodeScanner`.
+   *
    * See [QR/Barcode Scanning](https://react-native-vision-camera.com/docs/guides/code-scanning)
    *
-   * If set to true, it fallbacks to `android-manifest`.
    * @default false
    */
-  enableCodeScanner?: boolean | 'android-manifest' | 'gradle-implementation'
+  enableCodeScanner?: boolean
 }

package/src/expo-plugin/withAndroidMLKitVisionModel.ts

@@ -1,36 +1,24 @@
-import { AndroidConfig, ConfigPlugin, withAndroidManifest, withAppBuildGradle } from '@expo/config-plugins'
+import { ConfigPlugin, withGradleProperties } from '@expo/config-plugins'
 import { ConfigProps } from './@types'
 
-const { addMetaDataItemToMainApplication, getMainApplicationOrThrow } = AndroidConfig.Manifest
+/**
-
+ * Set the `VisionCamera_enableCodeScanner` value in the static `gradle.properties` file.
-export const withAndroidMLKitVisionModel: ConfigPlugin<ConfigProps> = (config, props) => {
+ * This is used to add the full MLKit dependency to the project.
-  if (props.enableCodeScanner === 'gradle-implementation') {
+ */
-    return withAppBuildGradle(config, (conf) => {
+export const withAndroidMLKitVisionModel: ConfigPlugin<ConfigProps> = (c) => {
-      const buildGradle = conf.modResults
+  const key = 'VisionCamera_enableCodeScanner'
-      const implementation = "implementation 'com.google.mlkit:barcode-scanning:17.2.0'"
+  return withGradleProperties(c, (config) => {
-
+    config.modResults = config.modResults.filter((item) => {
-      if (buildGradle.contents.includes(implementation) === false) {
+      if (item.type === 'property' && item.key === key) return false
-        // Inspired by https://github.com/invertase/react-native-firebase/blob/main/packages/app/plugin/src/android/buildscriptDependency.ts
+      return true
-        // TODO: Find a better way to do this
-        buildGradle.contents = buildGradle.contents.replace(
-          /dependencies\s?{/,
-          `dependencies {
-    ${implementation}`,
-        )
-      }
-
-      return conf
     })
-  }
 
-  return withAndroidManifest(config, (conf) => {
+    config.modResults.push({
-    const androidManifest = conf.modResults
+      type: 'property',
-    const mainApplication = getMainApplicationOrThrow(androidManifest)
+      key: key,
+      value: 'true',
+    })
 
-    addMetaDataItemToMainApplication(mainApplication, 'com.google.mlkit.vision.DEPENDENCIES', 'barcode')
+    return config
-
-    conf.modResults = androidManifest
-
-    return conf
   })
 }

package/src/expo-plugin/withVisionCamera.ts

@@ -26,7 +26,7 @@ const withCamera: ConfigPlugin<ConfigProps> = (config, props = {}) => {
     config = withDisableFrameProcessorsIOS(config)
   }
 
-  if (props.enableCodeScanner !== false) config = withAndroidMLKitVisionModel(config, props)
+  if (props.enableCodeScanner) config = withAndroidMLKitVisionModel(config, props)
 
   return withPlugins(config, [[AndroidConfig.Permissions.withPermissions, androidPermissions]])
 }