3.8 KiB
Migrating from RCTCamera to RNCamera
Compiling
Please follow the RNCamera doc instalation guide to install the face detection frameworks on both platforms.
Android
- On the MainApplication of your Android project change the import of RCTCameraPackage line to:
import org.reactnative.RNCameraPackage;
-
Inside the getPackages() methods change
new RCTCameraPackage()
tonew RNCameraPackage()
. -
On
android/app/build.gradle
, change the line:compile (project(':react-native-camera'))
to:
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
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 ( <Camera ref={cam => { this.camera = cam; }} style={styles.preview} aspect={Camera.constants.Aspect.fill} captureAudio={false} > camera Take Photo
<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 ( <RNCamera ref={cam => { this.camera = cam; }} style={styles.preview} > camera Take Photo
<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.