feat: Expo support (#260)

* Create `withVisionCamera` plugin

* Add docs for setting up Expo

* Update SETUP.mdx

* Update app.config.js

* rename config -> plugin

* Update SETUP.mdx

* add "runs with expo" badge to README

* Revert "add "runs with expo" badge to README"

This reverts commit e05a87a2354a056432af7b94060e95df37077472.

* fix `withVisionCamera` path

* remove unnecessary type docs
This commit is contained in:
Marc Rousavy
2021-07-07 14:55:25 +02:00
committed by GitHub
parent 3007cd9430
commit d3a8b49f9b
5 changed files with 194 additions and 5 deletions

View File

@@ -5,6 +5,8 @@ sidebar_label: Getting Started
slug: /guides
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import useBaseUrl from '@docusaurus/useBaseUrl';
<div>
@@ -28,6 +30,14 @@ VisionCamera requires **iOS 11 or higher**, and **Android-SDK version 21 or high
To use a Camera or Microphone you must first specify that your app requires camera and microphone permissions.
<Tabs
defaultValue="bare-rn"
values={[
{label: 'Bare React Native', value: 'bare-rn'},
{label: 'Expo', value: 'expo'}
]}>
<TabItem value="bare-rn">
### iOS
Open your project's `Info.plist` and add the following lines inside the outermost `<dict>` tag:
@@ -35,6 +45,7 @@ Open your project's `Info.plist` and add the following lines inside the outermos
```xml
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera to record videos and capture photos.</string>
<!-- optionally, if you want to record audio: -->
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Microphone to record videos with audio.</string>
```
@@ -45,9 +56,37 @@ Open your project's `AndroidManifest.xml` and add the following lines inside the
```xml
<uses-permission android:name="android.permission.CAMERA" />
<!-- optionally, if you want to record audio: -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
```
</TabItem>
<TabItem value="expo">
Add the VisionCamera plugin to your Expo config (`app.json`, `app.config.json` or `app.config.js`):
```json
{
"name": "my app",
"plugins": [
[
"react-native-vision-camera",
{
"cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera to record videos and capture photos.",
// optionally, if you want to record audio:
"enableMicrophonePermission": true,
"microphonePermissionText": "$(PRODUCT_NAME) needs access to your Microphone to record videos with audio."
}
]
]
}
```
Finally, run `expo prebuild` to compile the mods. The changes will be applied once you build a new binary with `eas build`.
</TabItem>
</Tabs>
## Getting/Requesting Permissions
VisionCamera also provides functions to easily get and request Microphone and Camera permissions.