Xtykutl

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 ............................................................................................................................................. ....

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

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}`} />