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 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
<application ...>
...
<meta-data
android:name="com.google.mlkit.vision.DEPENDENCIES"
android:value="barcode" />
</application>
```groovy
VisionCamera_enableCodeScanner=true
```
</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"

View File

@ -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"
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)

View File

@ -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

View File

@ -22,13 +22,15 @@ export type ConfigProps = {
*/
disableFrameProcessors?: boolean
/**
* Whether to enable the QR/Barcode Scanner Model. If true, the MLKit Model will
* automatically be downloaded on app startup. If false, it will be downloaded
* once the Camera is created with a `CodeScanner`.
* Whether to enable the QR/Barcode Scanner Model.
*
* - 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
}

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

View File

@ -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]])
}