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

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.

CodePudding user response：

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

CodePudding user response：

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>
      );
    };