import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Camera, CameraType } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(CameraType.back);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={type}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              setType(type === CameraType.back ? CameraType.front : CameraType.back);
            }}>
            <Text style={styles.text}> Flip </Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    flexDirection: 'row',
    margin: 20,
  },
  button: {
    flex: 0.1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'white',
  },
});

• autoFocus

  Optional • Type: boolean | number | AutoFocus • Default: AutoFocus.on

  State of camera auto focus. Use one of AutoFocus.<value>. When AutoFocus.on, auto focus will be enabled, when AutoFocus.off, it won't and focus will lock as it was in the moment of change, but it can be adjusted on some devices via focusDepth prop.

  ---

• barCodeScannerSettings

  Optional • Type: object

  Settings exposed by BarCodeScanner module. Supported settings: barCodeTypes.

  Example

  <Camera
    barCodeScannerSettings={{
      barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
    }}
  />
  

  ---

• faceDetectorSettings

  Optional • Type: object

  A settings object passed directly to an underlying module providing face detection features. See DetectionOptions in FaceDetector documentation for details.

  ---

• flashMode

  Optional • Type: number | FlashMode • Default: FlashMode.off

  Camera flash mode. Use one of FlashMode.<value>. When FlashMode.on, the flash on your device will turn on when taking a picture, when FlashMode.off, it won't. Setting to FlashMode.auto will fire flash if required, FlashMode.torch turns on flash during the preview.

  ---

• focusDepth

  Optional • Type: number • Default: 0

  Distance to plane of the sharpest focus. A value between 0 and 1 where: 0 - infinity focus, 1 - focus as close as possible. For Android this is available only for some devices and when useCamera2Api is set to true.

  ---

• pictureSize

  Optional • Type: string

  A string representing the size of pictures takePictureAsync will take. Available sizes can be fetched with getAvailablePictureSizesAsync.

  ---

• poster

  Optional • Type: string

  Web Only
  
  

  A URL for an image to be shown while the camera is loading.

  ---

• ratio

  Optional • Type: string • Default: 4:3.

  Android Only
  
  

  A string representing aspect ratio of the preview, eg. 4:3, 16:9, 1:1. To check if a ratio is supported by the device use getSupportedRatiosAsync.

  ---

• type

  Optional • Type: number | CameraType • Default: CameraType.back

  Camera facing. Use one of CameraType. When CameraType.front, use the front-facing camera. When CameraType.back, use the back-facing camera.

  ---

• useCamera2Api

  Optional • Type: boolean

  Android Only
  
  

  Whether to use Android's Camera2 API. See Note at the top of this page.

  ---

• videoStabilizationMode

  Optional • Type: number

  iOS Only
  
  

  The video stabilization mode used for a video recording. Use one of VideoStabilization.<value>. You can read more about each stabilization type in Apple Documentation.

  ---

• whiteBalance

  Optional • Type: number | WhiteBalance • Default: WhiteBalance.auto

  Camera white balance. Use one of WhiteBalance.<value>. If a device does not support any of these values previous one is used.

  ---

• zoom

  Optional • Type: number • Default: 0

  A value between 0 and 1 being a percentage of device's max zoom. 0 - not zoomed, 1 - maximum zoom.

  ---

• onBarCodeScanned

  Optional • Type: (scanningResult: BarCodeScanningResult) => void

  Callback that is invoked when a bar code has been successfully scanned. The callback is provided with an object of the BarCodeScanningResult shape, where the type refers to the bar code type that was scanned and the data is the information encoded in the bar code (in this case of QR codes, this is often a URL). See BarCodeScanner.Constants.BarCodeType for supported values.

  ---

• onCameraReady

  Optional • Type: () => void

  Callback invoked when camera preview has been set.

  ---

• onFacesDetected

  Optional • Type: (faces: FaceDetectionResult) => void

  Callback invoked with results of face detection on the preview. See FaceDetector documentation for details.

  ---

• onMountError

  Optional • Type: (event: CameraMountError) => void

  Callback invoked when camera preview could not been started.

  ---

Inherited Props

• ViewProps

Returns

• Promise<CameraType[]>

Returns

• Promise<VideoCodec[]>

A promise that resolves to a list of strings that represents available codecs.

Returns

• Promise<boolean>

Returns

• Promise<string[]>

Returns a Promise that resolves to an array of strings representing picture sizes that can be passed to pictureSize prop. The list varies across Android devices but is the same for every iOS.

Returns

• Promise<string[]>

Returns a Promise that resolves to an array of strings representing ratios, eg. ['4:3', '1:1'].

Returns

• void

Returns

• Promise<{ uri: string }>

Returns a Promise that resolves to an object containing video file uri property and a codec property on iOS. The Promise is returned if stopRecording was invoked, one of maxDuration and maxFileSize is reached or camera preview is stopped.

Returns

• void

Returns

• void

Returns

• Promise<CameraCapturedPicture>

Returns a Promise that resolves to CameraCapturedPicture object, where uri is a URI to the local image file on iOS, Android, and a base64 string on web (usable as the source for an Image element). The width and height properties specify the dimensions of the image. base64 is included if the base64 option was truthy, and is a string containing the JPEG data of the image in Base64--prepend that with 'data:image/jpg;base64,' to get a data URI, which you can use as the source for an Image element for example. exif is included if the exif option was truthy, and is an object containing EXIF data for the image--the names of its properties are EXIF tags and their values are the values for those tags.

On native platforms, the local image URI is temporary. Use FileSystem.copyAsync to make a permanent copy of the image.

On web, the uri is a base64 representation of the image because file system URLs are not supported in the browser. The exif data returned on web is a partial representation of the MediaTrackSettings, if available.

Returns

• Promise<PermissionResponse>

A promise that resolves to an object of type PermissionResponse.

Returns

• Promise<PermissionResponse>

A promise that resolves to an object of type PermissionResponse.

Returns

• Promise<PermissionResponse>

Returns

• Promise<PermissionResponse>

A promise that resolves to an object of type PermissionResponse.

Returns

• Promise<PermissionResponse>

A promise that resolves to an object of type PermissionResponse.

Returns

• Promise<PermissionResponse>

A promise that resolves to an object of type PermissionResponse.