Undefined is not an object (evaluating 'Camera.Type')

Expo Development Tools
1

Screenshot_20171129-232723
Screenshot_20171129-2327231080×1920 137 KB

I’m getting the message like shown above when I try to show the camera with the code below:

<Camera />

and component for it:

import React from 'react';
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import { Camera, Permissions } from 'expo';

export default class CameraComponent extends React.Component {
  state = {
    hasCameraPermission: null,
    type: 'back',
  };

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  takePicture = async function() {
    if (this.camera) {
      this.camera.takePicture().then(data => {
        FileSystem.moveAsync({
          from: data,
          to: `${FileSystem.documentDirectory}photos/Photo_${this.state.photoId}.jpg`,
        }).then(() => {
          this.setState({
            photoId: this.state.photoId + 1,
          });
          Vibration.vibrate();
        });
      });
    }
  };

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return null;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
        <View style={{ flex: 1 }}>
          <Camera
            style={{ flex: 1 }}
            type={this.state.type}
            ref={ref => {
              this.camera = ref;
            }}>
            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }}>
              <TouchableOpacity
                style={[
                  styles.flipButton,
                  styles.picButton,
                  { flex: 0.3, alignSelf: 'flex-end' },
                ]}
                onPress={this.takePicture.bind(this)}>
                <Text style={styles.flipText}> SNAP </Text>
              </TouchableOpacity>
            </View>
          </Camera>
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  flipButton: {
    flex: 0.3,
    height: 40,
    marginHorizontal: 2,
    marginBottom: 10,
    marginTop: 20,
    borderRadius: 8,
    borderColor: 'white',
    borderWidth: 1,
    padding: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  flipText: {
    color: 'white',
    fontSize: 15,
  },
  picButton: {
    backgroundColor: 'darkseagreen',
  },
});

in package.json I have

"dependencies": {
"expo": "^21.0.0",
"react-native": "^0.46.1",
...
}

Do you think I still have a chance to launch it or am I completely hopeless?

Thanks

2

Can you reproduce it in Snack? Also we recommend using our fork of react native. See the release notes Expo SDK 21.0.0 is now available. I am happy to announce the release of… | by Adam Perry | Exposition for instructions.

3

Yes, seems like with setting up the proper versions of the packages everything works fine. Thank you

1 Like