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:
``javascript
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 |
| flashOnIcon | component | Custom component for flash-on icon. Default is |
| flashOffIcon | component | Custom component for flash-off icon. Default is |
| switchCameraIcon | component | Custom component for switch camera icon. Default is |
| closeIcon | component | Custom component for close camera icon. Default is |
| captureIcon | component | Custom component for capture icon. Default is |
| undoIcon | component | Custom component for undo path icon. Default is |
| cropIcon | component | Custom component for go to cropper icon. Default is |
| sendIcon | component | Custom component for send image icon. Default is |
| backIcon | component | Custom component for back to camera icon. Default is |
| rotateIcon | component | Custom component for rotate image icon. Default is |
| editIcon | component | Custom component for edit image (drawing) component. Default is |
| 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
-------------
`javascript
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 (
onSend={this.onSend}
onClose={this.onClose}
shouldSaveToCameraRoll={true}
withTextInput={true}
textInputPlaceholder="TYPE YOUR NAME ..."
/>
);
}
}
``