railbird/react-native-vision-camera
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add enableCodeScanner to Expo Config Plugin

Browse Source
This commit is contained in:
Marc Rousavy 2023-10-05 11:06:38 +02:00
parent 6e249d165a
commit ffd64feee8
2 changed files with 67 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/docs/guides/CODE_SCANNING.mdx
View File

@ -30,7 +30,18 @@ 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. To download the model when the user installs your app, add this to your `AndroidManifest.xml` file:
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.
<Tabs
groupId="environment"
defaultValue="rn"
values={[
{label: 'React Native', value: 'rn'},
{label: 'Expo', value: 'expo'}
]}>
<TabItem value="rn">
To download the model when the user installs your app, add this to your `AndroidManifest.xml` file:
```xml
<application ...>
@ -41,6 +52,29 @@ On Android, the [MLKit Vision Barcode Scanning](https://developers.google.com/ml
</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`):
```json
{
"name": "my app",
"plugins": [
[
"react-native-vision-camera",
{
// ...
"enableCodeScanner": true
}
]
]
}
```
</TabItem>
</Tabs>
## Usage
To use a codescanner, simply create a [`CodeScanner`](/docs/api/interfaces/CodeScanner) and pass it to the `<Camera>`:

33
package/src/expo-plugin/withVisionCamera.ts
View File

@ -9,10 +9,36 @@ const CAMERA_USAGE = 'Allow $(PRODUCT_NAME) to access your camera'
const MICROPHONE_USAGE = 'Allow $(PRODUCT_NAME) to access your microphone'
type Props = {
/**
* The text to show in the native dialog when asking for Camera Permissions.
* @default 'Allow $(PRODUCT_NAME) to access your camera'
*/
cameraPermissionText?: string
/**
* Whether to add Microphone Permissions to the native manifest or not.
* @default false
*/
enableMicrophonePermission?: boolean
/**
* The text to show in the native dialog when asking for Camera Permissions.
* @default 'Allow $(PRODUCT_NAME) to access your microphone'
*/
microphonePermissionText?: string
/**
* Whether to enable the Frame Processors runtime, or explicitly disable it.
* Disabling Frame Processors will make your app smaller as the C++ files will not be compiled.
* See [Frame Processors](https://www.react-native-vision-camera.com/docs/guides/frame-processors)
* @default false
*/
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`.
* See [QR/Barcode Scanning](https://www.react-native-vision-camera.com/docs/guides/code-scanning)
* @default false
*/
enableCodeScanner?: boolean
}
const withCamera: ConfigPlugin<Props> = (config, props = {}) => {
@ -32,7 +58,12 @@ const withCamera: ConfigPlugin<Props> = (config, props = {}) => {
config = withDisableFrameProcessorsIOS(config)
}
return withPlugins(config, [[AndroidConfig.Permissions.withPermissions, androidPermissions], withAndroidMLKitVisionModel])
if (props.enableCodeScanner) {
// Adds meta download-request tag to AndroidManifest
config = withAndroidMLKitVisionModel(config)
}
return withPlugins(config, [[AndroidConfig.Permissions.withPermissions, androidPermissions]])
}
export default createRunOncePlugin(withCamera, pkg.name, pkg.version)