11 Juni 2018 16.46

Menginstall dan Menggunakan React Native Camera

Menggunakan fitur kamera di React Native memang sesuai yang menjanjikan tapi bagaimana cara menginstallnya?

Artikel ini hanya sebagai dokumentasi. Saya menggunakan modul react-native-camera ditambah dengan artikel di Could not find method google for arguments[], com.android.support dan Could not find common.jar untuk mengatasi beberapa permasalahan saat proses build. Berikut ini langkah-langkahnya:

  • Buat project baru dengan react-native init seperti berikut:
react-native init MyCamera
  • Untuk menggunakan fitur kamera kita harus mempunyai ijin akses camera, kita ubah file android/app/src/AndroidManifest.xml dengan menambahkan:
<uses-permission android:name="android.permission.CAMERA" />
  • Setelah masuk folder, install react-native-camera dan link kan seperti berikut:
cd MyCamera

npm install --save react-native-camera

react-native link react-native-camera
  • Ubah versi gradle di file android/gradle/wrapper/gradle-wrapper.properties menjadi seperti berikut:
...
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
  • Ubah file android/build.gradle dengan mengubah kode menjadi seperti berikut:
buildscript {
    repositories {
        jcenter()
        google()
    }
...

allprojects {
    repositories {
        maven { url: 'https://maven.google.com' }
        mavenLocal()
        jcenter()
        mave {
            ...
        }
        google() 
...
  • Ubah file android/app/build.gradle dengan menambahkan kode berikut:
...
dependencies {
    compile project(':react-native-camera')
    compile("com.android.support:support-v4:26.0.1") {
        force = true
    }

Penggunaan

  • Secara sederhana berikut ini cara menggunakan react-native-camera:
import {
  ...
  TouchableOpacity
} from 'react-native';
import { RNCamera } from 'react-native-camera';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera 
          ref={ref => {
            this.camera = ref;
          }}
          style = {styles.preview}
          type={RNCamera.Constants.Type.back}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={'We need your permission to use your camera'}
        >
          <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
            <TouchableOpacity
              onPress={this.takePicture.bind(this)}
              style={styles.capture}
            >
              <Text style={{fontSize: 14}}> CAPTURE </Text>
            </TouchableOpacity>
          </View>
        </RNCamera>
      </View>
    )
  }
  
  takePicture = async function() {
    if(this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options)
      console.warn(data.uri);
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  preview: {
    width: '100%',
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20
  }
})

react native camera

Tutorial camera, ubah, center, google, justifycontent, const, flex