How To Access Camera In React Native Expo

Usage

All you need is to import { RNCamera } from the react-native-camera module and and then use the <RNCamera/> tag.

                                  'use strict';                  import                  React, { PureComponent }                  from                  'react';                  import                  { AppRegistry, StyleSheet, Text, TouchableOpacity, View }                  from                  'react-native';                  import                  { RNCamera }                  from                  'react-native-camera';                                      class                    ExampleApp                    extends                    PureComponent                  {   render() {                  return                  (                                      <View                      style={styles.container}>                    <RNCamera                      ref={ref                      =>                    {             this.camera = ref;           }}           style={styles.preview}           type={RNCamera.Constants.Type.back}           flashMode={RNCamera.Constants.FlashMode.on}           androidCameraPermissionOptions={{             championship: 'Permission to use photographic camera',             bulletin: 'Nosotros need your permission to apply your camera',             buttonPositive: 'Ok',             buttonNegative: 'Cancel',           }}           androidRecordAudioPermissionOptions={{             championship: 'Permission to use audio recording',             message: 'Nosotros need your permission to use your audio',             buttonPositive: 'Ok',             buttonNegative: 'Abolish',           }}           onGoogleVisionBarcodesDetected={({ barcodes }) => {             console.log(barcodes);           }}         />                    <View                      style={{                      flex:                      0,                      flexDirection:                      'row',                      justifyContent:                      'center' }}>                    <TouchableOpacity                      onPress={this.takePicture.bind(this)}                      style={styles.capture}>                    <Text                      style={{                      fontSize:                      14                      }}>                    SNAP                    </Text>                    </TouchableOpacity>                    </View>                    </View>                                    );   }    takePicture =                  async                  () => {                  if                  (this.camera) {                  const                  options = {                  quality:                  0.5,                  base64:                  true                  };                  const                  data =                  look                  this.camera.takePictureAsync(options);                  console.log(data.uri);     }   }; }                  const                  styles = StyleSheet.create({                  container: {                  flex:                  one,                  flexDirection:                  'column',                  backgroundColor:                  'black',   },                  preview: {                  flex:                  1,                  justifyContent:                  'flex-cease',                  alignItems:                  'heart',   },                  capture: {                  flex:                  0,                  backgroundColor:                  '#fff',                  borderRadius:                  5,                  padding:                  15,                  paddingHorizontal:                  20,                  alignSelf:                  'center',                  margin:                  20,   }, });  AppRegistry.registerComponent('App', () => ExampleApp);

FaCC (Function as Child Components)

