# react-native-camera-android

> React native camera view for android. Enabling you to take pictures directly on camera view, controlling flash light of the device, and also reading barcode from camera.

Latest version **1.0.7** (published 2016-01-16) · MIT license · 0 weekly downloads

## Install

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

## 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.0.7 |
| Published | 2016-01-16 |
| First published | 2016-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | northfoxz |
| Maintainers | northfoxz |
| Keywords | react-component, react-native, android |

## Links

- npm: https://www.npmjs.com/package/react-native-camera-android
- Repository: https://github.com/NorthFoxz/react-native-camera-android
- Homepage: https://github.com/NorthFoxz/react-native-camera-android#readme
- Issues: https://github.com/NorthFoxz/react-native-camera-android/issues
- npm.io page: https://npm.io/package/react-native-camera-android

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2016-01-16
- 1.0.6 — 2016-01-12
- 1.0.5 — 2016-01-11
- 1.0.4 — 2016-01-11
- 1.0.3 — 2016-01-11
- 1.0.2 — 2016-01-09
- 1.0.1 — 2016-01-09
- 1.0.0 — 2016-01-07

## README

# react-native-camera-android
React native camera view for android. Enabling you to take pictures directly on camera view, controlling flash light of the device, and also reading barcode from camera.

###A react native camera component inspired by
#####https://github.com/lwansbrough/react-native-camera
#####https://github.com/ideacreation/react-native-barcodescanner

<img src="http://imgur.com/WgleJwy.jpg" width="300" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://imgur.com/2JKwojj.jpg" width="300"/>

### Installation

```bash
npm i --save react-native-camera-android
```

### Add it to your android project

* In `android/setting.gradle`

```gradle
...
include ':ReactNativeCameraAndroid', ':app'
project(':ReactNativeCameraAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera-android/android')
```

* In `android/app/build.gradle`

```
dependencies {
  ...
  ...
  compile project(':react-native-camera-android')
}
```

* register module (in MainActivity.java)

```java
import com.ReactCamera.RNCameraViewPackage;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())

      .addPackage(new RNCameraViewPackage())              // <------ add here
      
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}
```

## Example
```javascript
var Camera = require('react-native-camera-android');

var Example = React.createClass({

  render() {
    return (
      <BarcodeScanner
        ref="cam" // the reference of your camera view
        type={"back"} // the type of your camera
        autoFocus={true}
        torchMode={"off"} // flashlight settings of your camera
        viewFinderDisplay={true} // set it to true if you want to scan barcodes
        onBarCodeRead={this._barcodeReceived}
        onPictureTaken={this._onPictureTaken}
      />
    );
  }

  _takePicture() {
    this.refs.cam.takePicture();
  }

  _barcodeReceived(event) {
    console.log('Barcode: ' + e.data);
    console.log('Type: ' + e.type);
  }

  _onPictureTaken(event) {
    if(event.type !== 'error') {
      console.log("file://" + event.message)
    }
  }

});
```

## Usage

All you need is to `require` the `react-native-camera-android` module and then use the
`<Camera/>` tag.

## Actions

#### `takePicture`

1. First add refs tag to your camera: `<Camera ref="cam" />`
2. Then call the function `this.refs.cam.takePicture()` anywhere you like.



## Properties

#### `onPictureTaken`

After the picture is taken, the `<Camera />` component will return an event to `onPictureTaken`, which contains following data payloads.

`onPictureTaken = function(event) {} `

1. `type`: `success` or `error`
2. `message`: the result of the callback

#### `onBarCodeRead`

Will call the specified method when a barcode is detected in the camera's view.
Event contains `data` (barcode value) and `type` (barcode type).
The following barcode types can be recognised:

```java
BarcodeFormat.UPC_A
BarcodeFormat.UPC_E
BarcodeFormat.EAN_13
BarcodeFormat.EAN_8
BarcodeFormat.RSS_14
BarcodeFormat.CODE_39
BarcodeFormat.CODE_93
BarcodeFormat.CODE_128
BarcodeFormat.ITF
BarcodeFormat.CODABAR
BarcodeFormat.QR_CODE
BarcodeFormat.DATA_MATRIX
BarcodeFormat.PDF_417
```

#### `torchMode`

Values:
`on`,
`off` (default)

Use the `torchMode` property to specify the camera torch mode.

#### `type`

Values:
`back` (default),
`front`

Use the `type` property to specify the camera to use. If you specify the front camera, but the device has no front camera the back camera is used.

### Viewfinder properties

The following properties can be used to style the viewfinder:

`viewFinderBackgroundColor`,
`viewFinderBorderColor`,
`viewFinderBorderWidth`,
`viewFinderBorderLength`,
`viewFinderDrawLaser`,
`viewFinderLaserColor`

All color values are strings and must be specified as `#AARRGGBB` (alpha, red, green, blue). `viewFinderBorderWidth` and `viewFinderBorderLength` are numbers, `viewFinderDrawLaser` is either `true` or `false` (default).

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