# react-native-better-camera

> React Native camera and cropper with rotation and drawing possibilities developed using existing libraries

Latest version **1.3.3** (published 2018-10-08) · 0 weekly downloads

## Install

```sh
npm install react-native-better-camera
pnpm add react-native-better-camera
yarn add react-native-better-camera
bun add react-native-better-camera
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2018-10-08 |
| First published | 2018-09-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 293.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Gotha Guntter |
| Maintainers | gunty |
| Keywords | react-native, react, camera, crop, rotate, draw |

## Links

- npm: https://www.npmjs.com/package/react-native-better-camera
- npm.io page: https://npm.io/package/react-native-better-camera

## Dependencies (9)

- [redux](https://npm.io/package/redux.md) ^4.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.7
- [redux-actions](https://npm.io/package/redux-actions.md) ^2.6.1
- [react-navigation](https://npm.io/package/react-navigation.md) ^2.14.2
- [react-native-color](https://npm.io/package/react-native-color.md) 0.0.10
- [eslint-config-rallycoding](https://npm.io/package/eslint-config-rallycoding.md) ^3.2.0
- [babel-plugin-transform-remove-console](https://npm.io/package/babel-plugin-transform-remove-console.md) ^6.9.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.3 (latest) — 2018-10-08
- 1.3.2 — 2018-10-08
- 1.3.1 — 2018-10-08
- 1.3.0 — 2018-10-07
- 1.2.9 — 2018-10-07
- 1.2.8 — 2018-10-07
- 1.2.7 — 2018-10-05
- 1.2.6 — 2018-10-05
- 1.2.5 — 2018-10-04
- 1.2.4 — 2018-10-03
- 1.2.3 — 2018-10-02
- 1.2.2 — 2018-09-29
- 1.2.1 — 2018-09-28
- 1.2.0 — 2018-09-27
- 1.1.9 — 2018-09-25
- … 19 more at https://npm.io/package/react-native-better-camera/versions

## README

# react-native-better-camera

<img src="https://i.imgur.com/KWnd9Vt.jpg" height="400" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.imgur.com/6JHllux.jpg" height="400" />
<br/>
<img src="https://i.imgur.com/MhuURb5.jpg" height="400" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.imgur.com/OgdCnfP.jpg" height="400" />

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:**</br>
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
-------------
```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 (
      <RNBetterCamera
        onSend={this.onSend}
        onClose={this.onClose}
        shouldSaveToCameraRoll={true}
        withTextInput={true}
        textInputPlaceholder="TYPE YOUR NAME ..."
      />
    );
  }
}
```

---
_Source: https://npm.io/package/react-native-better-camera · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._