Keep getting "getAvailablePictureSizesAsync is not a function" error

[nickburczyk]

Hello!
I am building my first expo app and am trying to access the camera. In general, it is working fine. The preview displays, takePictureAsync works like a charm, etc.

But I am struggling working with aspect ratios and image sizes. When I use getSupportedRatiosAsync or getAvailablePictureSizes, my console prints out:

[Unhandled promise rejection: TypeError: _expoCamera.Camera.getAvailablePictureSizesAsync is not a function. (In '_expoCamera.Camera.getAvailablePictureSizesAsync()', '_expoCamera.Camera.getAvailablePictureSizesAsync' is undefined)]

Here is the component itself:

import React, { useContext, useEffect, useRef, useState } from "react"
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
import { RNCamera } from "react-native-camera"
import { Overlay, Button } from "react-native-elements"
import { Camera } from 'expo-camera'
import { GlobalContext } from "../../Contexts/GlobalContext"

const TakePhoto = ({isVisible, close, setPhoto}) => {
  const context = useContext(GlobalContext)
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const camera = useRef()

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      const ratios = await Camera?.getSupportedRatiosAsync();
      const sizes = await Camera?.getAvailablePictureSizesAsync()
      console.log(sizes, ratios)
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePhoto = async () => {
    if (camera.current) {
      let photo = await camera.current.takePictureAsync({
        quality: 0.5,
      });
      context.addImage(photo)
      close()
    }  
  }

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <Overlay fullScreen isVisible={isVisible} onBackdropPress={close} style={styles.Overlay} >
      <Camera type={type} ref={camera} ratio="1:1">
        <View>
          <Button
            onPress={takePhoto}
            icon={{
              name: "camera",
              type: "feather",
              size: 40,
              color: 'white'
            }}
          />
        </View>
      </Camera>
    </Overlay>
  )
}

export default TakePhoto

I am developing using a macbook and my pixel phone (android), although I haven’t created any specific builds and am just using expo start at the moment. The relevant packages are:

Expo: 44.0.0
expo-camera: 12.1.2
react-native: 0.64.3
react: 17.0.21

[adamjnav]

Hey @nickburczyk, those methods are not static methods so you need to call them the same way you do takePictureAsync.

[nickburczyk]

@adamjnav Thanks for your reply. I’ve updated as suggested. Here is my updated effect hook and photo function. I am calling them all the same way (I think) but they are still throwing exceptions. As written, the exception comes on “getSupportedRatiosAsync” but if I comment that out the sizes method then throws the error.

takePictureAsync is still working as expected, however.

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      console.log(" === status === ", status);
      const ratios = await camera.current.getSupportedRatiosAsync();
      const sizes = await camera.current.getAvailablePictureSizesAsync()
      console.log({ ratios, sizes })
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePhoto = async () => {
    if (camera.current) {
      console.log('hi')
      let photo = await camera.current.takePictureAsync({
        quality: 0.5,
      });
      console.log(photo)
      context.addImage(photo)
      close()
    }  
  }