Create migration guide.

This commit is contained in:
Joao Fidelis 2018-02-02 17:02:14 -02:00
parent 0e5b97817a
commit 5ec8fa59cc
2 changed files with 136 additions and 1 deletions

View File

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

124
docs/migration.md Normal file
View File

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