Create migration guide.
This commit is contained in:
parent
0e5b97817a
commit
5ec8fa59cc
|
@ -37,6 +37,10 @@ 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](https://github.com/react-native-community/react-native-camera/blob/master/docs/migration.md).
|
||||
|
||||
## Getting started
|
||||
|
||||
### Requirements
|
||||
|
@ -142,7 +146,12 @@ Google Symbol Utilities: https://www.gstatic.com/cpdc/dbffca986f6337f8-GoogleSym
|
|||
4. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
|
||||
|
||||
```gradle
|
||||
compile project(':react-native-camera')
|
||||
compile (project(':react-native-camera')) {
|
||||
exclude group: "com.google.android.gms"
|
||||
}
|
||||
compile ("com.google.android.gms:play-services-vision:10.2.0") {
|
||||
force = true;
|
||||
}
|
||||
```
|
||||
5. Declare the permissions in your Android Manifest (required for `video recording` feature)
|
||||
|
||||
|
@ -161,6 +170,8 @@ allprojects {
|
|||
}
|
||||
```
|
||||
|
||||
Follow the Q & A section if you are having compilation issues.
|
||||
|
||||
## Usage
|
||||
|
||||
### RNCamera
|
||||
|
|
|
@ -0,0 +1,124 @@
|
|||
# Migrating from RCTCamera to RNCamera
|
||||
|
||||
## Compiling
|
||||
|
||||
Please follow the [RNCamera doc](https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md) instalation guide to install the face detection frameworks on both platforms.
|
||||
|
||||
|
||||
### Android
|
||||
|
||||
On `android/app/build.gradle`, change the line: `compile (project(':react-native-camera'))` to:
|
||||
```gradle
|
||||
compile (project(':react-native-camera')) {
|
||||
exclude group: "com.google.android.gms"
|
||||
}
|
||||
compile ("com.google.android.gms:play-services-vision:10.2.0") {
|
||||
force = true;
|
||||
}
|
||||
```
|
||||
|
||||
Add jitpack to android/build.gradle
|
||||
```gradle
|
||||
allprojects {
|
||||
repositories {
|
||||
maven { url "https://jitpack.io" }
|
||||
}
|
||||
}```
|
||||
|
||||
## Usage differences
|
||||
|
||||
### imports
|
||||
|
||||
Instead of importing `Camera`, now, you should import `{ RNCamera }` from `react-native-camera`.
|
||||
|
||||
### No `captureMode` prop
|
||||
|
||||
On RCTCamera, you would set the camera `captureMode` to `still` or `video` and you could only record or take a picture depending on the `captureMode` of your `Camera`.
|
||||
|
||||
On RNCamera you do not need to specify `captureMode`. The RNCameara, in any state, can record or take a picture calling the appropriate method.
|
||||
|
||||
### `capture` to `takePictureAsync` or `recordAsync`
|
||||
|
||||
Let's say you have a component with a RCTCamera taking a photo:
|
||||
```
|
||||
import Camera from 'react-native-camera';
|
||||
class TakePicture extends Component {
|
||||
takePicture = async () => {
|
||||
try {
|
||||
const data = await this.camera.capture();
|
||||
console.log('Path to image: ' + data.path);
|
||||
} catch (err) {
|
||||
// console.log('err: ', err);
|
||||
}
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Camera
|
||||
ref={cam => {
|
||||
this.camera = cam;
|
||||
}}
|
||||
style={styles.preview}
|
||||
aspect={Camera.constants.Aspect.fill}
|
||||
captureAudio={false}
|
||||
>
|
||||
<View style={styles.captureContainer}>
|
||||
<TouchableOpacity style={styles.capture} onPress={this.takePicture}>
|
||||
<Icon style={styles.iconCamera}>camera</Icon>
|
||||
<Text>Take Photo</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</Camera>
|
||||
|
||||
<View style={styles.space} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You should change this to:
|
||||
```
|
||||
import { RNCamera } from 'react-native-camera';
|
||||
class TakePicture extends Component {
|
||||
takePicture = async () => {
|
||||
try {
|
||||
const data = await this.camera.takePictureAsync();
|
||||
console.log('Path to image: ' + data.uri);
|
||||
} catch (err) {
|
||||
// console.log('err: ', err);
|
||||
}
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<RNCamera
|
||||
ref={cam => {
|
||||
this.camera = cam;
|
||||
}}
|
||||
style={styles.preview}
|
||||
>
|
||||
<View style={styles.captureContainer}>
|
||||
<TouchableOpacity style={styles.capture} onPress={this.takePicture}>
|
||||
<Icon style={styles.iconCamera}>camera</Icon>
|
||||
<Text>Take Photo</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</RNCamera>
|
||||
|
||||
<View style={styles.space} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The same logic applies to change `capture` to `recordAsync`.
|
||||
|
||||
### `flashMode` and `torchMode`
|
||||
|
||||
In RCTCamera, there was `flashMode` and `torchMode` prop. In RNCamera, these are combined into the `flashMode` prop.
|
||||
|
||||
### Other differences
|
||||
|
||||
Take a look into the [RCTCamera doc](https://github.com/react-native-community/react-native-camera/blob/master/docs/RCTCamera.md) and the [RNCamera doc](https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md) to see more differences.
|
Loading…
Reference in New Issue