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