Display Image in touchable Opacity after Image is being Picked from Image Picker

Question

I have created a TouchableOpacity which has an icon. The onPress method calls Image Picker.

        <View style={styles.container}>
          <TouchableOpacity style={styles.buttonStyle} onPress={pickImage}>
            <MaterialIcons name="add-to-photos" size={24} color="black" />
          </TouchableOpacity>

          <TouchableOpacity style={styles.buttonStyle}>
            <MaterialIcons name="add-to-photos" size={24} color="black" />
          </TouchableOpacity>
           
        </View>

Once the image is picked I am using useState to set the URI value to a variable Image1. Now I am want to display the Selected Image in the TouchableOpacity once the Image is picked. How can I show selected image and not the icon once the image is picked.

please clarify your question a bit more, what I understand is you need a function, where on selecting image, you want to display that same in the Image component nested in touchableopacity? — Anwer Solangi, Aug 08 '22 at 13:33
Yes that's correct. Once I pick the image, I want to display the same image instead of the MaterialIcon I am using. — RoboCop, Aug 08 '22 at 13:37

score 0 · Answer 1 · answered Aug 08 '22 at 13:47

Try with this:

 const [imgPicker, setImgPicker] = useState('');
    const cameraOpen = async () => {
    
    const permisoCamara = await ImagePicker.requestCameraPermissionsAsync();

    if (permisoCamara.status === "granted") {

      const imgCamara = await ImagePicker.launchCameraAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: false,
        aspect: [4, 4],
        quality: 0.1,
        base64: true,
      });

      if (!imgCamara.cancelled) {
        setImgPicker(imgCamara.base64);
      }
    } else {
      alert("Permissions needed");
    }
  };

    return (
    <View>
      <TouchableOpacity onPress={cameraOpen()}>

        {imgPicker == '' ?
          <MaterialIcons name="add-to-photos" size={24} color="black" /> :
          <Image
            source={{
              uri: 'data:image/png;base64,' + imgPicker,
            }}
          />
        }

      </TouchableOpacity>
    </View>
  );

The conditional that you need is inside the Touchable, just validate if the state have any value or not. Hope it helps

score 0 · Accepted Answer · answered Aug 08 '22 at 13:53

You can do that using useState:

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
    
    export const Avtar = () => {
      const [image, setImage] = useState(null);
    
      const pickImage = () => {
        launchImageLibrary(options, async response => {
          if (!response.didCancel) {
            if (typeof onImageGet === 'function') {
                  setImage(response.assets[0].uri);
            }
          }
        });
      };
    
      return (
        <View style={styles.container}>
          <TouchableOpacity style={styles.buttonStyle} onPress={pickImage}>
            {!!image ? (
              <Image
                src={source}
                style={[{width, height, borderRadius}, avtarStyle]}
                resizeMode="cover"
              />
            ) : (
              <MaterialIcons name="add-to-photos" size={24} color="black" />
            )}
          </TouchableOpacity>
    
          <TouchableOpacity style={styles.buttonStyle}>
            {!!image ? (
              <Image
                src={source}
                style={[{width, height, borderRadius}, avtarStyle]}
                resizeMode="cover"
              />
            ) : (
              <MaterialIcons name="add-to-photos" size={24} color="black" />
            )}
          </TouchableOpacity>
        </View>
      );
    };

What is the name of the operator "!!"? Or did you refer only to "!"? — Brandonjgs, Aug 08 '22 at 17:12
I think this answer will help you better understand, what I'm trying to implement: https://stackoverflow.com/a/784946/12190206 — Anwer Solangi, Aug 08 '22 at 19:48

Display Image in touchable Opacity after Image is being Picked from Image Picker

2 Answers2