Inclusión del modal para eliminar una reserva de material

BotonAdd.js

+import React from "react";
+import { StyleSheet, Image, View, TouchableOpacity } from "react-native";
+
+/**
+ * @brief Mantiene todos los estilos aplicados a esta vista
+ */
+const estilosBoton = StyleSheet.create({
+    contenedorBoton: {
+        backgroundColor: '#7D9BFF',
+        borderRadius: 100,
+        width: 60,
+        height: 60,
+        justifyContent: 'center'
+    },
+    contenedorImage: {
+        width: 20,
+        height: 20,
+        tintColor: 'white',
+        alignSelf: 'center'
+    },
+    botonPos: {
+        position: 'absolute',
+        bottom: 20,
+        right: 20
+    }
+});
+
+/**
+ * Componente que contiene el botón que permite añadir una reserva de material o instalacion 
+ */
+const BotonAñadir = (props) => {
+    return(
+        <TouchableOpacity style={estilosBoton.botonPos} onPress={()=> props.class.setModalAdd()}>
+            <View style={estilosBoton.contenedorBoton}>
+                <Image style={estilosBoton.contenedorImage} source={require("./assets/img/icons/iconoAdd.png")}></Image>
+            </View>          
+        </TouchableOpacity>
+    );
+}
+
+export default BotonAñadir;

ModalAddListaMat.js

