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
This commit is contained in:
Marc Rousavy 2024-01-08 13:14:47 +01:00 committed by GitHub
parent a8c16e31d6
commit 5c99728561
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 44 additions and 47 deletions

View File

@ -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 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 <Tabs
groupId="environment" groupId="environment"
@ -41,21 +41,16 @@ On Android, the [MLKit Vision Barcode Scanning](https://developers.google.com/ml
]}> ]}>
<TabItem value="rn"> <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>
<TabItem value="expo"> <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 ```json
{ {
@ -77,7 +72,7 @@ To download the model when the user installs your app, add the `enableCodeScanne
## Usage ## 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 <Tabs
groupId="component-style" groupId="component-style"

View File

@ -71,6 +71,8 @@ def nodeModules = findNodeModules(projectDir)
def hasWorklets = !safeExtGet("VisionCamera_disableFrameProcessors", false) && findProject(":react-native-worklets-core") != null 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"}!") logger.warn("[VisionCamera] react-native-worklets-core ${hasWorklets ? "found" : "not found"}, Frame Processors ${hasWorklets ? "enabled" : "disabled"}!")
def enableCodeScanner = safeExtGet("VisionCamera_enableCodeScanner", false)
repositories { repositories {
google() google()
mavenCentral() mavenCentral()
@ -162,7 +164,15 @@ dependencies {
//noinspection GradleDynamicVersion //noinspection GradleDynamicVersion
implementation "com.facebook.react:react-android:+" implementation "com.facebook.react:react-android:+"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.2" 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) { if (hasWorklets) {
// Frame Processor integration (optional) // Frame Processor integration (optional)

View File

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

View File

@ -22,13 +22,15 @@ export type ConfigProps = {
*/ */
disableFrameProcessors?: boolean 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) * 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 * @default false
*/ */
enableCodeScanner?: boolean | 'android-manifest' | 'gradle-implementation' enableCodeScanner?: boolean
} }

View File

@ -1,36 +1,24 @@
import { AndroidConfig, ConfigPlugin, withAndroidManifest, withAppBuildGradle } from '@expo/config-plugins' import { ConfigPlugin, withGradleProperties } from '@expo/config-plugins'
import { ConfigProps } from './@types' 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
}) })
} }

View File

@ -26,7 +26,7 @@ const withCamera: ConfigPlugin<ConfigProps> = (config, props = {}) => {
config = withDisableFrameProcessorsIOS(config) 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]]) return withPlugins(config, [[AndroidConfig.Permissions.withPermissions, androidPermissions]])
} }