react-native-better-camera v1.3.3

react-native-better-camera

This component depend on @terrylinla/react-native-sketch-canvas, react-native-vector-icons, react-native-fs, react-native-camera-kit, react-native-image-resizer and react-native-image-rotate libraries. They need to be installed and linked to your project before.

STEPS TO INSTALL: 1. npm install --save @terrylinla/react-native-sketch-canvas react-native-vector-icons react-native-fs react-native-image-resizer react-native-image-rotate react-native-camera-kit 2. react-native link @terrylinla/react-native-sketch-canvas & react-native link react-native-vector-icons & react-native link react-native-fs & react-native link react-native-image-resizer & react-native link react-native-image-rotate 3. Link manually the react-native-camera-kit library (see how at https://github.com/wix/react-native-camera-kit) 4. Add followings to android/build.gradle:

buildscript {
  repositories {
    ...
    maven {
      url 'https://maven.google.com'
      name 'Google'
    }
  }
}

allprojects {
  repositories {
    ...
    maven {
      url 'https://maven.google.com'
      name 'Google'
    }
    maven { url "https://jitpack.io" }
  }
}

subprojects {
  project.configurations.all {
    resolutionStrategy.eachDependency { details ->
      if (details.requested.group == 'com.android.support'
          && !details.requested.name.contains('multidex') ) {
        details.useVersion "26.0.1"
      }
    }
  }

  afterEvaluate {
    project -> if (project.hasProperty("android")) {
      android {
        compileSdkVersion 26
        buildToolsVersion '26.0.1'
      }
    }
  }
}

5. Inside main directory type npm install --save react-native-better-camera

Note: If you try to open your app in android studio, you may get Unable to find module with Gradle path ':@terrylinla/react-native-sketch canvas' (needed by module 'app'.) error message. Solution: 1. In android/app/build.gradle change compile project(':@terrylinla/react-native-sketch-canvas') to compile project(':@terrylinla_react-native-sketch-canvas') 2. In android/settings.gradle change include ':@terrylinla/react-native-sketch-canvas' to include ':@terrylinla_react-native-sketch-canvas' and project(':@terrylinla/react-native-sketch-canvas').projectDir = new File(rootProject.projectDir, '../node_modules/@terrylinla/react-native-sketch-canvas/android') to project(':@terrylinla_react-native-sketch-canvas').projectDir = new File(rootProject.projectDir, '../node_modules/@terrylinla/react-native-sketch-canvas/android')

Properties

Example of usage

import React, { Component } from 'react';
import RNBetterCamera from 'react-native-better-camera';;

class RNBetterCameraPage extends Component {
  onSend = (savedImageUri, textInputValue) => {
    console.log('savedUmageUri = ', savedImageUri);
    console.log('textInputValue = ', textInputValue);
    // send image & text to server
  }
  onClose = () => {
    // navigate to the next page of your application
    Actions.home();
  }

  render() {
    return (
      <RNBetterCamera
        onSend={this.onSend}
        onClose={this.onClose}
        shouldSaveToCameraRoll={true}
        withTextInput={true}
        textInputPlaceholder="TYPE YOUR NAME ..."
      />
    );
  }
}