*You can also apply it with Facc.

                                  'utilize strict';                  import                  React, { PureComponent }                  from                  'react';                  import                  { AppRegistry, StyleSheet, Text, TouchableOpacity, View }                  from                  'react-native';                  import                  { RNCamera }                  from                  'react-native-camera';                  const                  PendingView =                                      ()                    =>                  (                                      <View                      style={{                      flex:                      i,                      backgroundColor:                      'lightgreen',                      justifyContent:                      'middle',                      alignItems:                      'eye',     }}   >                    <Text>Waiting</Text>                    </View>                                    );                                      class                    ExampleApp                    extends                    PureComponent                  {   return() {                  return                  (                                      <View                      mode={styles.container}>                    <RNCamera                      style={styles.preview}                      blazon={RNCamera.Constants.Type.back}                      flashMode={RNCamera.Constants.FlashMode.on}                      androidCameraPermissionOptions={{                      title:                      'Permission                      to                      utilise                      camera',                      bulletin:                      'We                      demand                      your                      permission                      to                      utilise                      your                      camera',                      buttonPositive:                      'Ok',                      buttonNegative:                      'Cancel',           }}                      androidRecordAudioPermissionOptions={{                      title:                      'Permission                      to                      use                      audio                      recording',                      bulletin:                      'Nosotros                      need                      your                      permission                      to                      use                      your                      audio',                      buttonPositive:                      'Ok',                      buttonNegative:                      'Cancel',           }}         >                    {({ camera, condition, recordAudioPermissionStatus }) => {             if (condition !== 'READY') return                    <PendingView                      />;             return (                    <View                      style={{                      flex:                      0,                      flexDirection:                      'row',                      justifyContent:                      'center' }}>                    <TouchableOpacity                      onPress={()                      =>                    this.takePicture(photographic camera)} way={styles.capture}>                    <Text                      style={{                      fontSize:                      14                      }}>                    SNAP                    </Text>                    </TouchableOpacity>                    </View>                    );           }}                    </RNCamera>                    </View>                                    );   }    takePicture =                  async                                      part(photographic camera)                  {                  const                  options = {                  quality:                  0.5,                  base64:                  true                  };                  const                  data =                  look                  photographic camera.takePictureAsync(options);                  //  eslint-disable-next-line                  console.log(data.uri);   }; }                  const                  styles = StyleSheet.create({                  container: {                  flex:                  1,                  flexDirection:                  'column',                  backgroundColor:                  'black',   },                  preview: {                  flex:                  1,                  justifyContent:                  'flex-end',                  alignItems:                  'center',   },                  capture: {                  flex:                  0,                  backgroundColor:                  '#fff',                  borderRadius:                  5,                  padding:                  fifteen,                  paddingHorizontal:                  20,                  alignSelf:                  'eye',                  margin:                  twenty,   }, });  AppRegistry.registerComponent('App', () => ExampleApp);

`camera`

It's the RNCamera'southward reference

`status`

One of RNCamera.Constants.CameraStatus

'Ready' | 'PENDING_AUTHORIZATION' | 'NOT_AUTHORIZED'

`recordAudioPermissionStatus`

1 of RNCamera.Constants.RecordAudioPermissionStatus.

'AUTHORIZED' | 'NOT_AUTHORIZED' | 'PENDING_AUTHORIZATION'

Properties

`autoFocus`

Values: RNCamera.Constants.AutoFocus.on (default) or RNCamera.Constants.AutoFocus.off

Most cameras have a Auto Focus feature. It adjusts your camera lens position automatically depending on the pixels seen past your camera.

Use the autoFocus holding to specify the car focus setting of your camera. RNCamera.Constants.AutoFocus.on turns it ON, RNCamera.Constants.AutoFocus.off turns it OFF.

`autoFocusPointOfInterest`

Values: Object { x: 0.five, y: 0.5 }. Values (iOS): Object { ten: 0.v, y: 0.5, autoExposure }.

Setting this property causes the car focus characteristic of the camera to endeavour to focus on the function of the epitome at this coordinate.

Coordinates values are measured as floats from 0 to ane.0. { 10: 0, y: 0 } volition focus on the height left of the image, { ten: 1, y: 1 } will be the lesser right. Values are based on landscape style with the domicile button on the right—this applies even if the device is in portrait mode.

On iOS, focusing will non change the exposure automatically unless autoExposure is as well set to true.

Hint: for portrait orientation, utilize 90° clockwise rotation + translation: Instance

iOS `onSubjectAreaChanged`

iOS only.

if autoFocusPointOfInterest is gear up, this event will be fired when a substancial change is detected with the post-obit object: { nativeEvent: { prevPoint: { x: number; y: number; } } }

`captureAudio`

Values: boolean true (default) | faux

Specifies if audio recording permissions should be requested. Make certain to follow README instructions for audio recording permissions here.

iOS `keepAudioSession`

Values: boolean true | false (imitation)

(iOS Merely) When the camera is unmounted, it will release any audio session it acquired (if captureAudio=truthful) so other media can continue playing. Even so, this might non be always desirable (due east.g., if video is played subsequently) and tin can be disabled by setting it to true. Setting this to true, means your app will non release the audio session. Note: other apps might still "steal" the sound session from your app.

`flashMode`

Values: RNCamera.Constants.FlashMode.off (default), RNCamera.Constants.FlashMode.on, RNCamera.Constants.FlashMode.auto or RNCamera.Constants.FlashMode.torch.

Specifies the flash mode of your camera.

RNCamera.Constants.FlashMode.off turns information technology off.

RNCamera.Constants.FlashMode.on means photographic camera will use wink in all photos taken.

RNCamera.Constants.FlashMode.car leaves your telephone to make up one's mind when to employ flash when taking photos, based on the lightning conditions that the photographic camera observes.

RNCamera.Constants.FlashMode.torch turns on torch mode, meaning the flash light will be turned on all the time (even earlier taking photo) only like a flashlight.

`focusDepth`

Value: float from 0 to 1.0

Manually fix camera focus. Only works with autoFocus off. The value 0 is minimum focus depth, i is maximum focus depth. For a medium focus depth, for example, you could use 0.5.

`Android` `ratio`

A cord representing the photographic camera ratio in the format 'height:width'. Default is "4:iii".

Use getSupportedRatiosAsync method to go ratio strings supported by your photographic camera on Android.

`type`

Values: RNCamera.Constants.Type.front or RNCamera.Constants.Type.back (default)

Utilize the type property to specify which camera to utilise.

`Android` `cameraId`

Overrides the type property and uses the camera given by cameraId. Apply getCameraIds to get the list of available IDs.

A common apply instance for this is to provide a "switch camera" button that loops through all available cameras.

Note: Variables such as flash might need to be resetted due to the camera non reporting an error when those values are not supported.

`whiteBalance`

Values: RNCamera.Constants.WhiteBalance.sunny, RNCamera.Constants.WhiteBalance.cloudy, RNCamera.Constants.WhiteBalance.shadow, RNCamera.Constants.WhiteBalance.incandescent, RNCamera.Constants.WhiteBalance.fluorescent or RNCamera.Constants.WhiteBalance.motorcar (default)

A photographic camera'south white balance setting allows you to control the color temperature in your photos by cooling downwardly or warming upwardly the colors.

The thought is that you select the appropriate white balance setting for the blazon of low-cal that you're shooting in, and so your camera automatically adjusts the colors to eliminate any warm or cool color casts from your lite source.

Use the whiteBalance property to specify which white balance setting the camera should use.

On iOS it's besides possible to specify custom temperature, tint and rgb commencement values instead of using one of the presets (motorcar, sunny, ...):

Value: Object (e.g. {temperature: 4000, tint: -x.0, redGainOffset: 0.0, greenGainOffset: 0.0, blueGainOffset: 0.0})

The rgb offset values are practical to the calculated device specific white balance gains for the given temperature and tint values.

`exposure`

Value: float from 0 to 1.0, or -ane (default) for automobile.

Sets the camera's exposure value.

`useNativeZoom`

Boolean to turn on native pinch to zoom. Works with the maxZoom belongings on iOS.

Warning: The Android Touch-Event-System causes childviews to catch the touch events. Therefore avert using screenfilling touchables inside of the cameraview.

`zoom`

Value: float from 0 to 1.0

Specifies the zoom of your camera. The value 0 is no zoom, 1 is maximum zoom. For a medium zoom, for example, y'all could pass 0.5.

`iOS` `maxZoom`

iOS Only.

Value: optional float greater than 1.0 used to enforce a maximum zoom value on the camera. Setting a value to less than 1 (default) will make the camera utilise its ain max zoom property.

Specifies the max zoom value used in zoom calculations. This is specifically useful for iOS where it reports arbitrary high values and using a 0 to 1 value equally the zoom factor is not appropriate.

`Android` `permissionDialogTitle` - Deprecated

Starting on android One thousand individual permissions must exist granted for sure services, the camera is one of them, you lot can use this to change the championship of the dialog prompt requesting permissions.

`Android` `permissionDialogMessage` - Deprecated

Starting on android Chiliad individual permissions must be granted for certain services, the camera is one of them, y'all tin can apply this to change the content of the dialog prompt requesting permissions.

`Android` `androidRecordAudioPermissionOptions`

Configuration options for permissions request for recording sound. It will be passed equally rationale parameter to PermissionsAndroid.asking. This replaces and deprecates one-time permissionDialogTitle and permissionDialogMessage parameters.

`Android` `androidCameraPermissionOptions`

Configuration options for permissions request for camera. It will be passed as rationale parameter to PermissionsAndroid.request. This replaces and deprecates old permissionDialogTitle and permissionDialogMessage parameters.

`notAuthorizedView`

By default a Camera not authorized message volition be displayed when access to the photographic camera has been denied, if ready displays the passed react chemical element instead of the default 1.

`pendingAuthorizationView`

Past default a will be displayed while the component is waiting for the user to grant/deny access to the camera, if set up displays the passed react chemical element instead of the default 1.

`rectOfInterest`

An {10: , y:, width:, top: } object which defines the rect of interst every bit normalized coordinates from (0,0) top left corner to (one,i) bottom right corner.

Note: Must too provide cameraViewDimensions prop for Android device

`Android` `cameraViewDimensions`

An {width:, peak: } object which defines the width and height of the cameraView. This prop is used to suit the effect of Attribute Raio for rectOfInterest area on Android

`Android` `playSoundOnCapture`

Boolean to plow on or off the photographic camera's shutter sound (default false). Notation that in some countries, the shutter sound cannot be turned off.

`Android` `playSoundOnRecord`

Boolean to plow on or off the camera's record audio (default simulated)

`iOS` `videoStabilizationMode`

The video stabilization mode used for a video recording. The possible values are:

RNCamera.Constants.VideoStabilization['off']
RNCamera.Constants.VideoStabilization['standard']
RNCamera.Constants.VideoStabilization['cinematic']
RNCamera.Constants.VideoStabilization['auto']

Yous can read more about each stabilization blazon here: https://developer.apple.com/documentation/avfoundation/avcapturevideostabilizationmode

`defaultVideoQuality`

This selection specifies the quality of the video to exist taken. The possible values are:

RNCamera.Constants.VideoQuality.2160p.
- ios Specifies capture settings suitable for 2160p (too chosen UHD or 4K) quality (3840x2160 pixel) video output.
- android Quality level respective to the 2160p (3840x2160) resolution. (Android Lollipop and above only!).
RNCamera.Constants.VideoQuality.1080p.
- ios Specifies capture settings suitable for 1080p quality (1920x1080 pixel) video output.
- android Quality level corresponding to the 1080p (1920 x 1080) resolution.
RNCamera.Constants.VideoQuality.720p.
- ios Specifies capture settings suitable for 720p quality (1280x720 pixel) video output.
- android Quality level respective to the 720p (1280 x 720) resolution.
RNCamera.Constants.VideoQuality.480p.
- ios Specifies capture settings suitable for VGA quality (640x480 pixel) video output.
- android Quality level corresponding to the 480p (720 x 480) resolution.
RNCamera.Constants.VideoQuality.4:3.
- ios Specifies capture settings suitable for VGA quality (640x480 pixel) video output. (Aforementioned as RNCamera.Constants.VideoQuality.480p).
- android Quality level corresponding to the 480p (720 10 480) resolution simply with video frame width set to 640.
RNCamera.Constants.VideoQuality.288p.
- ios Specifies capture settings suitable for CIF quality (352x288 pixel) video output.
- android Non supported.

If nothing is passed the device's highest camera quality will be used as default. Note: This solve the flicker video recording effect for iOS

`pictureSize`

This prop has a different behaviour for Android and iOS and should rarely be set.

For Android, this prop attempts to control the camera sensor capture resolution, like to how ratio behaves. This is useful for cases where a low resolution paradigm is required, and makes further resizing less intensive on the device's retentivity. The list of possible values can be requested with getAvailablePictureSizes, and the value should be set in the format of <width>ten<tiptop>. Internally, the native code will attempt to get the best suited resolution for the given pictureSize value if the provided value is invalid, and will default to the highest resolution bachelor.

For iOS, this prop controls the internal camera preset value and should rarely be changed. However, this value can be set to setup the sensor to match the video recording's quality in gild to prevent flickering. The list of valid values can exist gathered from https://developer.apple.com/documentation/avfoundation/avcapturesessionpreset and tin also be requested with getAvailablePictureSizes.

Native Event callbacks props

`onCameraReady`

Function to be called when native lawmaking emit onCameraReady issue, when camera is ready. This event will likewise fire when irresolute cameras (past blazon or cameraId).

`onMountError`

Function to exist chosen when native code emit onMountError result, when there is a problem mounting the camera.

`onStatusChange`

Function to be called when native lawmaking emits status changes in relation to authorisation changes.

Result contains the post-obit fields:

cameraStatus - one of the CameraStatus values
recordAudioPermissionStatus - one of the RecordAudioPermissionStatus values

`iOS` `onAudioInterrupted`

iOS only. Role to exist called when the photographic camera audio session is interrupted or fails to start for any reason (e.g., in use or not authorized). For instance, this might happen due to another app taking exclusive control over the microphone (e.one thousand., a phone call) if captureAudio={true}. When this happens, whatever active audio input volition be temporarily disabled and crusade a flicker on the preview screen. This will fire any time an attempt to connect the audio device fails. Utilise this to update your UI to indicate that audio recording is not currently possible.

`iOS` `onAudioConnected`

iOS only. Role to exist chosen when the photographic camera sound session is connected. This will be fired the kickoff fourth dimension the camera is mounted with captureAudio={true}, and whatsoever time the audio device connectedness is established. Annotation that this event might not always fire later an interruption due to iOS' behavior. For case, if the audio was already interrupted before the photographic camera was mounted, this event will only burn once a recording is attempted.

`onPictureTaken`

Function to be called when native code emit onPictureTaken event, when camera has taken a picture show, but earlier all extra processing happens. This can be useful to allow the UI to have other pictures while the processing of the electric current picture is nonetheless taking place.

`onRecordingStart`

Office to exist chosen when native code actually starts video recording. Note that video recording might have a few miliseconds to setup depending on the camera settings and hardware features. Utilise this event to detect when video is actually beingness recorded. Event will contain the post-obit fields:

uri - Video file URI, as returned by recordAsync
videoOrientation - Video orientation, as returned past recordAsync
deviceOrientation - Video orientation, as returned by recordAsync

`onRecordingEnd`

Function to be called when native code stops recording video, but before all video processing takes place. This result volition only fire afterwards a successful video recording, and it will not fire if video recording fails (use the error returned from recordAsync instead).

`onTap`

Function to exist called when a bear on within the camera view is recognized. The function is also chosen on the start impact of double tap. Upshot will incorporate the following fields:

`onDoubleTap`

Function to exist called when a double touch inside the camera view is recognized. Event will contain the post-obit fields:

Bar Lawmaking Related props

`onBarCodeRead`

Will call the specified method when a barcode is detected in the camera's view.

Event contains the following fields

information - a textual representation of the barcode, if available
rawData - The raw data encoded in the barcode, if available
uri: (iOS merely) string representing the path to the image saved on your app's enshroud directory. Applicable only for onGoogleVisionBarcodesDetected.
type - the type of the barcode detected

bounds -

on iOS:

                        bounds:{   size:{     width:string,     meridian:string   }   origin:{     10:cord,     y:string   } }

onAndroid: the ResultPoint[] (bounds.origin) is returned for scanned barcode origins. The number of ResultPoint returned depends on the type of Barcode.

                        bounds: {   width: number;   height: number;   origin: Array<{x: number, y: number}> }  one. **PDF417**: eight ResultPoint, laid out as follow:   0 --- 4 ------ 6 --- 2   | ////////////////// |   1 --- 5 ------ 7 --- 3  2. **QR**: 4 ResultPoint, laid out as follow:   2 ------ iii   | //////   | //////   one ------ 0

The following barcode types tin exist recognised:

aztec
code128
code39
code39mod43
code93
ean13 (iOS converts upca barcodes to ean13 past adding a leading 0)
ean8
pdf417
qr
upce
interleaved2of5 (when available)
itf14 (when available)
datamatrix (when bachelor)

`barCodeTypes`

An array of barcode types to search for. Defaults to all types listed higher up. No effect if onBarCodeRead is undefined. Example: <RNCamera barCodeTypes={[RNCamera.Constants.BarCodeType.qr]} />

`onGoogleVisionBarcodesDetected`

Like onBarCodeRead, but using Firebase MLKit to browse barcodes. More info tin be found hither Notation: If you already set onBarCodeRead, this will be invalid.

`googleVisionBarcodeType`

Like barCodeTypes, but applies to the Firebase MLKit barcode detector. Example: <RNCamera googleVisionBarcodeType={RNCamera.Constants.GoogleVisionBarcodeDetection.BarcodeType.DATA_MATRIX} /> Available settings:

CODE_128
CODE_39
CODE_93
CODABAR
EAN_13
EAN_8
ITF
UPC_A
UPC_E
QR_CODE
PDF417
AZTEC
DATA_MATRIX
ALL

`googleVisionBarcodeMode`

Change the mode in social club to browse "inverted" barcodes. You tin either change it to alternate, which will inverted the image information every 2nd screen and be able to read both normal and inverted barcodes, or inverted, which will only read inverted barcodes. Default is normal, which only reads "normal" barcodes. Notation: this property only applies to the Google Vision barcode detector. Example: <RNCamera googleVisionBarcodeMode={RNCamera.Constants.GoogleVisionBarcodeDetection.BarcodeMode.Alternating} />

`detectedImageInEvent`

When detectedImageInEvent is false (default), onBarCodeRead / onBarcodesDetected only gives metadata, simply not the epitome (bytes/base64) itself.

When detectedImageInEvent is true, onBarCodeRead / onGoogleVisionBarcodesDetected will fill the prototype field inside the object given to the callback handler. Information technology contains raw epitome bytes in JPEG format (quality 100) every bit Base64-encoded string.

Face Detection Related props

RNCamera uses the Firebase MLKit for Face Detection, you can read more about it hither.

`onFacesDetected`

Method to be chosen when confront is detected. Receives a Faces Detected Outcome object. The interesting value of this object is the faces value, which is an array of Confront objects. You lot can detect more details about the possible values of these objects hither

`onFaceDetectionError`

Method to be chosen if in that location was an Face Detection Error, receives an object with the isOperational property prepare to false if Face Detector is Not operational and trueif it is.

`faceDetectionMode`

Values: RNCamera.Constants.FaceDetection.Mode.fast (default) or RNCamera.Constants.FaceDetection.Mode.accurate

Specifies the face detection mode of the Face Detection API.

Employ RNCamera.Constants.FaceDetection.Mode.accurate if you want slower only more accurate results.

`faceDetectionLandmarks`

Values: RNCamera.Constants.FaceDetection.Landmarks.all or RNCamera.Constants.FaceDetection.Landmarks.none (default)

A landmark is a point of interest inside a face. The left center, right eye, and nose base are all examples of landmarks. The Face API provides the ability to find landmarks on a detected face up.

`faceDetectionClassifications`

Values: RNCamera.Constants.FaceDetection.Classifications.all or RNCamera.Constants.FaceDetection.Classifications.none (default)

Classification is determining whether a certain facial characteristic is nowadays. For example, a face tin exist classified with regards to whether its eyes are open up or closed. Some other example is whether the face is smiling or not.

Text Recognition Related props

RNCamera uses the Firebase MLKit for Text Recognition, you can read more info about it here.

`onTextRecognized`

Method to exist called when text is detected. Receives a Text Recognized Result object. The interesting value of this object is the textBlocks value, which is an array of TextBlock objects.

Component instance methods

`takePictureAsync([options]): Promise`

Takes a picture, saves in your app'due south cache directory and returns a promise. Annotation: additional epitome processing, such as mirror, orientation, and width, tin can be significantly tiresome on Android.

Supported options:

width (integer). This property allows to specify the width that the returned image should have, image ratio will not be affected. If no value is specified the maximum image size is used (capture may take longer).
quality (float between 0 to 1.0). This holding is used to shrink the output jpeg file with 1 significant no jpeg compression volition be applied. If no value is specified quality:1 is used.
base64 (boolean true or fake) Use this with true if you want a base64 representation of the picture taken on the return data of your promise. If no value is specified base64:simulated is used.
mirrorImage (boolean true or false). Use this with truthful if you want the resulting rendered picture to be mirrored (inverted in the vertical axis). If no value is specified mirrorImage:false is used.
writeExif: (boolean or object, defaults to true). Setting this to a boolean indicates if the image exif should exist preserved after capture, or removed. Setting it to an object, merges any data with the final exif output. This is useful, for case, to add together GPS metadata (note that GPS info is correctly translated from double values to the EXIF format, so there's no demand to read the EXIF protocol).

                writeExif = {                  GPSLatitude: latitude,                  GPSLongitude: longitude,                  GPSAltitude: altitude, };

exif (boolean true or false) Apply this with truthful if you want a exif data map of the moving picture taken on the render information of your promise. If no value is specified exif:simulated is used.
fixOrientation (android simply, boolean truthful or faux) Use this with true if y'all want to fix wrong paradigm orientation (can have upwardly to five seconds on some devices). Do non provide this if you only need EXIF based orientation.
forceUpOrientation (iOS merely, boolean true or fake). This belongings allows to strength portrait orientation based on bodily data instead of exif data.
imageType (iOS just, ImageType 'jpg' or 'png'). This property allows setting the output image format to PNG or JPEG (default).
doNotSave (boolean true or false). Use this with truthful if you do not want the picture show to be saved equally a file to enshroud. If no value is specified doNotSave:false is used. If y'all merely need the base64 for the image, you tin can employ this with base64:true and avoid having to save the file.
pauseAfterCapture (boolean truthful or faux). If true, intermission the preview layer immediately after capturing the image. You will need to call cameraRef.resumePreview() before using the camera again. If no value is specified pauseAfterCapture:false is used.
orientation (cord or number). Specifies the orientation that us used for taking the movie. Possible values: "portrait", "portraitUpsideDown", "landscapeLeft" or "landscapeRight".
path (file path on disk). Specifies the path on disk to relieve moving picture to.

The promise will exist fulfilled with an object with some of the following backdrop:

width: returns the image's width (taking image orientation into account)
height: returns the image'south height (taking image orientation into account)
uri: (string) the path to the image saved on your app'south cache directory.
base64: (string?) the base64 representation of the paradigm if required.
exif: returns an exif map of the image if required.
pictureOrientation: (number) the orientation of the picture
deviceOrientation: (number) the orientation of the device

`recordAsync([options]): Promise`

Records a video, saves it in your app'south cache directory and returns a promise when stopRecording is chosen or either maxDuration or maxFileSize specified are reached.

Supported options:

quality. This option specifies the quality of the video to be taken. The possible values are:
- RNCamera.Constants.VideoQuality.2160p.
  - ios Specifies capture settings suitable for 2160p (as well chosen UHD or 4K) quality (3840x2160 pixel) video output.
  - android Quality level respective to the 2160p (3840x2160) resolution. (Android Lollipop and above but!).
- RNCamera.Constants.VideoQuality.1080p.
  - ios Specifies capture settings suitable for 1080p quality (1920x1080 pixel) video output.
  - android Quality level respective to the 1080p (1920 x 1080) resolution.
- RNCamera.Constants.VideoQuality.720p.
  - ios Specifies capture settings suitable for 720p quality (1280x720 pixel) video output.
  - android Quality level corresponding to the 720p (1280 ten 720) resolution.
- RNCamera.Constants.VideoQuality.480p.
  - ios Specifies capture settings suitable for VGA quality (640x480 pixel) video output.
  - android Quality level corresponding to the 480p (720 x 480) resolution.
- RNCamera.Constants.VideoQuality.4:three.
  - ios Specifies capture settings suitable for VGA quality (640x480 pixel) video output. (Same equally RNCamera.Constants.VideoQuality.480p).
  - android Quality level corresponding to the 480p (720 x 480) resolution but with video frame width set to 640.
- RNCamera.Constants.VideoQuality.288p.
  - ios Specifies capture settings suitable for CIF quality (352x288 pixel) video output.
  - android Non supported.
videoBitrate. (int greater than 0) This pick specifies a desired video bitrate. For example, v*1000*1000 would be 5Mbps.
- ios Supported however requires that the codec key is also set.
- android Supported.
orientation (string or number). Specifies the orientation that us used for recording the video. Possible values: "portrait", "portraitUpsideDown", "landscapeLeft" or "landscapeRight".

If nothing is passed the device'southward highest camera quality will be used as default.
iOS codec. This pick specifies the codec of the output video. Setting the codec is only supported on iOS >= 10. The possible values are:
- RNCamera.Constants.VideoCodec['H264']
- RNCamera.Constants.VideoCodec['JPEG']
- RNCamera.Constants.VideoCodec['HVEC'] (iOS >= 11)
- RNCamera.Constants.VideoCodec['AppleProRes422'] (iOS >= 11)
- RNCamera.Constants.VideoCodec['AppleProRes4444'] (iOS >= 11)
mirrorVideo (boolean truthful or simulated). Utilise this with true if yous want the resulting video to be mirrored (inverted in the vertical axis). If no value is specified mirrorVideo:false is used.
maxDuration (bladder greater than 0). Specifies the maximum elapsing of the video to be recorded in seconds. If nada is specified, no fourth dimension limit will be used.
maxFileSize (int greater than 0). Specifies the maximum file size, in bytes, of the video to be recorded. For 1mb, for example, employ i*1024*1024. If nothing is specified, no size limit will be used.
mute (any value). (This value will automatically exist set to true if the captureAudio has not been passed to the Camera component) If this flag is given in the option with whatever value, the video to be recorded will be mute. If nothing is specified, video will Non be muted. Note: The recommended fashion of recording audio without sound passing captureAudio: false to the Camera component. The mute parameter is likely to become deprecated in the near time to come.
path (file path on disk). Specifies the path on disk to record the video to. You can use the aforementioned uri returned to go on recording across start/stops

The promise will be fulfilled with an object with some of the following properties:

uri: (string) the path to the video saved on your app's cache directory.
videoOrientation: (number) orientation of the video
deviceOrientation: (number) orientation of the device
iOS codec: the codec of the recorded video. Ane of RNCamera.Constants.VideoCodec
isRecordingInterrupted: (boolean) whether the app has been minimized while recording

`refreshAuthorizationStatus: Promise<void>`

Allows to make RNCamera bank check Permissions once more and fix status accordingly. Making it possible to refresh status of RNCamera after user initially rejected the permissions.

`stopRecording: void`

Should be called after recordAsync() to make the promise exist fulfilled and become the video uri.

`pausePreview: void`

Pauses the preview. The preview can be resumed again by using resumePreview().

`resumePreview: void`

Resumes the preview afterward pausePreview() has been called.

`Android` `getSupportedRatiosAsync(): Promise`

Android only. Returns a promise. The promise will be fulfilled with an object with an assortment containing strings with all photographic camera aspect ratios supported by the device.

`Android` `checkIfVideoIsValid(path): Promise<boolean>`

Static method and Android only. Returns a promise. The promise will be fulfilled with a boolean indicating if the given path contains a valid (not corrupted) video file. Useful for some android devices that may store corrupted files from fourth dimension to time. Note: brand sure to non include file:// since not all android implementations back up URI strings (use /path/to/file/instead).

`getCameraIdsAsync(): Hope`

Returns a hope. The promise volition be fulfilled with an array containing objects with all camera IDs and blazon supported by the device.

The promise will be fulfilled with an array containing objects with some of the post-obit backdrop:

id: (string) the ID of the camera.
blazon: One of RNCamera.Constants.Blazon.front | RNCamera.Constants.Type.back
deviceType: iOS 10+ only. Returns the internal device string type used by the OS. Useful to identify camera types (e.g., wide). Constants match iOS' string values: AVCaptureDeviceTypeBuiltInWideAngleCamera, AVCaptureDeviceTypeBuiltInTelephotoCamera, AVCaptureDeviceTypeBuiltInUltraWideCamera. More info can be found at Apple Docs

Note: iOS also allows for virtual cameras (eastward.thousand., a photographic camera fabricated of multiple cameras). However, only concrete non-virtual cameras are returned past this method since advanced features (such as depth maps or auto switching on photographic camera zoom) are not supported.

`iOS` `isRecording(): Promise<boolean>`

iOS only. Returns a promise. The promise volition be fulfilled with a boolean indicating if currently recording is started or stopped.

Subviews

This component supports subviews, and so if y'all wish to use the camera view as a background or if you desire to layout buttons/images/etc. inside the camera then you tin can practice that.

Example subview:

react-native-barcode-mask

A Barcode and QR code UI mask which can be employ to render a scanning layout on camera with customizable styling.

Read more nigh react-native-barcode-mask hither.

@nartc/react-native-barcode-mask

A rewritten version of react-native-barcode-mask using Hooks and Reanimated. If you're already using react-native-reanimated (react-navigation dependency) so yous might benefit from this rewritten component.

Customizable
Provide custom hook to "browse barcode within finder area"

Read more than about it hither @nartc/react-native-barcode-mask

Testing

To learn nigh how to exam components which uses RNCamera check its documentation about testing.

Examples

To see more of the RNCamera in action yous tin check out the RNCamera examples directory. Firebase MLKit-base of operations features (such as Text, Face and Barcode detection) tin exist found in the mlkit example.

Open up Collective

Nosotros are but beginning a funding campaign for react-native-photographic camera. Contributions are greatly appreciated. When we gain more than $250 we will begin distributing funds to core maintainers in a fully transparent manner. Feedback for this procedure is welcomed, we volition continue to evolve the strategy as we abound and learn more.