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

| Prop | Type | Description | | :------------ |:---------------:| :---------------| | onSend | function | A function which accepts 2 arguments savedImageUri and textInputValue. Called when user press the send button. textInputValue will be '' when withTextInput property is set to false | | onClose | function | A function without arguments. Called when user press the close (X) button on the top right side of the camera | | shouldSaveToCameraRoll | bool | Indicates if the picture you take (not the modified one!) should be saved to CameraRoll or not. Default is false | | flashAutoIcon | component | Custom component for flash-auto icon. Default is <MaterialIcon name="flash-auto" style={{ color: 'white', fontSize: 40 }} /> | | flashOnIcon | component | Custom component for flash-on icon. Default is <MaterialIcon name="flash-on" style={{ color: 'white', fontSize: 40 }} /> | | flashOffIcon | component | Custom component for flash-off icon. Default is <MaterialIcon name="flash-off" style={{ color: 'white', fontSize: 40 }} /> | | switchCameraIcon | component | Custom component for switch camera icon. Default is <FontAwesomeIcon name="ios-reverse-camera" style={{ color: 'white', fontSize: 40 }} /> | | closeIcon | component | Custom component for close camera icon. Default is <EvilIcon name="close" style={{ color: 'white', fontSize: 40 }} /> | | captureIcon | component | Custom component for capture icon. Default is <View style={{ width: 75, height: 75, backgroundColor: 'transparent', borderColor: 'white', borderWidth: 3, borderRadius: 500 }} /> | | undoIcon | component | Custom component for undo path icon. Default is <MaterialIcon name="undo" style={{ color: 'white', padding: 5, fontSize: 26 }} /> | | cropIcon | component | Custom component for go to cropper icon. Default is <MaterialIcon name="crop-rotate" style={{ color: 'white', padding: 5, fontSize: 26 }} /> | | sendIcon | component | Custom component for send image icon. Default is <IonIcon name="md-send" style={{ color: 'white', padding: 5, fontSize: 26 }} /> | | backIcon | component | Custom component for back to camera icon. Default is <MaterialCommunityIcon name="keyboard-backspace" style={{ color: 'white', padding: 5, fontSize: 26 }} /> | | rotateIcon | component | Custom component for rotate image icon. Default is <MaterialCommunityIcon name='format-rotate-90' style={{ color: 'white', fontSize: 26 }} /> | | editIcon | component | Custom component for edit image (drawing) component. Default is <MaterialIcon name="edit" style={{ color: 'white', padding: 5, fontSize: 26}} /> | | doneText | string | Custom string for done button text inside cropper. Default is 'DONE' | | cancelText | string | Custom string for cancel button text inside cropper. Default is 'CANCEL' | | permissionDialogTitle | string | Android only - The sketch library requests storage permission in order to save the image. This is your chance to explain why you need those permissions. Default is `` | permissionDialogMessage | string | Android only - The sketch library requests storage permission in order to save the image. This is your chance to explain why you need those permissions. Default is We require access to your storage in order to temporarily save the manipulated image. | withTextInput | bool | Boolean value which indicate that you want or not a TextInput box at the bottom of the sketch. Default is false | | textInputPlaceholder | string | Custom string for TextInput placeholder. You should set it only when withTextInput property is true. Default value is 'ADD CAPTION ...' |

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 ..."
      />
    );
  }
}