if 2nd image uploaded the 1st image will remove and 2nd image will come in the place of this 1st image how to achieve that in react native

if 2nd image uploaded the 1st image will remove and 2nd image will come in the place of this 1st image how to achieve that in react native

Here is Expo Snack Link for that project Link to Expo Snack

I have made many changes to the code and create a state for storing image type like PAN or GST or Aadhar and according to this type set image.uri property to imageArray.

I have also removed FlatList from code beacause i have changed ImageArray State to object

import React, { useState, useEffect } from react;
import {
  StyleSheet,
  View,
  Button,
  Image,
  FlatList,
  Text,
  TextInput,
  alert,
  Alert,
} from react-native;
import { Camera } from expo-camera;
import { Ionicons } from @expo/vector-icons;
import * as ImagePicker from expo-image-picker;
import { Entypo } from @expo/vector-icons;

export default function Add({ navigation }) {
  // const { height } = Dimensions.get(window);
  // const { width } = Dimensions.get(window);

  const [cameraPermission, setCameraPermission] = useState(null);
  const [galleryPermission, setGalleryPermission] = useState(null);
  const [showCamera, setShowCamera] = useState(false);
  const [camera, setCamera] = useState(null);
  const [imageUri, setImageUri] = useState([]);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const [imageArray, setImageArray] = useState({
    PAN: null,
    GST: null,
    Aadhar: null,
  });
  const [imageType, setImageType] = useState();

  const [PIMGError, setPImgError] = useState([]);
  const [PIMG, setPImg] = useState();
  const [GIMGError, setGImgError] = useState([]);
  const [GIMG, setGImg] = useState();
  const [AIMGError, setAImgError] = useState([]);
  const [AIMG, setAImg] = useState();

  const permisionFunction = async () => {
    // here is how you can get the camera permission
    const cameraPermission = await Camera.requestPermissionsAsync();
    console.log(camera permission:, cameraPermission.status);

    setCameraPermission(cameraPermission.status === granted);

    const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();
    console.log(permission:, imagePermission.status);

    setGalleryPermission(imagePermission.status === granted);

    if (
      imagePermission.status !== granted &&
      cameraPermission.status !== granted
    ) {
      alert(Permission for media access needed.);
    }
  };

  useEffect(() => {
    permisionFunction();
  }, []);

  const validateInputs = () => {
    if (!/[A-Z]{5}[0-9]{4}[A-Z]{1}/.test(PIMG)) {
      setPImgError(Please Insert PAN Card Image);
      return;
    }
    if (
      !/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/.test(GIMG)
    ) {
      setGImgError(Please Insert GST Card Image);
      return;
    }
    if (!/^[2-9]{1}[0-9]{3}\s[0-9]{4}\s[0-9]{4}$/.test(AIMG)) {
      setAImgError(Please Insert Adhar Card Image);
      return;
    } else {
      Alert.alert(All fields validated);
      return;
    }
  };

  const handlePIMG = (text) => {
    setPImgError();
    setPImg(text);
  };
  const handleGIMG = (text) => {
    setGImgError();
    setGImg(text);
  };
  const handleAIMG = (text) => {
    setAImgError();
    setAImg(text);
  };

  const takePicture = async () => {
    if (camera) {
      const data = await camera.takePictureAsync(null);
      console.log(data.uri);
      setImageUri(data.uri);
      const newImageArr = imageArray;
      if (imageType === PAN) {
        newImageArr.PAN = data.uri;
      }
      if (imageType === GST) {
        newImageArr.GST = data.uri;
      }
      if (imageType === Aadhar) {
        newImageArr.Aadhar = data.uri;
      }
      setImageArray({ ...newImageArr });
      setShowCamera(false);
      setImageType();
    }
  };

  const pickImage = async (type) => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 1,
    });

    console.log(result.uri);
    if (!result.cancelled) {
      const newImageArr = imageArray;
      if (type === PAN) {
        newImageArr.PAN = result.uri;
      }
      if (type === GST) {
        newImageArr.GST = result.uri;
      }
      if (type === Aadhar) {
        newImageArr.Aadhar = result.uri;
      }
      setImageArray({ ...newImageArr });
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={styles.header}>
        <Ionicons
          style={{ paddingLeft: 20 }}
          name=arrow-back
          size={40}
          color=black
          onPress={() => navigation.navigate(FormItems)}
        />
        <Text style={{ fontSize: 20, paddingLeft: 70, paddingTop: 10 }}>
          KYC Details
        </Text>
      </View>

      <View style={styles.container}>
        {showCamera && (
          <Camera
            ref={(ref) => setCamera(ref)}
            style={{ flex: 1 }}
            type={type}
          />
        )}
        {showCamera && <Button title={Click} onPress={takePicture} />}
        {!showCamera && (
          <>
            <View
              style={{ flexDirection: row, justifyContent: space-between }}>
              <View style={{ flexDirection: row, paddingTop: 30 }}>
                <Text
                  style={{
                    fontSize: 20,
                    color: white,
                    marginRight: 35,
                    marginLeft: 20,
                  }}>
                  Insert PAN Card Image
                </Text>
                <Entypo
                  name=camera
                  size={24}
                  color=black
                  onPress={() => {
                    setShowCamera(true);
                    setImageType(PAN);
                  }}
                />
                <Entypo
                  style={{ marginLeft: 10 }}
                  name=folder-images
                  size={24}
                  color=black
                  onPress={() => {
                    pickImage(PAN);
                  }}
                />
              </View>
            </View>

            <View
              style={{ flexDirection: row, justifyContent: space-between }}>
              <View style={{ flexDirection: row, paddingTop: 30 }}>
                <Text
                  style={{
                    fontSize: 20,
                    color: white,
                    marginRight: 35,
                    marginLeft: 20,
                  }}>
                  Insert GST Card Image
                </Text>
                <Entypo
                  name=camera
                  size={24}
                  color=black
                  onPress={() => {
                    setShowCamera(true);
                    setImageType(GST);
                  }}
                />
                <Entypo
                  style={{ marginLeft: 10 }}
                  name=folder-images
                  size={24}
                  color=black
                  onPress={() => {
                    pickImage(GST);
                  }}
                />
              </View>
            </View>

            <View
              style={{ flexDirection: row, justifyContent: space-between }}>
              <View style={{ flexDirection: row, paddingTop: 30 }}>
                <Text
                  style={{
                    fontSize: 20,
                    color: white,
                    marginRight: 20,
                    marginLeft: 20,
                  }}>
                  Insert Adhar Card Image
                </Text>
                <Entypo
                  name=camera
                  size={24}
                  color=black
                  onPress={() => {
                    setShowCamera(true);
                    setImageType(Aadhar);
                  }}
                />
                <Entypo
                  style={{ marginLeft: 10 }}
                  name=folder-images
                  size={24}
                  color=black
                  onPress={() => {
                    pickImage(Aadhar);
                  }}
                />
              </View>
            </View>

            {imageArray.PAN && (
              <Image
                source={{ uri: imageArray.PAN }}
                style={{
                  width: 100,
                  height: 100,
                  borderRadius: 10,
                  margin: 5,
                }}
              />
            )}

            {imageArray.GST && (
              <Image
                source={{ uri: imageArray.GST }}
                style={{
                  width: 100,
                  height: 100,
                  borderRadius: 10,
                  margin: 5,
                }}
              />
            )}

            {imageArray.Aadhar && (
              <Image
                source={{ uri: imageArray.Aadhar }}
                style={{
                  width: 100,
                  height: 100,
                  borderRadius: 10,
                  margin: 5,
                }}
              />
            )}
          </>
        )}
        <Button
          style={styles.inputStyleB}
          title=Submit
          color=#808080
          onPress={() => validateInputs()}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    // marginTop: 30,
    flex: 1,
    backgroundColor: rgb(247, 146, 57),
    // alignItems: center,
    // justifyContent: center,
    paddingTop: 15,
  },
  fixedRatio: {
    flex: 1,
  },
  header: {
    flexDirection: row,
  },
});


if 2nd image uploaded the 1st image will remove and 2nd image will come in the place of this 1st image how to achieve that in react native

Leave a Reply

Your email address will not be published.