wants to capture image in by using expo camera

Question

i'm trying to capture image from expo camera but when i alert my photo nothing shown up here is complete code of my component

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

Title,
Content,
Header,
Button,
Switch,
Left,
Body,
Right,

List,ListItem,Thumbnail,Footer,FooterTab
 } from "native-base";
  import {Icon} from 'react-native-elements';

 export default class CameraEx extends React.Component {
   static navigationOptions = {
    header: null
}
  state = {
   hasCameraPermission: null,
    type: Camera.Constants.Type.back,
  };

  async componentDidMount() {
   const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
  }
  takePicture = async function() {
  if (this.camera) {
    let photo = await this.camera.takePictureAsync();
  alert(photo);

  }

   }

    render() {
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
  return <View />;
} else if (hasCameraPermission === false) {
  return <Text>No access to camera</Text>;
} else {
  return (

    <Container style={{ flex: 1 }}>
     <Header transparent>
      <Left>
      <Button transparent onPress={() =>this.props.navigation.navigate('Home') }>
       <Icon name='arrow-back' />
      </Button>
      </Left>

    </Header>
      <Camera style={{ flex: 1 }} type={this.state.type}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
            justifyContent:'space-between',
            width:"50%"
          }}>
          <TouchableOpacity
            style={{
              //flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={() => {
              this.setState({
                type: this.state.type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back,
              });
            }}>
            <Text
              style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
              {' '}Flip{' '}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
             // flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={()=>this.takePicture()}
           >
            <Text
              style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
              {' '}Take Picture{' '}
            </Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </Container>
  );
}
   }
   }

here is a complete code my component please let me know how i can capture image and stored into state i'm beginner ............................................................................................................................................. ....

Answer 1

you cannot show a picture in alert box. you need to pass the source or base64 of image to react native Image component.

import {ImagePicker} from 'expo';

const options = {
    base64: true,
    allowsEditing: true
  };
  const data = await ImagePicker.launchCameraAsync(options);

  if (data.cancelled !== true) {
    this.setState({imageBase64: data.base64});
  }

and then you can use like this:

<Image source={`data:image/png;base64, ${this.state.imageBase64}`} />