+import React, {useState} from 'react';
+import { View, Image, Modal, StyleSheet, TouchableOpacity, Text, TextInput } from 'react-native';
+import DatePicker from 'react-native-date-picker';
+import { Picker } from '@react-native-picker/picker';
+
+const meses = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"]
+
+/**
+ * Modal que permite introducir el nombre de la nueva lista, fecha y hora de reserva
+ * @param {class} props Clase que contiene los materiales del usuario
+ */
+const ModalAddListaMat = (props) => {
+  const [textoNombreLista, setTextoNombreLista] = useState("");
+  const [date, setDate] = useState(new Date()); //Fecha de reserva
+  const [open, setOpen] = useState(false); //Booleano utilizado para abrir el modal que permite indicar la fecha
+  const [cFVis, setCFVis] = useState(false); // Booleano utilizado para mostrar un texto que indica que el usuario no ha introducido el nombre de la lista
+  const rangosHorarios = require("./assets/data/load/RangoHorarios.json")
+  const [hora, setHora] = useState(rangosHorarios[0].horaInicio + " - " + rangosHorarios[0].horaFin); //Hora de reserva
+  return (
+    <Modal transparent={true} visible={props.class.state.modalAdd} animationType={'fade'}>
+      <View style={estiloModalAddListaMat.CentrarModal}>
+        <View style={estiloModalAddListaMat.VistaModal}>
+          {/* Título del modal que permite introducir una nueva lista de materiales */}
+          <Text style={estiloModalAddListaMat.TituloModal}>Añadir lista</Text>
+          {/* Nombre de la lista de materiales */}
+          <Text style={estiloModalAddListaMat.TextoModal}>Indique el nombre de la lista</Text>
+          <TextInput style={[estiloModalAddListaMat.input, estiloModalAddListaMat.textoInput, {height: 35}]}
+          onChangeText={(text) => setTextoNombreLista(text)}
+          placeholder='Nombre de la lista' />
+          {/* Fecha de reserva de la lista de materiales */}
+          <Text style={estiloModalAddListaMat.TextoModal}>Seleccione una fecha</Text>
+          <View style={[estiloModalAddListaMat.input, estiloModalAddListaMat.contenedorFecha]}>
+            <Text style={estiloModalAddListaMat.textoInput}>{date.getDate()} de {meses[date.getMonth()]} de {date.getFullYear()}</Text>
+            <TouchableOpacity onPress={() => setOpen(true)}>
+              <Image style={estiloModalAddListaMat.iconoCalendario} source={require("./assets/img/icons/Calendario.png")}></Image>
+            </TouchableOpacity>
+            <DatePickerAddListaMat open={open} setOpen={setOpen} date={date} setDate={setDate} />
+          </View>
+          {/* Hora de reserva de la lista de materiales */}
+          <Text style={estiloModalAddListaMat.TextoModal}>Seleccione una hora</Text>
+          <View style={estiloModalAddListaMat.input}>
+            <Picker mode='dropdown' 
+              selectedValue={hora}
+              onValueChange={(itemValue) => setHora(itemValue)} 
+              style={estiloModalAddListaMat.picker}>
+              {rangosHorarios.map((rangoHor) =>
+                <Picker.Item key={rangoHor.horaInicio + " - " + rangoHor.horaFin} 
+                style={estiloModalAddListaMat.textoInput} 
+                label={rangoHor.horaInicio + " - " + rangoHor.horaFin} 
+                value={rangoHor.horaInicio + " - " + rangoHor.horaFin} />
+              )}
+            </Picker>
+          </View>
+          {/* Si al pulsar sobre el botón crear lista no se han incluido todos los campos, se muestra un texto informátivo */}
+          <CamposFaltantes cFVis={cFVis} />
+          {/* Botónes de crear lista y cancelar la creación */}
+          <View style={estiloModalAddListaMat.contenedorBotones}>
+            <TouchableOpacity onPress={() => {
+              if(textoNombreLista == "") {
+                setCFVis(true)
+              } else {
+                props.class.setModalAdd()
+                props.class.props.navigation.navigate("Reserva de material", {fechaRes: date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear(), horaRes: hora, setJson: ()=> props.class.setJson("añadir", false)});
+              }
+            }}>
+              <Text style={{color: "#47525E", marginLeft: 15}}>CREAR LISTA</Text>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => {
+                setCFVis(false)
+                props.class.setModalAdd()
+            }}>
+              <Text style={{color: "#F95F62"}}>CANCELAR</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+/**
+ * Devuelve un texto indicando al usuario que no ha introducido el nombre de la lista de reserva de material, en caso necesario
+ * @param {cFVis} props Booleano utilizado para mostrar un texto que indica que el usuario no ha introducido el nombre de la lista
+ * @returns 
+ */
+const CamposFaltantes = (props) => {
+  if(props.cFVis) {
+    return <Text style={{color: "#F95F62", fontSize: 12}}>Se debe rellenar el nombre de la lista</Text>
+  } else {
+    return <Text></Text>
+  }
+}
+
+/**
+ * Picker que permite a un usuario escoger una fecha
+ * @param {open, date} props booleano utilizado para indicar si se debe introducir una fecha y fecha actual
+ */
+const DatePickerAddListaMat = (props) => {
+  return (
+    <DatePicker 
+    modal
+    open={props.open}
+    date={props.date}
+    locale='es'
+    mode='date'
+    title="Selecciona una fecha"
+    confirmText='Confirmar'
+    cancelText='Cancelar'
+    onConfirm={(date) => {
+      props.setOpen(false)
+      props.setDate(date)
+    }}
+    onCancel={() => {
+      props.setOpen(false)
+    }}
+    />
+  );
+}
+
+/**
+ * @brief Mantiene todos los estilos aplicados a esta vista
+ */
+const estiloModalAddListaMat = StyleSheet.create({
+  CentrarModal: {
+    flex: 1,
+    backgroundColor: "rgba(1,1,1,0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  VistaModal: {
+    width:330,
+    height:360,
+    margin: 10,
+    backgroundColor: "white",
+    borderRadius: 1,
+    padding: 25,
+  },
+  TituloModal:{
+    fontWeight:"bold",
+    color:"#47525E", 
+    fontSize:20, 
+    marginBottom:25
+  },
+  TextoModal: {
+    fontSize: 10,
+    color:"#8492A6",
+  },
+  contenedorFecha: {
+    flexDirection: 'row', 
+    justifyContent: 'space-between',
+    marginTop: 10,
+    marginLeft: 3,
+    height: 27
+  },
+  input: {
+    borderBottomWidth: 1,
+    borderBottomColor: "#B5B2B2",
+    paddingBottom: 5,
+    marginBottom: 15
+  },
+  textoInput: {
+    color:"#47525E",
+    fontSize: 14
+  },
+  picker: {
+    marginLeft: -13,
+    marginRight: -15,
+    marginBottom: -15,
+    marginTop: -4
+  },
+  contenedorBotones: {
+    flexDirection: 'row-reverse',
+    bottom: 20,
+    right: 20,
+    position: 'absolute'
+  },
+  iconoCalendario: {
+    width: 19,
+    height: 19
+  },
+});
+
+export default ModalAddListaMat;
\ No newline at end of file

TabBar.js

 import React from "react";
 import { Image } from "react-native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import listaMatRes from './listaMatRes.js';
 import Perfil from "./Perfil.js";
 import Guardias from "./Guardias.js";
 
@@ -14,7 +15,7 @@ const TabBar = ({route}) => {
     return(
         <tabBar.Navigator >
             {/* Vista de inicio */}
-            <tabBar.Screen name="Inicio" component={Guardias} initialParams={{id: route.params.id}} // cambiar por inicio
+            <tabBar.Screen name="Inicio" component={Guardias} initialParams={{id: route.params.id}}
             options={{
                 tabBarIcon: ({size, color}) => {
                     return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoInicio.png")}/>
@@ -31,7 +32,7 @@ const TabBar = ({route}) => {
                 tabBarLabel: "Guardias"
             }}/>
             {/* Vista de reservas de instalaciones */}
-            <tabBar.Screen name="Instalaciones" component={Guardias} initialParams={{id: route.params.id}} // cambiar por instalaciones
+            <tabBar.Screen name="Instalaciones" component={Guardias} initialParams={{id: route.params.id}}
             options={{
                 tabBarIcon: ({size, color}) => {
                     return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoInstalaciones.png")}/>
@@ -40,7 +41,7 @@ const TabBar = ({route}) => {
                 tabBarLabel: "Instalaciones"
             }}/>
             {/* Vista de reservas de material */}
-            <tabBar.Screen name="Material" component={Guardias} initialParams={{id: route.params.id}} // cambiar por materiales
+            <tabBar.Screen name="Material" component={listaMatRes} initialParams={{id: route.params.id}}
             options={{
                 tabBarIcon: ({size, color}) => {
                     return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoMaterial.png")}/>

android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java

@@ -11,6 +11,10 @@ import com.facebook.react.shell.MainReactPackage;
 import java.util.Arrays;
 import java.util.ArrayList;
 
+// @react-native-picker/picker
+import com.reactnativecommunity.picker.RNCPickerPackage;
+// react-native-date-picker
+import com.henninghall.date_picker.DatePickerPackage;
 // react-native-safe-area-context
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
 // react-native-screens
@@ -60,6 +64,8 @@ public class PackageList {
   public ArrayList<ReactPackage> getPackages() {
     return new ArrayList<>(Arrays.<ReactPackage>asList(
       new MainReactPackage(mConfig),
+      new RNCPickerPackage(),
+      new DatePickerPackage(),
       new SafeAreaContextPackage(),
       new RNScreensPackage()
     ));