restricting amount of images

src/app/components/forms/FormImagePicker.js

@@ -1,20 +1,41 @@
-import React from "react";
+import React, { useState } from "react";
 import { useFormikContext } from "formik";
 
 import ErrorMessage from "./ErrorMessage";
 import ImageInputList from "../ImageInputList";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, Modal, Alert } from "react-native";
 import colors from "../../config/colors";
 import { dimensions } from "../../config/dimensions";
 
 function FormImagePicker({ name }) {
   const { errors, setFieldValue, touched, values } = useFormikContext();
   const imageUris = values[name];
+  const [modalVisible, setModalVisible] = useState(false);
 
   const handleAdd = (uri) => {
-    setFieldValue(name, [...imageUris, uri]);
+    if (imageUris.length === 0) {
+      setFieldValue(name, [uri]);
+    } else {
+      createTwoButtonAlert(uri);
+    }
   };
 
+  const createTwoButtonAlert = (uri) =>
+    Alert.alert(
+      "Substituir imagem?",
+      "É possível enviar apenas uma imagem",
+      [
+        {
+          text: "Cancel",
+          onPress: () => console.log("Cancel Pressed"),
+          style: "cancel"
+        },
+        { text: "OK", onPress: () =>  setFieldValue(name, [uri])}
+      ],
+      { cancelable: false }
+    );
+
+
   const handleRemove = (uri) => {
     setFieldValue(
       name,
@@ -43,6 +64,14 @@ const styles = StyleSheet.create({
     marginBottom: 5,
     marginTop: 15,
   },
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
 });
 
+
+
 export default FormImagePicker;