Show photo taken with React Native Image Picker

Question

I'm learning a little bit about React Native and a question came up that I couldn't solve.

I'm using react-native-image-picker I have been able to take a photo from my device, the problem is that I cannot show the captured image on the device screen.

Here is my code.

import React from 'react';
import { Button, Image, View} from 'react-native';

import ImagePicker from 'react-native-image-picker';


const TomarFoto = () => {
  const tomarFoto = () => {
    ImagePicker.launchCamera({}, (response) => {
      console.log('Respuesta =', response);
      if (response.didCancel) {
        alert('Subida cancelada');
      } else if (response.error) {
        alert('Error encontrado: ', error);
      } else {
        const source = {uri:response.uri};
      }
    });
  };

 return (

  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Image
      source={ uri:response.uri}
      style={ { width: 300, height: 300 } }
    />
  <Button title="Adjuntar foto" onPress={tomarFoto} />
</View>
 ); 
};


export default TomarFoto;

When I take the picture and I'm on Debug Mode, the data I obtain is:

Respuesta = {height: 3000, fileSize: 538811, 
data: "/9j/4R7KRXhpZgAATU0AKgAAAAgACgEQAAIAAAANAAAAhgExAA…BTmj2jnrRRQBXkwD1oGKKKAHA47CgsOlFFADJGxRRRTsB/9k=", 
path: "/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg", 
uri: "content://com.sinvirus.provider/root/storage/emula…es/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg",
…}data: "/9j/4R7KRXhpZgAATU0AKgAAAAgACgEQAAIAAAANAAAAhgExAA"
fileName: "image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"
fileSize: 538811
height: 3000
isVertical: true
latitude:  
longitude: 
originalRotation: 0
path: "/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"
timestamp: "2020-05-10T23:21:29Z"
type: "image/jpeg"
uri: "content://com.sinvirus.provider/root/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"
width: 3000__proto__: Object

But here is my problem, I want to show that photo into the View but everytime i get this error Message,

Any Idea how could I fix this or what I'm doing wrong?

Answer 1

as the error tells you the variable response isn't defined yet, when you pick the photo using the react-native-image-picker the lib will give you the selected image or photo taken with the camera, so the way you should render it is like updating the local state using a useState hook, so you can do this:

import React, {useState, useCallback} from 'react';
import { Button, Image, View} from 'react-native';

import ImagePicker from 'react-native-image-picker';


const TomarFoto = () => {
  const [photo, setPhotoURI] = useState(null);
  const tomarFoto = useCallback(() => {
    ImagePicker.launchCamera({}, (response) => {
      console.log('Respuesta =', response);
      setPhotoURI(response.uri); // update the local state, this will rerender your TomarFoto component with the photo uri path.
      if (response.didCancel) {
        alert('Subida cancelada');
      } else if (response.error) {
        alert('Error encontrado: ', error);
      } else {
        const source = {uri:response.uri};
      }
    });
  }, [setPhotoURI]);

 return (

  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    {photo && (
      <Image
        source={{ uri: photo }}
        style={ { width: 300, height: 300 } }
      />
    )}
  <Button title="Adjuntar foto" onPress={tomarFoto} />
</View>
 ); 
};


export default TomarFoto;