bluewallet/react-native-camera
bluewallet/react-native-camera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): Add docusaurus (#2293)

Browse Source 
* initial bootstrap on documentation

* Add EXPO_USAGE and MIgrating page

* add all pages

* add sponsors section to index

* theme

* configs

* clipboard button

* remove blog from docker

* start API.md

* minor updates
This commit is contained in:
Ronaldo Lima 2019-06-02 21:20:35 +02:00 committed by Sibelius Seraphini
parent 5da10c9962
commit 54b03328b1
41 changed files with 7742 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dockerignore Normal file
View File

@ -0,0 +1,2 @@
*/node_modules
*.log

10
Dockerfile Normal file
View File

@ -0,0 +1,10 @@
FROM node:8.11.4
WORKDIR /app/website
EXPOSE 3000 35729
COPY ./docs /app/docs
COPY ./website /app/website
RUN yarn install
CMD ["yarn", "start"]

432
README.md
View File

@ -118,436 +118,4 @@ To enable `video recording` feature you have to add the following code to the `A
![5j2jduk](https://cloud.githubusercontent.com/assets/2302315/22190752/6bc6ccd0-e0da-11e6-8e2f-6f22a3567a57.gif)
## Migrating from RCTCamera to RNCamera
See this [doc](./docs/migration.md)
## Migrating from version 1.x to 2.x
See this [doc](./docs/migrationV2.md)
### RNCamera Docs
[RNCamera](./docs/RNCamera.md)
## Getting started
### Requirements
1. JDK >= 1.7 (if you run on 1.6 you will get an error on "\_cameras = new HashMap<>();")
2. With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the Info.plist of your project. This should be found in 'your_project/ios/your_project/Info.plist'. Add the following code:
```
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>
```
3. On Android, you require `buildToolsVersion` of `25.0.2+`. _This should easily and automatically be downloaded by Android Studio's SDK Manager._
4. On iOS 11 and later you need to add `NSPhotoLibraryAddUsageDescription` key to the Info.plist. This key lets you describe the reason your app seeks write-only access to the user’s photo library. Info.plist can be found in 'your_project/ios/your_project/Info.plist'. Add the following code:
```
<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
```
### Mostly automatic install with react-native
1. `npm install react-native-camera --save`
2. `react-native link react-native-camera`
_To install it with Windows, see manual install below_
### Mostly automatic install with CocoaPods
1. `npm install react-native-camera --save`
2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:
```obj-c
pod 'react-native-camera', path: '../node_modules/react-native-camera'
```
3. Run `pod install`
_Note:_ You might need to adjust your Podfile following the example below:
```ruby
target 'yourTargetName' do
# See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # Include this for RN >= 0.47
'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
'RCTText',
'RCTNetwork',
'RCTWebSocket', # Needed for debugging
'RCTAnimation', # Needed for FlatList and animations running on native UI thread
# Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
# Third party deps podspec link
pod 'react-native-camera', path: '../node_modules/react-native-camera'
end
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name == "React"
target.remove_from_project
end
end
end
```
### Manual install
#### iOS
1. `npm install react-native-camera --save`
2. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
3. Go to `node_modules` ➜ `react-native-camera` and add `RNCamera.xcodeproj`
4. Expand the `RNCamera.xcodeproj` ➜ `Products` folder
5. In XCode, in the project navigator, select your project. Add `libRNCamera.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
6. Click `RNCamera.xcodeproj` in the project navigator and go the `Build Settings` tab. Make sure 'All' is toggled on (instead of 'Basic'). In the `Search Paths` section, look for `Header Search Paths` and make sure it contains both `$(SRCROOT)/../../react-native/React` and `$(SRCROOT)/../../../React` - mark both as `recursive`.
##### Face Detection/Text Recognition/BarCode(using MLKit) Steps
Face Detection/Text Recognition/BarCode(using MLKit) are optional on iOS. If you want them, you will need to use CocoaPods path and set-up Firebase project for your app (detailed steps below).
_Note:_ Installing react-native-firebase package is NOT necessary.
###### Modifying Podfile
Modify the dependency towards `react-native-camera` in your
`Podfile`, from
```
pod 'react-native-camera', path: '../node_modules/react-native-camera'
```
to (for Face Detection)
```
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'FaceDetectorMLKit'
]
```
or to (for Text Recognition)
```
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'TextDetector'
]
```
or to (for Barcode Recognition)
```
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'BarcodeDetectorMLKit'
]
```
or to (all possible detections)
```
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'TextDetector',
'FaceDetectorMLKit',
'BarcodeDetectorMLKit'
]
```
###### Setting up Firebase
Text/Face recognition for iOS uses Firebase MLKit which requires setting up Firebase project for your app.
If you have not already added Firebase to your app, please follow the steps described in [getting started guide](https://firebase.google.com/docs/ios/setup).
In short, you would need to
1. Register your app in Firebase console.
2. Download `GoogleService-Info.plist` and add it to your project
3. Add `pod 'Firebase/Core'` to your podfile
4. In your `AppDelegate.m` file add the following lines:
```objective-c
#import <Firebase.h> // <--- add this
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[FIRApp configure]; // <--- add this
...
}
```
- If you have issues with duplicate symbols you will need to enable dead code stripping option in your Xcode (Target > Build Settings > search for "Dead code stripping") [see here](https://github.com/firebase/quickstart-ios/issues/487#issuecomment-415313053).
- If you are using `pod Firebase/Core` with a version set below 5.13 you might want to add `pod 'GoogleAppMeasurement', '~> 5.3.0'` to your podfile
#### Android
1. `npm install react-native-camera --save`
2. Open up `android/app/src/main/java/[...]/MainApplication.java`
- Add `import org.reactnative.camera.RNCameraPackage;` to the imports at the top of the file
- Add `new RNCameraPackage()` to the list returned by the `getPackages()` method. Add a comma to the previous item if there's already something there.
3. Append the following lines to `android/settings.gradle`:
```gradle
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
```
4. Insert the following lines in `android/app/build.gradle`:
inside the dependencies block:
```gradle
implementation project(':react-native-camera')
```
inside defaultConfig block insert either:
```gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
}
}
```
or, if using MLKit for text/face/barcode recognition:
```gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'mlkit' <-- insert this line
}
}
```
5. Declare the permissions in your Android Manifest (required for `video recording` feature)
```xml
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
```
6. Add jitpack to android/build.gradle
```gradle
allprojects {
repositories {
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
}
}
```
7. Additional steps for using MLKit for text/face/barcode recognition
7.1. Using Firebase MLKit requires seting up Firebase project for your app. If you have not already added Firebase to your app, please follow the steps described in [getting started guide](https://firebase.google.com/docs/android/setup).
In short, you would need to
- Register your app in Firebase console.
- Download google-services.json and place it in `android/app/`
- add the folowing to project level build.gradle:
```gradle
buildscript {
dependencies {
// Add this line
classpath 'com.google.gms:google-services:4.0.1' <-- you might want to use different version
}
}
```
- add to the bottom of `android/app/build.gradle` file
```gradle
apply plugin: 'com.google.gms.google-services'
```
7.2. Configure your app to automatically download the ML model to the device after your app is installed from the Play Store. If you do not enable install-time model downloads, the model will be downloaded the first time you run the on-device detector. Requests you make before the download has completed will produce no results.
```xml
<application ...>
...
<meta-data
android:name="com.google.firebase.ml.vision.DEPENDENCIES"
android:value="ocr" />
<!-- To use multiple models, list all needed models: android:value="ocr, face, barcode" -->
</application>
```
The current Android library defaults to the below values for the Google SDK and Libraries,
```gradle
def DEFAULT_COMPILE_SDK_VERSION = 26
def DEFAULT_BUILD_TOOLS_VERSION = "26.0.2"
def DEFAULT_TARGET_SDK_VERSION = 26
def DEFAULT_GOOGLE_PLAY_SERVICES_VERSION = "12.0.1"
def DEFAULT_SUPPORT_LIBRARY_VERSION = "27.1.0"
```
You can override this settings by adding a Project-wide gradle configuration properties for
use by all modules in your ReactNative project by adding the below to `android/build.gradle`
file,
```gradle
buildscript {...}
allprojects {...}
/**
* Project-wide gradle configuration properties for use by all modules
*/
ext {
compileSdkVersion = 26
targetSdkVersion = 26
buildToolsVersion = "26.0.2"
googlePlayServicesVersion = "12.0.1"
googlePlayServicesVisionVersion = "15.0.2"
supportLibVersion = "27.1.0"
}
```
The above settings in the ReactNative project over-rides the values present in the `react-native-camera`
module. For your reference below is the `android/build.gradle` file of the module.
```gradle
def safeExtGet(prop, fallback) {
rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
}
buildscript {
repositories {
google()
maven {
url 'https://maven.google.com'
}
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.3.1'
}
}
apply plugin: 'com.android.library'
android {
compileSdkVersion safeExtGet('compileSdkVersion', 28)
buildToolsVersion safeExtGet('buildToolsVersion', '28.0.3')
defaultConfig {
minSdkVersion safeExtGet('minSdkVersion', 16)
targetSdkVersion safeExtGet('targetSdkVersion', 28)
}
flavorDimensions "react-native-camera"
productFlavors {
general {
dimension "react-native-camera"
}
mlkit {
dimension "react-native-camera"
}
}
sourceSets {
main {
java.srcDirs = ['src/main/java']
}
general {
java.srcDirs = ['src/general/java']
}
mlkit {
java.srcDirs = ['src/mlkit/java']
}
}
lintOptions {
abortOnError false
warning 'InvalidPackage'
}
}
repositories {
google()
jcenter()
maven {
url 'https://maven.google.com'
}
maven { url "https://jitpack.io" }
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
dependencies {
def googlePlayServicesVisionVersion = safeExtGet('googlePlayServicesVisionVersion', safeExtGet('googlePlayServicesVersion', '17.0.2'))
implementation 'com.facebook.react:react-native:+'
implementation "com.google.zxing:core:3.3.3"
implementation "com.drewnoakes:metadata-extractor:2.11.0"
generalImplementation "com.google.android.gms:play-services-vision:$googlePlayServicesVisionVersion"
implementation "com.android.support:exifinterface:${safeExtGet('supportLibVersion', '28.0.0')}"
implementation "com.android.support:support-annotations:${safeExtGet('supportLibVersion', '28.0.0')}"
implementation "com.android.support:support-v4:${safeExtGet('supportLibVersion', '28.0.0')}"
mlkitImplementation "com.google.firebase:firebase-ml-vision:${safeExtGet('firebase-ml-vision', '19.0.3')}"
mlkitImplementation "com.google.firebase:firebase-ml-vision-face-model:${safeExtGet('firebase-ml-vision-face-model', '17.0.2')}"
}
```
If you are using a version of `googlePlayServicesVersion` that does not have `play-services-vision`, you can specify a different version of `play-services-vision` by adding `googlePlayServicesVisionVersion` to the project-wide properties
```
ext {
compileSdkVersion = 26
targetSdkVersion = 26
buildToolsVersion = "26.0.2"
googlePlayServicesVersion = "16.0.1"
googlePlayServicesVisionVersion = "15.0.2"
supportLibVersion = "27.1.0"
}
```
#### Windows
1. `npm install react-native-camera --save`
2. Link the library as described here: [react-native-windows / LinkingLibrariesWindows.md](https://github.com/Microsoft/react-native-windows/blob/master/docs/LinkingLibrariesWindows.md)
For the last step of this guide, you have to add the following things to your `MainReactNativeHost.cs`:
- in the import section at the very top: `using RNCamera;`
- in `protected override List<IReactPackage> Packages => new List<IReactPackage>` add a new line with `new RNCameraPackage()`
3. Add the capabilities (permissions) for the webcam and microphone as described here: [docs.microsoft / audio-video-camera](https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/simple-camera-preview-access#add-capability-declarations-to-the-app-manifest)
4. Use `RCTCamera` (RNCamera is not supported yet) like described above
Follow the [Q & A](./docs/QA.md) section if you are having compilation issues.
## Usage
### RNCamera
Take a look into this [documentation](./docs/RNCamera.md).

17
docker-compose.yml Normal file
View File

@ -0,0 +1,17 @@
version: "3"
services:
docusaurus:
build: .
ports:
- 3000:3000
- 35729:35729
volumes:
- ./docs:/app/docs
- ./website/core:/app/website/core
- ./website/i18n:/app/website/i18n
- ./website/pages:/app/website/pages
- ./website/static:/app/website/static
- ./website/sidebars.json:/app/website/sidebars.json
- ./website/siteConfig.js:/app/website/siteConfig.js
working_dir: /app/website

269
docs/API.md Normal file
View File

@ -0,0 +1,269 @@
---
id: api
title: Work in progress
---
## API props
[**wip**]
## Methods
## takePictureAsync()
Returns a promise with TakePictureResponse.
### Method type
```ts
takePictureAsync(options?: TakePictureOptions): Promise<TakePictureResponse>;
```
```ts
interface TakePictureOptions {
quality?: number;
orientation?: keyof Orientation | OrientationNumber;
base64?: boolean;
exif?: boolean;
width?: number;
mirrorImage?: boolean;
doNotSave?: boolean;
pauseAfterCapture?: boolean;
/** Android only */
skipProcessing?: boolean;
fixOrientation?: boolean;
writeExif?: boolean;
/** iOS only */
forceUpOrientation?: boolean;
}
interface TakePictureResponse {
width: number;
height: number;
uri: string;
base64?: string;
exif?: { [name: string]: any };
pictureOrientation: number;
deviceOrientation: number;
}
```
### Usage example
```js
takePicture = async () => {
if (this.camera) {
const data = await this.camera.takePictureAsync();
console.warn('takePictureResponse ', data);
}
};
```
---
## recordAsync()
Returns a promise with RecordResponse.
### Method type
```ts
recordAsync(options?: RecordOptions): Promise<RecordResponse>;
```
```ts
interface RecordOptions {
quality?: keyof VideoQuality;
orientation?: keyof Orientation | OrientationNumber;
maxDuration?: number;
maxFileSize?: number;
mute?: boolean;
mirrorVideo?: boolean;
path?: string;
/** Android only */
videoBitrate?: number;
/** iOS only */
codec?: keyof VideoCodec | VideoCodec[keyof VideoCodec];
}
interface RecordResponse {
/** Path to the video saved on your app's cache directory. */
uri: string;
videoOrientation: number;
deviceOrientation: number;
isRecordingInterrupted: boolean;
/** iOS only */
codec: VideoCodec[keyof VideoCodec];
}
```
### Usage example
```js
takeVideo = async () => {
if (this.camera) {
try {
const promise = this.camera.recordAsync(this.state.recordOptions);
if (promise) {
this.setState({ isRecording: true });
const data = await promise;
this.setState({ isRecording: false });
console.warn('takeVideo', data);
}
} catch (e) {
console.error(e);
}
}
};
```
---
## refreshAuthorizationStatus()
Allows to make RNCamera check Permissions again and set status accordingly.
Making it possible to refresh status of RNCamera after user initially rejected the permissions.
### Method type
```ts
refreshAuthorizationStatus(): Promise<void>;
```
### Usage example
```js
/* -> {
} */
```
---
## stopRecording()
Should be called after recordAsync() to make the promise be fulfilled and get the video uri.
### Method type
```ts
stopRecording(): void;
```
### Usage example
```js
stopRecording(): void;
/* -> {
} */
```
---
## pausePreview()
Pauses the preview. The preview can be resumed again by using resumePreview().
### Method type
```ts
pausePreview(): void;
```
### Usage example
```js
/* -> {
} */
```
---
## resumePreview()
Resumes the preview after pausePreview() has been called.
### Method type
```ts
resumePreview(): void;
```
### Usage example
```js
/* -> {
} */
```
---
## getAvailablePictureSizes()
Returns a promise with getAvailablePictureSizes.
### Method type
```ts
getAvailablePictureSizes(): Promise<string[]>;
```
### Usage example
```js
/* -> {
} */
```
---
## getSupportedRatiosAsync() - Android only
Android only. Returns a promise. The promise will be fulfilled with an object with an array containing strings with all camera aspect ratios supported by the device.
### Method type
```ts
getSupportedRatiosAsync(): Promise<string[]>;
```
### Usage example
```js
/* -> {
} */
```
---
## isRecording() - iOS only
iOS only. Returns a promise. The promise will be fulfilled with a boolean indicating if currently recording is started or stopped.
### Method type
```ts
isRecording(): Promise<boolean>;
```
### Usage example
```js
const isRecording = await isRecording();
/* -> {
isRecording = true
} */
```
---

11
docs/Contributing.md Normal file
View File

@ -0,0 +1,11 @@
---
id: contributing
title: Contributing
sidebar_label: Contributing
---
- Pull Requests are welcome, if you open a pull request we will do our best to get to it in a timely manner
- Pull Request Reviews are even more welcome! we need help testing, reviewing, and updating open PRs
- If you are interested in contributing more actively, please contact me (same username on Twitter, Facebook, etc.) Thanks!
- We are now on [Open Collective](https://opencollective.com/react-native-camera#sponsor)! Contributions are appreciated and will be used to fund core contributors. [more details](#open-collective)
- If you want to help us coding, join Expo slack https://slack.expo.io/, so we can chat over there. (#react-native-camera)

6
docs/GradleUpgradeGuide.md
View File

@ -1,4 +1,8 @@
# Upgrade gradle for Android projects
---
id: GradleUpgradeGuide
title: Upgrade gradle for Android projects
sidebar_label: Gradle Upgrade Guide
---
To integrate react-native-camera into your own react native project and make it work for Android, you need to edit the following files in the `android` folder under your project folder:

29
docs/QA.md
View File

@ -1,4 +1,8 @@
## Q & A
---
id: qa
title: Q & A
sidebar_label: Q & A
---
- [meta-data android 26](#meta-data-android-26)
- [Manifest merger failed](#when-i-try-to-build-my-project-i-get-following-error)
@ -6,7 +10,7 @@
- [How can I get thumbnails for my video?](#how-can-i-get-thumbnails-for-my-video)
- [How can I save my video/image to the camera roll?](#hoc-can-i-save-my-video-image-to-the-camera-roll)
#### meta-data android 26
## meta-data android 26
```
AndroidManifest.xml:25:13-35 Error:
@ -40,7 +44,7 @@ Add this to your AndroidManifest.xml:
---
#### When I try to build my project, I get following error:
## When I try to build my project, I get following error:
```
Execution failed for task ':app:processDebugManifest'.
@ -49,7 +53,7 @@ Execution failed for task ':app:processDebugManifest'.
Suggestion: add 'tools:replace="android:value"' to <meta-data> element at AndroidManifest.xml:23:9-25:38 to override.
```
#### As the error message hints `com.android.support:exifinterface:26.0.2` is already found in `com.android.support:support-v4:26.0.1`
## As the error message hints `com.android.support:exifinterface:26.0.2` is already found in `com.android.support:support-v4:26.0.1`
To fix this issue, modify your project's `android/app/build.gradle` as follows:
@ -76,25 +80,25 @@ dependencies {
---
#### How can I resize captured images?
## How can I resize captured images?
Currently, `RNCamera` does not allow for specifying the desired resolution of the captured image, nor does it natively expose any functionality to resize images.
One way to achieve this (without any additional dependencies )is using [react-native.ImageEditor.cropImage](https://facebook.github.io/react-native/docs/imageeditor.html#cropimage).
The strategy is:
1. Capture an image using `RNCamera`, which uses the device's max resolution.
2. Use `react-native.ImageEditor.cropImage()` to crop the image using the image's native size as the crop size (thus maintaiing the original image), and the desired new size as the `displaySize` attribute (thus resizing the image).
1. Capture an image using `RNCamera`, which uses the device's max resolution.
2. Use `react-native.ImageEditor.cropImage()` to crop the image using the image's native size as the crop size (thus maintaiing the original image), and the desired new size as the `displaySize` attribute (thus resizing the image).
```javascript
import React, { Component } from 'react';
import React, { PureComponent } from 'react';
import { Button, ImageEditor } from 'react-native';
import { RNCamera } from 'react-native-camera';
class CameraComponent extends Component {
class CameraComponent extends PureComponent {
// ...
capturePicture = function () {
capturePicture = () => {
if (this.camera) {
// 1) Capture the image using RNCamera API
this.camera.takePictureAsync(options)
@ -138,12 +142,11 @@ class CameraComponent extends Component {
```
#### How can I get thumbnails for my video
## How can I get thumbnails for my video
We recommend using the library [`react-native-thumbnail`](https://github.com/phuochau/react-native-thumbnail) for generating thumbnails of your video files.
#### How can I save my video/image to the camera roll?
## How can I save my video/image to the camera roll?
You can use the [`CameraRoll` Module](https://facebook.github.io/react-native/docs/cameraroll.htm).
You must follow the setup instructions in the `react-native` documentation, since `CameraRoll` module needs to be linked first.

104
docs/RNCamera.md
View File

@ -1,4 +1,8 @@
# RNCamera
---
id: rncamera
title: RNCamera
sidebar_label: RNCamera
---
## Usage
@ -7,11 +11,11 @@ All you need is to `import` `{ RNCamera }` from the `react-native-camera` module
```javascript
'use strict';
import React, { Component } from 'react';
import React, { PureComponent } from 'react';
import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
class BadInstagramCloneApp extends Component {
class ExampleApp extends PureComponent {
render() {
return (
<View style={styles.container}>
@ -47,7 +51,7 @@ class BadInstagramCloneApp extends Component {
);
}
takePicture = async function() {
takePicture = async() => {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
@ -78,7 +82,7 @@ const styles = StyleSheet.create({
},
});
AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
AppRegistry.registerComponent('ExampleApp', () => ExampleApp);
```
## FaCC (Function as Child Components)
@ -87,7 +91,7 @@ AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp
```javascript
'use strict';
import React, { Component } from 'react';
import React, { PureComponent } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
@ -104,7 +108,7 @@ const PendingView = () => (
</View>
);
class App extends Component {
class ExampleApp extends PureComponent {
render() {
return (
<View style={styles.container}>
@ -170,20 +174,20 @@ const styles = StyleSheet.create({
},
});
AppRegistry.registerComponent('BadInstagramCloneApp', () => App);
AppRegistry.registerComponent('ExampleApp', () => ExampleApp);
```
#### `camera`
### `camera`
_It's the RNCamera's reference_
#### `status`
### `status`
One of `RNCamera.Constants.CameraStatus`
'READY' | 'PENDING_AUTHORIZATION' | 'NOT_AUTHORIZED'
#### `recordAudioPermissionStatus`
### `recordAudioPermissionStatus`
One of `RNCamera.Constants.RecordAudioPermissionStatus`.
@ -191,7 +195,7 @@ One of `RNCamera.Constants.RecordAudioPermissionStatus`.
## Properties
#### `autoFocus`
### `autoFocus`
Values: `RNCamera.Constants.AutoFocus.on` (default) or `RNCamera.Constants.AutoFocus.off`
@ -199,7 +203,7 @@ Most cameras have a Auto Focus feature. It adjusts your camera lens position aut
Use the `autoFocus` property to specify the auto focus setting of your camera. `RNCamera.Constants.AutoFocus.on` turns it ON, `RNCamera.Constants.AutoFocus.off` turns it OFF.
#### `autoFocusPointOfInterest`
### `autoFocusPointOfInterest`
Values: Object `{ x: 0.5, y: 0.5 }`.
@ -210,14 +214,14 @@ Coordinates values are measured as floats from `0` to `1.0`. `{ x: 0, y: 0 }` wi
Hint:
for portrait orientation, apply 90° clockwise rotation + translation: [Example](https://gist.github.com/Craigtut/6632a9ac7cfff55e74fb561862bc4edb)
#### `captureAudio`
### `captureAudio`
Values: boolean `true` (default) | `false`
Specifies if audio recording permissions should be requested.
Make sure to follow README instructions for audio recording permissions [here](../README.md).
Make sure to follow README instructions for audio recording permissions [here](README.md).
#### `flashMode`
### `flashMode`
Values: `RNCamera.Constants.FlashMode.off` (default), `RNCamera.Constants.FlashMode.on`, `RNCamera.Constants.FlashMode.auto` or `RNCamera.Constants.FlashMode.torch`.
@ -231,25 +235,25 @@ Specifies the flash mode of your camera.
`RNCamera.Constants.FlashMode.torch` turns on torch mode, meaning the flash light will be turned on all the time (even before taking photo) just like a flashlight.
#### `focusDepth`
### `focusDepth`
Value: float from `0` to `1.0`
Manually set camera focus. Only works with `autoFocus` off. The value 0 is minimum focus depth, 1 is maximum focus depth. For a medium focus depth, for example, you could use 0.5.
#### `Android` `ratio`
### `Android` `ratio`
A string representing the camera ratio in the format 'height:width'. Default is `"4:3"`.
Use `getSupportedRatiosAsync` method to get ratio strings supported by your camera on Android.
#### `type`
### `type`
Values: `RNCamera.Constants.Type.front` or `RNCamera.Constants.Type.back` (default)
Use the `type` property to specify which camera to use.
#### `whiteBalance`
### `whiteBalance`
Values: `RNCamera.Constants.WhiteBalance.sunny`, `RNCamera.Constants.WhiteBalance.cloudy`, `RNCamera.Constants.WhiteBalance.shadow`, `RNCamera.Constants.WhiteBalance.incandescent`, `RNCamera.Constants.WhiteBalance.fluorescent` or `RNCamera.Constants.WhiteBalance.auto` (default)
@ -259,33 +263,33 @@ The idea is that you select the appropriate white balance setting for the type o
Use the `whiteBalance` property to specify which white balance setting the camera should use.
#### `zoom`
### `zoom`
Value: float from `0` to `1.0`
Specifies the zoom of your camera. The value 0 is no zoom, 1 is maximum zoom. For a medium zoom, for example, you could pass `0.5`.
#### `Android` `permissionDialogTitle` - Deprecated
### `Android` `permissionDialogTitle` - Deprecated
Starting on android M individual permissions must be granted for certain services, the camera is one of them, you can use this to change the title of the dialog prompt requesting permissions.
#### `Android` `permissionDialogMessage` - Deprecated
### `Android` `permissionDialogMessage` - Deprecated
Starting on android M individual permissions must be granted for certain services, the camera is one of them, you can use this to change the content of the dialog prompt requesting permissions.
#### `Android` `androidRecordAudioPermissionOptions`
### `Android` `androidRecordAudioPermissionOptions`
Configuration options for permissions request for recording audio. It will be passed as `rationale` parameter to [`PermissionsAndroid.request`](https://facebook.github.io/react-native/docs/permissionsandroid#request). This replaces and deprecates old `permissionDialogTitle` and `permissionDialogMessage` parameters.
#### `Android` `androidCameraPermissionOptions`
### `Android` `androidCameraPermissionOptions`
Configuration options for permissions request for camera. It will be passed as `rationale` parameter to [`PermissionsAndroid.request`](https://facebook.github.io/react-native/docs/permissionsandroid#request). This replaces and deprecates old `permissionDialogTitle` and `permissionDialogMessage` parameters.
#### `notAuthorizedView`
### `notAuthorizedView`
By default a `Camera not authorized` message will be displayed when access to the camera has been denied, if set displays the passed react element instead of the default one.
#### `pendingAuthorizationView`
### `pendingAuthorizationView`
By default a <ActivityIndicator> will be displayed while the component is waiting for the user to grant/deny access to the camera, if set displays the passed react element instead of the default one.
@ -328,15 +332,15 @@ Note: This solve the flicker video recording issue for iOS
### Native Event callbacks props
#### `onCameraReady`
### `onCameraReady`
Function to be called when native code emit onCameraReady event, when camera is ready.
#### `onMountError`
### `onMountError`
Function to be called when native code emit onMountError event, when there is a problem mounting the camera.
#### `onStatusChange`
### `onStatusChange`
Function to be called when native code emits status changes in relation to authorization changes.
@ -345,13 +349,13 @@ Event contains the following fields:
- `cameraStatus` - one of the [CameraStatus](#status) values
- `recordAudioPermissionStatus` - one of the [RecordAudioPermissionStatus](#recordAudioPermissionStatus) values
#### `Android` `onPictureTaken`
### `Android` `onPictureTaken`
Function to be called when native code emit onPictureTaken event, when camera has taken a picture.
### Bar Code Related props
#### `onBarCodeRead`
### `onBarCodeRead`
Will call the specified method when a barcode is detected in the camera's view.
@ -404,16 +408,16 @@ The following barcode types can be recognised:
- `itf14` (when available)
- `datamatrix` (when available)
#### `barCodeTypes`
### `barCodeTypes`
An array of barcode types to search for. Defaults to all types listed above. No effect if `onBarCodeRead` is undefined.
Example: `<RNCamera barCodeTypes={[RNCamera.Constants.BarCodeType.qr]} />`
#### `onGoogleVisionBarcodesDetected`
### `onGoogleVisionBarcodesDetected`
Like `onBarCodeRead`, but using Firebase MLKit to scan barcodes. More info can be found [here](https://firebase.google.com/docs/ml-kit/read-barcodes) Note: If you already set `onBarCodeRead`, this will be invalid.
#### `googleVisionBarcodeType`
### `googleVisionBarcodeType`
Like `barCodeTypes`, but applies to the Firebase MLKit barcode detector.
Example: `<RNCamera googleVisionBarcodeType={RNCamera.Constants.GoogleVisionBarcodeDetection.BarcodeType.DATA_MATRIX} />`
@ -433,7 +437,7 @@ Available settings:
- DATA_MATRIX
- ALL
#### `Android` `googleVisionBarcodeMode`
### `Android` `googleVisionBarcodeMode`
Change the mode in order to scan "inverted" barcodes. You can either change it to `alternate`, which will inverted the image data every second screen and be able to read both normal and inverted barcodes, or `inverted`, which will only read inverted barcodes. Default is `normal`, which only reads "normal" barcodes. Note: this property only applies to the Google Vision barcode detector.
Example: `<RNCamera googleVisionBarcodeMode={RNCamera.Constants.GoogleVisionBarcodeDetection.BarcodeMode.ALTERNATE} />`
@ -442,15 +446,15 @@ Example: `<RNCamera googleVisionBarcodeMode={RNCamera.Constants.GoogleVisionBarc
RNCamera uses the Firebase MLKit for Face Detection, you can read more about it [here](https://firebase.google.com/docs/ml-kit/detect-faces).
#### `onFacesDetected`
### `onFacesDetected`
Method to be called when face is detected. Receives a Faces Detected Event object. The interesting value of this object is the `faces` value, which is an array of Face objects. You can find more details about the possible values of these objects [here](https://firebase.google.com/docs/ml-kit/face-detection-concepts)
#### `onFaceDetectionError`
### `onFaceDetectionError`
Method to be called if there was an Face Detection Error, receives an object with the `isOperational` property set to `false` if Face Detector is NOT operational and `true`if it is.
#### `faceDetectionMode`
### `faceDetectionMode`
Values: `RNCamera.Constants.FaceDetection.Mode.fast` (default) or `RNCamera.Constants.FaceDetection.Mode.accurate`
@ -458,13 +462,13 @@ Specifies the face detection mode of the Face Detection API.
Use `RNCamera.Constants.FaceDetection.Mode.accurate` if you want slower but more accurate results.
#### `faceDetectionLandmarks`
### `faceDetectionLandmarks`
Values: `RNCamera.Constants.FaceDetection.Landmarks.all` or `RNCamera.Constants.FaceDetection.Landmarks.none` (default)
A landmark is a point of interest within a face. The left eye, right eye, and nose base are all examples of landmarks. The Face API provides the ability to find landmarks on a detected face.
#### `faceDetectionClassifications`
### `faceDetectionClassifications`
Values: `RNCamera.Constants.FaceDetection.Classifications.all` or `RNCamera.Constants.FaceDetection.Classifications.none` (default)
@ -474,13 +478,13 @@ Classification is determining whether a certain facial characteristic is present
RNCamera uses the Firebase MLKit for Text Recognition, you can read more info about it [here](https://firebase.google.com/docs/ml-kit/recognize-text).
#### `onTextRecognized`
### `onTextRecognized`
Method to be called when text is detected. Receives a Text Recognized Event object. The interesting value of this object is the `textBlocks` value, which is an array of TextBlock objects.
## Component instance methods
#### `takePictureAsync([options]): Promise`
### `takePictureAsync([options]): Promise`
Takes a picture, saves in your app's cache directory and returns a promise.
@ -518,7 +522,7 @@ The promise will be fulfilled with an object with some of the following properti
- `pictureOrientation`: (number) the orientation of the picture
- `deviceOrientation`: (number) the orientation of the device
#### `recordAsync([options]): Promise`
### `recordAsync([options]): Promise`
Records a video, saves it in your app's cache directory and returns a promise when stopRecording is called or either maxDuration or maxFileSize specified are reached.
@ -586,28 +590,28 @@ The promise will be fulfilled with an object with some of the following properti
- `isRecordingInterrupted`: (boolean) whether the app has been minimized while recording
#### `refreshAuthorizationStatus: Promise<void>`
### `refreshAuthorizationStatus: Promise<void>`
Allows to make RNCamera check Permissions again and set status accordingly.
Making it possible to refresh status of RNCamera after user initially rejected the permissions.
#### `stopRecording: void`
### `stopRecording: void`
Should be called after recordAsync() to make the promise be fulfilled and get the video uri.
#### `pausePreview: void`
### `pausePreview: void`
Pauses the preview. The preview can be resumed again by using resumePreview().
#### `resumePreview: void`
### `resumePreview: void`
Resumes the preview after pausePreview() has been called.
#### `Android` `getSupportedRatiosAsync(): Promise`
### `Android` `getSupportedRatiosAsync(): Promise`
Android only. Returns a promise. The promise will be fulfilled with an object with an array containing strings with all camera aspect ratios supported by the device.
#### `iOS` `isRecording(): Promise<boolean>`
### `iOS` `isRecording(): Promise<boolean>`
iOS only. Returns a promise. The promise will be fulfilled with a boolean indicating if currently recording is started or stopped.

10
docs/Recipes.md
View File

@ -1,4 +1,8 @@
# Recipes
---
id: recipes
title: Recipes
sidebar_label: Recipes
---
The idea is to provide a list of useful snippets, links and resources to be used together with react-native-camera
@ -18,7 +22,7 @@ const { shouldFaceDetect } = this.state;
Passing `null` to `onFaceDetected`, `onGoogleVisionBarcodesDetected`, `onTextRecognized`, `onBarCodeRead` automatically turns off the correspondent detector.
### Events continue if screen is mounted but not on top of stack
## Events continue if screen is mounted but not on top of stack
Lets say you use Face Detection, you take a picture and then takes the user to another screen to see that picture. Meanwhile, RNCamera is still mounted on the previous screen. `onFaceDetected` will still be called if you do not prevent it. For example (using [`react-navigation`](https://github.com/react-navigation/react-navigation):
@ -83,7 +87,7 @@ Because of different project requirements there is no gesture zoom (like pinch z
However we have some recipies for common zoom behaviours. If you implemented your own solution feel free to add it to the list!
### SlideUp Zoom
## SlideUp Zoom
```js
import React, { Component } from 'react';

6
docs/Expo_Usage.md → docs/expo_usage.md
View File

@ -1,4 +1,8 @@
# [Expo](https://expo.io/) Usage
---
id: expo_usage
title: Expo Usage
sidebar_label: Expo Usage
---
RNCamera of react-native-camera is heavily based on Expo camera module. Thanks @aalices and Expo for the great work.

418
docs/installation.md Normal file
View File

@ -0,0 +1,418 @@
---
id: installation
title: Installation
---
## Requirements
1. JDK >= 1.7 (if you run on 1.6 you will get an error on "\_cameras = new HashMap<>();")
2. With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the Info.plist of your project. This should be found in 'your_project/ios/your_project/Info.plist'. Add the following code:
```
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>
```
3. On Android, you require `buildToolsVersion` of `25.0.2+`. _This should easily and automatically be downloaded by Android Studio's SDK Manager._
4. On iOS 11 and later you need to add `NSPhotoLibraryAddUsageDescription` key to the Info.plist. This key lets you describe the reason your app seeks write-only access to the user’s photo library. Info.plist can be found in 'your_project/ios/your_project/Info.plist'. Add the following code:
```
<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
```
## Mostly automatic install with react-native
1. `npm install react-native-camera --save`
2. `react-native link react-native-camera`
_To install it with Windows, see manual install below_
## Mostly automatic install with CocoaPods
1. `npm install react-native-camera --save`
2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:
```obj-c
pod 'react-native-camera', path: '../node_modules/react-native-camera'
```
3. Run `pod install`
_Note:_ You might need to adjust your Podfile following the example below:
```ruby
target 'yourTargetName' do
# See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # Include this for RN >= 0.47
'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
'RCTText',
'RCTNetwork',
'RCTWebSocket', # Needed for debugging
'RCTAnimation', # Needed for FlatList and animations running on native UI thread
# Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
# Third party deps podspec link
pod 'react-native-camera', path: '../node_modules/react-native-camera'
end
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name == "React"
target.remove_from_project
end
end
end
```
## Manual install
## iOS
1. `npm install react-native-camera --save`
2. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
3. Go to `node_modules` ➜ `react-native-camera` and add `RNCamera.xcodeproj`
4. Expand the `RNCamera.xcodeproj` ➜ `Products` folder
5. In XCode, in the project navigator, select your project. Add `libRNCamera.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
6. Click `RNCamera.xcodeproj` in the project navigator and go the `Build Settings` tab. Make sure 'All' is toggled on (instead of 'Basic'). In the `Search Paths` section, look for `Header Search Paths` and make sure it contains both `$(SRCROOT)/../../react-native/React` and `$(SRCROOT)/../../../React` - mark both as `recursive`.
### Face Detection/Text Recognition/BarCode(using MLKit) Steps
Face Detection/Text Recognition/BarCode(using MLKit) are optional on iOS. If you want them, you will need to use CocoaPods path and set-up Firebase project for your app (detailed steps below).
_Note:_ Installing react-native-firebase package is NOT necessary.
### Modifying Podfile
Modify the dependency towards `react-native-camera` in your
`Podfile`, from
```
pod 'react-native-camera', path: '../node_modules/react-native-camera'
```
to (for Face Detection)
```
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'FaceDetectorMLKit'
]
```
or to (for Text Recognition)
```
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'TextDetector'
]
```
or to (for Barcode Recognition)
```
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'BarcodeDetectorMLKit'
]
```
or to (all possible detections)
```
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'TextDetector',
'FaceDetectorMLKit',
'BarcodeDetectorMLKit'
]
```
## Setting up Firebase
Text/Face recognition for iOS uses Firebase MLKit which requires setting up Firebase project for your app.
If you have not already added Firebase to your app, please follow the steps described in [getting started guide](https://firebase.google.com/docs/ios/setup).
In short, you would need to
1. Register your app in Firebase console.
2. Download `GoogleService-Info.plist` and add it to your project
3. Add `pod 'Firebase/Core'` to your podfile
4. In your `AppDelegate.m` file add the following lines:
```objective-c
#import <Firebase.h> // <--- add this
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[FIRApp configure]; // <--- add this
...
}
```
- If you have issues with duplicate symbols you will need to enable dead code stripping option in your Xcode (Target > Build Settings > search for "Dead code stripping") [see here](https://github.com/firebase/quickstart-ios/issues/487#issuecomment-415313053).
- If you are using `pod Firebase/Core` with a version set below 5.13 you might want to add `pod 'GoogleAppMeasurement', '~> 5.3.0'` to your podfile
### Android
1. `npm install react-native-camera --save`
2. Open up `android/app/src/main/java/[...]/MainApplication.java`
- Add `import org.reactnative.camera.RNCameraPackage;` to the imports at the top of the file
- Add `new RNCameraPackage()` to the list returned by the `getPackages()` method. Add a comma to the previous item if there's already something there.
3. Append the following lines to `android/settings.gradle`:
```gradle
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
```
4. Insert the following lines in `android/app/build.gradle`:
inside the dependencies block:
```gradle
implementation project(':react-native-camera')
```
inside defaultConfig block insert either:
```gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
}
}
```
or, if using MLKit for text/face/barcode recognition:
```gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'mlkit' <-- insert this line
}
}
```
5. Declare the permissions in your Android Manifest (required for `video recording` feature)
```xml
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
```
6. Add jitpack to android/build.gradle
```gradle
allprojects {
repositories {
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
}
}
```
7. Additional steps for using MLKit for text/face/barcode recognition
7.1. Using Firebase MLKit requires seting up Firebase project for your app. If you have not already added Firebase to your app, please follow the steps described in [getting started guide](https://firebase.google.com/docs/android/setup).
In short, you would need to
- Register your app in Firebase console.
- Download google-services.json and place it in `android/app/`
- add the folowing to project level build.gradle:
```gradle
buildscript {
dependencies {
// Add this line
classpath 'com.google.gms:google-services:4.0.1' <-- you might want to use different version
}
}
```
- add to the bottom of `android/app/build.gradle` file
```gradle
apply plugin: 'com.google.gms.google-services'
```
7.2. Configure your app to automatically download the ML model to the device after your app is installed from the Play Store. If you do not enable install-time model downloads, the model will be downloaded the first time you run the on-device detector. Requests you make before the download has completed will produce no results.
```xml
<application ...>
...
<meta-data
android:name="com.google.firebase.ml.vision.DEPENDENCIES"
android:value="ocr" />
<!-- To use multiple models, list all needed models: android:value="ocr, face, barcode" -->
</application>
```
The current Android library defaults to the below values for the Google SDK and Libraries,
```gradle
def DEFAULT_COMPILE_SDK_VERSION = 26
def DEFAULT_BUILD_TOOLS_VERSION = "26.0.2"
def DEFAULT_TARGET_SDK_VERSION = 26
def DEFAULT_GOOGLE_PLAY_SERVICES_VERSION = "12.0.1"
def DEFAULT_SUPPORT_LIBRARY_VERSION = "27.1.0"
```
You can override this settings by adding a Project-wide gradle configuration properties for
use by all modules in your ReactNative project by adding the below to `android/build.gradle`
file,
```gradle
buildscript {...}
allprojects {...}
/**
* Project-wide gradle configuration properties for use by all modules
*/
ext {
compileSdkVersion = 26
targetSdkVersion = 26
buildToolsVersion = "26.0.2"
googlePlayServicesVersion = "12.0.1"
googlePlayServicesVisionVersion = "15.0.2"
supportLibVersion = "27.1.0"
}
```
The above settings in the ReactNative project over-rides the values present in the `react-native-camera`
module. For your reference below is the `android/build.gradle` file of the module.
```gradle
def safeExtGet(prop, fallback) {
rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
}
buildscript {
repositories {
google()
maven {
url 'https://maven.google.com'
}
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.3.1'
}
}
apply plugin: 'com.android.library'
android {
compileSdkVersion safeExtGet('compileSdkVersion', 28)
buildToolsVersion safeExtGet('buildToolsVersion', '28.0.3')
defaultConfig {
minSdkVersion safeExtGet('minSdkVersion', 16)
targetSdkVersion safeExtGet('targetSdkVersion', 28)
}
flavorDimensions "react-native-camera"
productFlavors {
general {
dimension "react-native-camera"
}
mlkit {
dimension "react-native-camera"
}
}
sourceSets {
main {
java.srcDirs = ['src/main/java']
}
general {
java.srcDirs = ['src/general/java']
}
mlkit {
java.srcDirs = ['src/mlkit/java']
}
}
lintOptions {
abortOnError false
warning 'InvalidPackage'
}
}
repositories {
google()
jcenter()
maven {
url 'https://maven.google.com'
}
maven { url "https://jitpack.io" }
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
dependencies {
def googlePlayServicesVisionVersion = safeExtGet('googlePlayServicesVisionVersion', safeExtGet('googlePlayServicesVersion', '17.0.2'))
implementation 'com.facebook.react:react-native:+'
implementation "com.google.zxing:core:3.3.3"
implementation "com.drewnoakes:metadata-extractor:2.11.0"
generalImplementation "com.google.android.gms:play-services-vision:$googlePlayServicesVisionVersion"
implementation "com.android.support:exifinterface:${safeExtGet('supportLibVersion', '28.0.0')}"
implementation "com.android.support:support-annotations:${safeExtGet('supportLibVersion', '28.0.0')}"
implementation "com.android.support:support-v4:${safeExtGet('supportLibVersion', '28.0.0')}"
mlkitImplementation "com.google.firebase:firebase-ml-vision:${safeExtGet('firebase-ml-vision', '19.0.3')}"
mlkitImplementation "com.google.firebase:firebase-ml-vision-face-model:${safeExtGet('firebase-ml-vision-face-model', '17.0.2')}"
}
```
If you are using a version of `googlePlayServicesVersion` that does not have `play-services-vision`, you can specify a different version of `play-services-vision` by adding `googlePlayServicesVisionVersion` to the project-wide properties
```
ext {
compileSdkVersion = 26
targetSdkVersion = 26
buildToolsVersion = "26.0.2"
googlePlayServicesVersion = "16.0.1"
googlePlayServicesVisionVersion = "15.0.2"
supportLibVersion = "27.1.0"
}
```
### Windows
1. `npm install react-native-camera --save`
2. Link the library as described here: [react-native-windows / LinkingLibrariesWindows.md](https://github.com/Microsoft/react-native-windows/blob/master/docs/LinkingLibrariesWindows.md)
For the last step of this guide, you have to add the following things to your `MainReactNativeHost.cs`:
- in the import section at the very top: `using RNCamera;`
- in `protected override List<IReactPackage> Packages => new List<IReactPackage>` add a new line with `new RNCameraPackage()`
3. Add the capabilities (permissions) for the webcam and microphone as described here: [docs.microsoft / audio-video-camera](https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/simple-camera-preview-access#add-capability-declarations-to-the-app-manifest)
4. Use `RCTCamera` (RNCamera is not supported yet) like described above
Follow the [Q & A](QA.md) section if you are having compilation issues.

6
docs/migration.md
View File

@ -1,4 +1,8 @@
# Migrating from RCTCamera to RNCamera
---
id: migration
title: Migrating from RCTCamera to RNCamera
sidebar_label: Migrating from RCTCamera to RNCamera
---
## Project Integration

6
docs/migrationV2.md
View File

@ -1,4 +1,8 @@
# Migrating from version 1.x to 2.x
---
id: migrationv2
title: Migrating from version 1.x to 2.x
sidebar_label: Migrating from version 1.x to 2.x
---
Version 2.x of react-native-camera moves to using Firebase MLKit for advanced features such as text/face recognition. Users can now opt into useing MLKit in their app by choosing a certain flavor of the library (Android) or selecting a desired podspec (iOS). This allows users who do not need Firebase MLKit-based features to not be forced to set up a Firebase project.

6
docs/react-navigation.md
View File

@ -1,4 +1,8 @@
# react-navigation
---
id: react-navigation
title: React Navigation
sidebar_label: React Navigation
---
React-navigation does not unmount components when switching between tabs. So when you leave and return back to the screen with the camera component it will just be black view. So a good solution is to use `componentDidMount` and added two listeners `willFocus` and `willBlur` to help you mount and unmount the views.

7
docs/tests.md
View File

@ -1,5 +1,8 @@
# Testing
---
id: tests
title: Testing
sidebar_label: Testing
---
## Jest
To test a component which use RNCamera, you need to create a react-native-camera.js file inside your **mocks** folder on the root of your project with the following content:

193
website/README.md Normal file
View File

@ -0,0 +1,193 @@
This website was created with [Docusaurus](https://docusaurus.io/).
# What's In This Document
* [Get Started in 5 Minutes](#get-started-in-5-minutes)
* [Directory Structure](#directory-structure)
* [Editing Content](#editing-content)
* [Adding Content](#adding-content)
* [Full Documentation](#full-documentation)
# Get Started in 5 Minutes
1. Make sure all the dependencies for the website are installed:
```sh
# Install dependencies
$ yarn
```
2. Run your dev server:
```sh
# Start the site
$ yarn start
```
## Directory Structure
Your project file structure should look something like this
```
my-docusaurus/
docs/
doc-1.md
doc-2.md
doc-3.md
website/
blog/
2016-3-11-oldest-post.md
2017-10-24-newest-post.md
core/
node_modules/
pages/
static/
css/
img/
package.json
sidebar.json
siteConfig.js
```
# Editing Content
## Editing an existing docs page
Edit docs by navigating to `docs/` and editing the corresponding document:
`docs/doc-to-be-edited.md`
```markdown
---
id: page-needs-edit
title: This Doc Needs To Be Edited
---
Edit me...
```
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
## Editing an existing blog post
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
`website/blog/post-to-be-edited.md`
```markdown
---
id: post-needs-edit
title: This Blog Post Needs To Be Edited
---
Edit me...
```
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
# Adding Content
## Adding a new docs page to an existing sidebar
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
```md
---
id: newly-created-doc
title: This Doc Needs To Be Edited
---
My new content here..
```
1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
```javascript
// Add newly-created-doc to the Getting Started category of docs
{
"docs": {
"Getting Started": [
"quick-start",
"newly-created-doc" // new doc here
],
...
},
...
}
```
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
## Adding a new blog post
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
`website/siteConfig.js`
```javascript
headerLinks: [
...
{ blog: true, label: 'Blog' },
...
]
```
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
`website/blog/2018-05-21-New-Blog-Post.md`
```markdown
---
author: Frank Li
authorURL: https://twitter.com/foobarbaz
authorFBID: 503283835
title: New Blog Post
---
Lorem Ipsum...
```
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
## Adding items to your site's top navigation bar
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
`website/siteConfig.js`
```javascript
{
headerLinks: [
...
/* you can add docs */
{ doc: 'my-examples', label: 'Examples' },
/* you can add custom pages */
{ page: 'help', label: 'Help' },
/* you can add external links */
{ href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
...
],
...
}
```
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
## Adding custom pages
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
`website/siteConfig.js`
```javascript
{
headerLinks: [
...
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
...
],
...
}
```
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
# Full Documentation
Full documentation can be found on the [website](https://docusaurus.io/).

97
website/core/Footer.js Normal file
View File

@ -0,0 +1,97 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
class Footer extends React.Component {
docUrl(doc, language) {
const baseUrl = this.props.config.baseUrl;
const docsUrl = this.props.config.docsUrl;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
return `${baseUrl}${docsPart}${langPart}${doc}`;
}
pageUrl(doc, language) {
const baseUrl = this.props.config.baseUrl;
return baseUrl + (language ? `${language}/` : '') + doc;
}
render() {
return (
<footer className="nav-footer" id="footer">
<section className="sitemap">
<a href={this.props.config.baseUrl} className="nav-home">
{this.props.config.footerIcon && (
<img
src={this.props.config.baseUrl + this.props.config.footerIcon}
alt={this.props.config.title}
width="66"
height="58"
/>
)}
</a>
<div>
<h5>Docs</h5>
<a href={this.docUrl('installation.html', this.props.language)}>
Getting Started
</a>
<a href={this.docUrl('expo_usage.html', this.props.language)}>
Guides
</a>
<a href={this.docUrl('api.html', this.props.language)}>
API Reference
</a>
</div>
<div>
<h5>Community</h5>
<a href={this.pageUrl('users.html', this.props.language)}>
User Showcase
</a>
<a
href="https://stackoverflow.com/questions/tagged/react-native-camera"
target="_blank"
rel="noreferrer noopener">
Stack Overflow
</a>
<a href="https://spectrum.chat/">Project Chat</a>
</div>
<div>
<h5>More</h5>
<a href={this.props.config.repoUrl}>GitHub</a>
<a
className="github-button"
href={this.props.config.repoUrl}
data-icon="octicon-star"
data-count-href="/facebook/docusaurus/stargazers"
data-show-count="true"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star this project on GitHub">
Star
</a>
</div>
</section>
<a
href="https://opensource.facebook.com/"
target="_blank"
rel="noreferrer noopener"
className="fbOpenSource">
<img
src={`${this.props.config.baseUrl}img/oss_logo.png`}
alt="Facebook Open Source"
width="170"
height="45"
/>
</a>
<section className="copyright">{this.props.config.copyright}</section>
</footer>
);
}
}
module.exports = Footer;

74
website/i18n/en.json Normal file
View File

@ -0,0 +1,74 @@
{
"_comment": "This file is auto-generated by write-translations.js",
"localized-strings": {
"next": "Next",
"previous": "Previous",
"tagline": "The comprehensive camera module for React Native.",
"docs": {
"api": {
"title": "Work in progress"
},
"contributing": {
"title": "Contributing",
"sidebar_label": "Contributing"
},
"expo_usage": {
"title": "Expo Usage",
"sidebar_label": "Expo Usage"
},
"GradleUpgradeGuide": {
"title": "Upgrade gradle for Android projects",
"sidebar_label": "Gradle Upgrade Guide"
},
"installation": {
"title": "Installation"
},
"migration": {
"title": "Migrating from RCTCamera to RNCamera",
"sidebar_label": "Migrating from RCTCamera to RNCamera"
},
"migrationv2": {
"title": "Migrating from version 1.x to 2.x",
"sidebar_label": "Migrating from version 1.x to 2.x"
},
"qa": {
"title": "Q & A",
"sidebar_label": "Q & A"
},
"react-navigation": {
"title": "React Navigation",
"sidebar_label": "React Navigation"
},
"recipes": {
"title": "Recipes",
"sidebar_label": "Recipes"
},
"rncamera": {
"title": "RNCamera",
"sidebar_label": "RNCamera"
},
"tests": {
"title": "Testing",
"sidebar_label": "Testing"
}
},
"links": {
"Docs": "Docs",
"Guides": "Guides",
"API": "API",
"Help": "Help",
"GitHub": "GitHub"
},
"categories": {
"Getting Started": "Getting Started",
"Guides": "Guides",
"API": "API",
"Help": "Help"
}
},
"pages-strings": {
"Help Translate|recruit community translators for your project": "Help Translate",
"Edit this Doc|recruitment message asking to edit the doc source": "Edit",
"Translate this Doc|recruitment message asking to translate the docs": "Translate"
}
}

14
website/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"scripts": {
"examples": "docusaurus-examples",
"start": "docusaurus-start",
"build": "docusaurus-build",
"publish-gh-pages": "docusaurus-publish",
"write-translations": "docusaurus-write-translations",
"version": "docusaurus-version",
"rename-version": "docusaurus-rename-version"
},
"devDependencies": {
"docusaurus": "^1.11.0"
}
}

54
website/pages/en/help.js Normal file
View File

@ -0,0 +1,54 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const CompLibrary = require('../../core/CompLibrary.js');
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;
function Help(props) {
const {config: siteConfig, language = ''} = props;
const {baseUrl, docsUrl} = siteConfig;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
const supportLinks = [
{
content: `Learn more using the [documentation on this site.](${docUrl(
'installation.html',
)})`,
title: 'Browse Docs',
},
{
content: 'Ask questions about the documentation and project',
title: 'Join the community',
},
{
content: "Find out what's new with this project",
title: 'Stay up to date',
},
];
return (
<div className="docMainWrapper wrapper">
<Container className="mainContainer documentContainer postContainer">
<div className="post">
<header className="postHeader">
<h1>Need help?</h1>
</header>
<p>This project is maintained by a dedicated group of people.</p>
<GridBlock contents={supportLinks} layout="threeColumn" />
</div>
</Container>
</div>
);
}
module.exports = Help;

142
website/pages/en/index.js Normal file
View File

@ -0,0 +1,142 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const CompLibrary = require('../../core/CompLibrary.js');
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;
class HomeSplash extends React.Component {
render() {
const {siteConfig, language = ''} = this.props;
const {baseUrl, docsUrl} = siteConfig;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
const SplashContainer = props => (
<div className="homeContainer">
<div className="homeSplashFade">
<div className="wrapper homeWrapper">{props.children}</div>
</div>
</div>
);
const Logo = props => (
<div className="projectLogo">
<img src={props.img_src} alt="Project Logo" />
</div>
);
const ProjectTitle = () => (
<h2 className="projectTitle">
{siteConfig.title}
<small>{siteConfig.tagline}</small>
</h2>
);
const PromoSection = props => (
<div className="section promoSection">
<div className="promoRow">
<div className="pluginRowBlock">{props.children}</div>
</div>
</div>
);
const Button = props => (
<div className="pluginWrapper buttonWrapper">
<a className="button" href={props.href} target={props.target}>
{props.children}
</a>
</div>
);
return (
<SplashContainer>
<Logo img_src={`${baseUrl}img/undraw_monitor.svg`} />
<div className="inner">
<ProjectTitle siteConfig={siteConfig} />
<PromoSection>
<Button href={docUrl('installation.html')}>Try It Out</Button>
<Button href="#support">Support</Button>
<Button href="#collective">Open Collective</Button>
</PromoSection>
</div>
</SplashContainer>
);
}
}
class Index extends React.Component {
render() {
const { config: siteConfig, language = '' } = this.props;
const { baseUrl } = siteConfig;
const Block = props => (
<Container
padding={['bottom', 'top']}
id={props.id}
background={props.background}>
<GridBlock
align="center"
contents={props.children}
layout={props.layout}
/>
</Container>
);
const Support = () => (
<Block id="support">
{[
{
content:
'To make your landing page more attractive, use illustrations! Check out ' +
'If you use this library on your commercial/personal projects, you can help us by funding the work on specific issues that you choose by using [**IssueHunt.io**](https://issuehunt.io/repos/33218414)! \n\n' +
'This gives you the power to prioritize our work and support the project contributors. Moreover it\'ll guarantee the project will be updated and maintained in the long run.' +
'\n\n[![issuehunt-image](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/33218414)',
image: `${baseUrl}img/undraw_code_review.svg`,
imageAlign: 'right',
title: 'Support',
},
]}
</Block>
);
const backersList = Array(10).fill('x').map( (bk, i) => `<a href="https://opencollective.com/react-native-camera/backer/${i}/website" target="_blank"><img src="https://opencollective.com/react-native-camera/backer/${i}/avatar.svg"></a>`)
const sponsorsList = Array(10).fill('x').map( (bk, i) => `<a href="https://opencollective.com/react-native-camera/sponsor/${i}/website" target="_blank"><img src="https://opencollective.com/react-native-camera/sponsor/${i}/avatar.svg"></a>`)
const Backers = () => (
<Block id="collective" background="light">
{[
{
content: `**Backers**
\n\nSupport us with a monthly donation and help us continue our activities. [[**Become a backer**](https://opencollective.com/react-native-camera#backer)] \n\n\n ${backersList.join("")}
\n\n\n**Sponsors** \n\nBecome a sponsor and get your logo on our README on Github with a link to your site. [[**Become a sponsor**](https://opencollective.com/react-native-camera#sponsor)] \n\n\n ${sponsorsList.join("")}
`,
imageAlign: 'center',
title: 'Open Collective',
},
]}
</Block>
);
return (
<div>
<HomeSplash siteConfig={siteConfig} language={language} />
<div className="mainContainer">
<Backers />
<Support />
</div>
</div>
);
}
}
module.exports = Index;

48
website/pages/en/users.js Normal file
View File

@ -0,0 +1,48 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const CompLibrary = require('../../core/CompLibrary.js');
const Container = CompLibrary.Container;
class Users extends React.Component {
render() {
const {config: siteConfig} = this.props;
if ((siteConfig.users || []).length === 0) {
return null;
}
const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`;
const showcase = siteConfig.users.map(user => (
<a href={user.infoLink} key={user.infoLink}>
<img src={user.image} alt={user.caption} title={user.caption} />
</a>
));
return (
<div className="mainContainer">
<Container padding={['bottom', 'top']}>
<div className="showcaseSection">
<div className="prose">
<h1>Who is Using This?</h1>
<p>This project is used by many folks</p>
</div>
<div className="logos">{showcase}</div>
<p>Are you using this project?</p>
<a href={editUrl} className="button">
Add your company
</a>
</div>
</Container>
</div>
);
}
}
module.exports = Users;

8
website/sidebars.json Normal file
View File

@ -0,0 +1,8 @@
{
"docs": {
"Getting Started": ["installation", "contributing"],
"Guides": ["expo_usage", "GradleUpgradeGuide", "migration", "migrationv2", "react-navigation", "recipes", "rncamera", "tests"],
"API": ["api"],
"Help": ["qa"]
}
}

113
website/siteConfig.js Normal file
View File

@ -0,0 +1,113 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// See https://docusaurus.io/docs/site-config for all the possible
// site configuration options.
// List of projects/orgs using your project for the users page.
const users = [
// example to add showcase
// {
// caption: 'User1',
// // You will need to prepend the image path with your baseUrl
// // if it is not '/', like: '/test-site/img/image.jpg'.
// image: '/img/undraw_open_source.svg',
// infoLink: 'https://www.facebook.com',
// pinned: true,
// },
];
const siteConfig = {
title: 'React Native Camera', // Title for your website.
tagline: 'The comprehensive camera module for React Native.',
url: 'https://your-docusaurus-test-site.com', // Your website URL
baseUrl: '/', // Base URL for your project */
// For github.io type URLs, you would set the url and baseUrl like:
// url: 'https://facebook.github.io',
// baseUrl: '/test-site/',
// Used for publishing and more
projectName: 'React Native Camera',
organizationName: 'React Native Community',
// For top-level user or org sites, the organization is still the same.
// e.g., for the https://JoelMarcey.github.io site, it would be set like...
// organizationName: 'JoelMarcey'
// For no header links in the top nav bar -> headerLinks: [],
headerLinks: [
{doc: 'installation', label: 'Docs'},
{doc: 'expo_usage', label: 'Guides'},
{doc: 'api', label: 'API'},
{page: 'docs/qa', label: 'Help'},
{
href: 'https://github.com/react-native-community/react-native-camera',
label: 'GitHub',
},
],
// If you have users set above, you add it here:
users,
/* path to images for header/footer */
headerIcon: 'img/community.png',
footerIcon: 'img/community.png',
favicon: 'img/community.png',
/* Colors for website */
colors: {
primaryColor: '#111928',
secondaryColor: '#D73964',
},
/* Custom fonts for website */
/*
fonts: {
myFont: [
"Times New Roman",
"Serif"
],
myOtherFont: [
"-apple-system",
"system-ui"
]
},
*/
// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
copyright: `Copyright © ${new Date().getFullYear()}`,
usePrism: ['jsx'],
highlight: {
theme: 'atom-one-dark',
},
scripts: [
'https://buttons.github.io/buttons.js',
'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
'/js/code-blocks-buttons.js',
],
stylesheets: ['/css/code-block-buttons.css'],
// On page navigation for the current documentation page.
onPageNav: 'separate',
// No .html extensions for paths.
cleanUrl: true,
// Open Graph and Twitter card images.
ogImage: 'img/undraw_online.svg',
twitterImage: 'img/undraw_tweetstorm.svg',
// Show documentation's last contributor's name.
enableUpdateBy: true,
// Show documentation's last update time.
enableUpdateTime: true,
editUrl: 'https://github.com/react-native-community/react-native-camera/master/docs/',
// You may provide arbitrary config keys to be used as needed by your
// template. For example, if you need your repo's URL...
repoUrl: 'https://github.com/react-native-community/react-native-camera',
};
module.exports = siteConfig;

38
website/static/css/code-block-buttons.css Normal file
View File

@ -0,0 +1,38 @@
pre {
position: relative;
}
pre .btnIcon {
position: absolute;
top: 4px;
z-index: 2;
cursor: pointer;
border: 1px solid transparent;
padding: 0;
color: #fff;
background-color: transparent;
height: 30px;
transition: all .25s ease-out;
}
pre .btnIcon:hover {
text-decoration: none;
}
.btnIcon__body {
align-items: center;
display: flex;
}
.btnIcon svg {
fill: currentColor;
margin-right: .4em;
}
.btnIcon__label {
font-size: 11px;
}
.btnClipboard {
right: 10px;
}

25
website/static/css/custom.css Normal file
View File

@ -0,0 +1,25 @@
/* your custom css */
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}
@media only screen and (min-width: 1024px) {
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (min-width: 1400px) {
}
@media only screen and (min-width: 1500px) {
}
.nav-footer {
background: #111927;
}
.container .wrapper .imageAlignSide h2 {
text-align: center;
}

BIN
website/static/img/community.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
website/static/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 B

BIN
website/static/img/oss_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

1
website/static/img/undraw_code_review.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

1
website/static/img/undraw_monitor.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

1
website/static/img/undraw_note_list.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
website/static/img/undraw_online.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

1
website/static/img/undraw_open_source.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

1
website/static/img/undraw_operating_system.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

1
website/static/img/undraw_react.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

1
website/static/img/undraw_tweetstorm.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

1
website/static/img/undraw_youtube_tutorial.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

54
website/static/js/code-blocks-buttons.js Normal file
View File

@ -0,0 +1,54 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// Turn off ESLint for this file because it's sent down to users as-is.
/* eslint-disable */
window.addEventListener('load', function() {
function button(label, ariaLabel, icon, className) {
const btn = document.createElement('button');
btn.classList.add('btnIcon', className);
btn.setAttribute('type', 'button');
btn.setAttribute('aria-label', ariaLabel);
btn.innerHTML =
'<div class="btnIcon__body">' +
icon +
'<strong class="btnIcon__label">' +
label +
'</strong>' +
'</div>';
return btn;
}
function addButtons(codeBlockSelector, btn) {
document.querySelectorAll(codeBlockSelector).forEach(function(code) {
code.parentNode.appendChild(btn.cloneNode(true));
});
}
const copyIcon =
'<svg width="12" height="12" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';
addButtons(
'.hljs',
button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard'),
);
const clipboard = new ClipboardJS('.btnClipboard', {
target: function(trigger) {
return trigger.parentNode.querySelector('code');
},
});
clipboard.on('success', function(event) {
event.clearSelection();
const textEl = event.trigger.querySelector('.btnIcon__label');
textEl.textContent = 'Copied';
setTimeout(function() {
textEl.textContent = 'Copy';
}, 2000);
});
});

6039
website/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff