Trigger an event before the image shown on the screen?

Question

I am trying to implement a triggering event before the image shown on the screen. The snippet below is working properly to pick an image and it's showing on the screen. After clicking the CROP the image is showing on the screen. However, After clicking the CROP, it will be shown a custom event like input field to get some information about the images, after that images will be shown on the screen. How can I implement this functionality?


import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';


export default function ImagePickerExample() {
  const [image, setImage] = useState(null);
  
  useEffect(() => {
    (async () => {
      if (Platform.OS !== 'web') {
        const { status } = await ImagePicker.requestCameraPermissionsAsync();
        await Alert.alert("Hello")
        if (status !== 'granted') {
          alert('Sorry, we need camera roll permissions to make this work!');
        }
      }
    })();
  }, []);
  
  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      quality: 1,
    });
    
    console.log(result);
    
    if (!result.cancelled) {
      setImage(result.uri);
    }
  };
  
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}

So basically you want the user to add additional information about the image immediately after cropping the image? — Proff Mushiana Mulweli, Mar 08 '21 at 22:04

score 3 · Accepted Answer · answered Mar 08 '21 at 23:08

Okay, so I have edited your code. I added a Modal that will be opened after cropping the image and allow the user to input information about the image. More information is written as comments on the code

import React, { useState, useEffect } from "react";
import {
  Button,
  Image,
  View,
  Platform,
  Alert,
  Modal,
  TextInput,
  TouchableOpacity,
  Text,
} from "react-native";
import * as ImagePicker from "expo-image-picker";

export default function ImagePickerExample() {
  const [image, setImage] = useState(null);
  const [modalVisible, setModalVisible] = useState(true); //Controls Modal Visibility
  const [imageReady, setImageReady] = useState(false); //When set to true, The image will be displayed with its information/details
  const [imageInfo, setImageInfo] = useState(""); //Stores information/details about the image

  useEffect(() => {
    (async () => {
      if (Platform.OS !== "web") {
        const { status } = await ImagePicker.requestCameraPermissionsAsync();
        await Alert.alert("Hello");
        if (status !== "granted") {
          alert("Sorry, we need camera roll permissions to make this work!");
        }
      }
    })();
  }, []);

  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      quality: 1,
    });

    console.log(result);

    if (!result.cancelled) {
      setImage(result.uri);
      setModalVisible(true); //Open a modal to a allow users to type in details about the image
    }
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {imageReady && ( //Image will be displayed after the modal is closed
        <Image
          source={{
            uri: image,
          }}
          style={{ width: 200, height: 200, marginTop: 10 }}
        />
      )}
      {imageInfo === "" ? null : <Text>{imageInfo}</Text>}
      <Modal animationType="slide" transparent={true} visible={modalVisible}>
        <View
          style={{
            height: 500,
            width: 500,
            backgroundColor: "white",
            alignItems: "center",
            padding: 20,
            alignSelf: "center",
          }}
        >
          <Image
            source={{
              uri: image,
            }}
            style={{ width: 300, height: 350 }}
          />
          <TextInput
            onChangeText={(text) => {
              setImageInfo(text);
            }}
            value={imageInfo}
            placeholder={"Tell us more about this image"}
            style={{
              marginTop: 10,
              color: "black",
              borderRadius: 10,
              borderColor: "black",
              borderWidth: 1,
              minHeight: 40,
              width: 240,
              padding: 5,
              maxHeight: 100,
            }}
            placeholderTextColor={"black"}
            multiline={true}
          />
          <TouchableOpacity
            style={{
              height: 40,
              width: 100,
              backgroundColor: "red",
              alignSelf: "center",
              justifyContent: "center",
              alignItems: "center",
              marginTop: 10,
            }}
            onPress={() => {
              setImageReady(true); //Allow image to be displayed
              setModalVisible(false); //Close the modal
            }}
          >
            <Text>Done</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
}

Thanks a lot, @Proff Mushiana Mulweli – Mamunur Rashid Mar 09 '21 at 07:44 — Mamunur Rashid, Mar 09 '21 at 07:44

score 1 · Answer 2 · answered Mar 09 '21 at 11:15

I have also modified @Proff Mushiana Mulweli answer, it's working properly how I want, It will first show an input then the image.

import React, { useState, useEffect } from "react";
import {Button, Image, View, Platform, Alert, Modal, TextInput, TouchableOpacity, Text,} from "react-native";
import * as ImagePicker from "expo-image-picker";

export default function App() {
  const [image, setImage] = useState(null);
  const [modalVisible, setModalVisible] = useState(true); //Controls Modal Visibility
  const [imageReady, setImageReady] = useState(false); //When set to true, The image will be displayed with its information/details
  const [imageInfo, setImageInfo] = useState(""); //Stores information/details about the image
  
  useEffect(() => {
    (async () => {
      if (Platform.OS !== "web") {
        const { status } = await ImagePicker.requestCameraPermissionsAsync();
        if (status !== "granted") {
          alert("Sorry, we need camera roll permissions to make this work!");
        }
      }
    })();
  }, []);
  
  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      quality: 1,
    });
    
    console.log(result);
    
    if (!result.cancelled) {
      setImageReady(true);
      setModalVisible(true); //Open a modal to a allow users to type in details about the image
      setImage(result.uri);
    }
  };
  
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {imageReady && ( //Image will be displayed after the modal is closed
        <Modal animationType="slide" transparent={true} visible={modalVisible}>
          <View
            style={{
              height: 500,
              width: 500,
              backgroundColor: "white",
              alignItems: "center",
              padding: 20,
              alignSelf: "center",
            }}
          >
            <TextInput
              onChangeText={(text) => {
                setImageInfo(text);
              }}
              value={imageInfo}
              placeholder={"Tell us more about this image"}
              style={{
                marginTop: 10,
                color: "black",
                borderRadius: 10,
                borderColor: "black",
                borderWidth: 1,
                minHeight: 40,
                width: 240,
                padding: 5,
                maxHeight: 100,
              }}
              placeholderTextColor={"black"}
              multiline={true}
            />
            <TouchableOpacity
              style={{
                height: 40,
                width: 100,
                backgroundColor: "red",
                alignSelf: "center",
                justifyContent: "center",
                alignItems: "center",
                marginTop: 10,
              }}
              onPress={() => {
                setModalVisible(false); //Close the modal
                setImageReady(true); //Allow image to be displayed
          
              }}
            >
              <Text>Done</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      )}
      {imageReady && ( //Image will be displayed after the modal is closed
        <Image
          source={{
            uri: image,
          }}
          style={{ width: 200, height: 200, marginTop: 10 }}
        />
      )}
      {imageInfo === "" ? null : <Text>{imageInfo}</Text>}
    </View>
  );
}

Trigger an event before the image shown on the screen?

2 Answers2