imagePicker

src/app/components/ImageInput.js

@@ -19,8 +19,9 @@ function ImageInput({ imageUri, onChangeImage }) {
     requestPermission();
     //requestPermissionCamera();
   }, []);
+  const [modalVisible, setModalVisible] = useState(false);
 
-  /* const requestPermissionCamera = async () => {
+  const requestPermissionCamera = async () => {
     const { granted } = await Permissions.askAsync(Permissions.CAMERA);
     if(granted) {
       launchCamera();
@@ -38,7 +39,7 @@ function ImageInput({ imageUri, onChangeImage }) {
     } catch (error) {
       console.log("Erro ao ler imagem", error);
     }
-  };*/
+  };
 
   const requestPermission = async () => {
     const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
@@ -47,7 +48,7 @@ function ImageInput({ imageUri, onChangeImage }) {
   };
 
   const handlePress = () => {
-    if (!imageUri) launchImageLibrary();
+    if (!imageUri) setModalVisible(true);
     else
       Alert.alert("Deletar", "Deseja deletar esta imagem?", [
         { text: "Sim", onPress: () => onChangeImage(null) },
@@ -78,15 +79,43 @@ function ImageInput({ imageUri, onChangeImage }) {
               size={40}
             />
           )}
-          {imageUri && (
-            <Image source={{ uri: imageUri }} style={styles.image} />
-          )}
+          {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
         </View>
       </TouchableWithoutFeedback>
+      <View >
+        <Modal style={styles.centeredView}
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}>
+          <TouchableWithoutFeedback onPress={() => {
+            setModalVisible(!setModalVisible);
+          }}>
+            <View style={styles.centeredView}>
+              <View style={styles.modalView}>
+                <View>
+                  <Text style={styles.modalLabel}>Selecione uma imagem</Text>
+                  <TouchableOpacity style={{ width: 300 }} onPress={requestPermissionCamera}>
+                    <Text style={styles.modalText}>Câmera</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity style={{ width: 300 }} onPress={launchImageLibrary}>
+                    <Text style={styles.modalText}>Galeria</Text>
+                  </TouchableOpacity>
+                </View>
+                <TouchableOpacity style={{ width: 300 }} onPress={() => { setModalVisible(false) }}>
+                  <Text style={{ fontWeight: 'bold', marginTop: 20, fontSize: 14, textAlign: 'center' }}>
+                    Cancelar
+                </Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      </View>
     </View>
   );
 }
 
+
 const styles = StyleSheet.create({
   container: {
     alignItems: "center",

src/app/screens/PluviometerSharingDataScreen.js

@@ -102,7 +102,7 @@ function PluviometerSharingDataScreen(props) {
           }}
           validationSchema={validationSchema}
         >
-          <View style={{ marginTop: 30 }}>
+          <View style={{ marginTop: 30, flex: 1 }}>
             <Text style={styles.labelStyle}>
               Quantidade de chuva:
           </Text>
@@ -111,7 +111,7 @@ function PluviometerSharingDataScreen(props) {
               maxLength={200}
               name="pluviometer"
               placeholder="Digite a quantidade de chuva" 
-              width={280}
+              flex= {1}
             />
           </View>
 
@@ -213,6 +213,8 @@ function PluviometerSharingDataScreen(props) {
 const styles = StyleSheet.create({
   container: {
     padding: 10,
+    flex: 1
+  
   },
   image: {
     width: 85,