react-native-camera/docs/migration.md
2018-02-02 17:26:22 -02:00

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

  1. On the MainApplication of your Android project change the import of RCTCameraPackage line to:
import org.reactnative.RNCameraPackage;
  1. Inside the getPackages() methods change new RCTCameraPackage() to new RNCameraPackage().

  2. 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;
  }
  1. 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.