Pantalla de Reserva de Instalaciones (principal) + modal de eliminación + confirmación de acción.

Instalaciones.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import React, {useState, useEffect} from 'react';
+import type {Node} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+  Image,
+  Dimensions,
+  FlatList,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  LearnMoreLinks,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+import { DocumentDirectoryPath, writeFile, readDir, readFile, read } from 'react-native-fs';
+
+
+{/*Para ajustar los elementos al ancho-alto de la ventana del dispositivo*/}
+const win = Dimensions.get('window');
+const ratio = win.width/541; //541 is actual image width
+
+
+function eliminarElemento(idElemento, usuarioReserva, idInstalacion, fecha, horario, nombreSala){
+	//Preguntamos antes de hacer una orden destructiva
+	Alert.alert(
+		"Advertencia",
+		"¿Desea eliminar la reserva de la sala '"+nombreSala+"' ?",
+		[
+		  {
+			text: 'Cancelar', 
+			style: 'cancel'
+		  },
+		  {
+			text: 'Aceptar',
+			onPress: (async () => {
+						try {
+							// +++++++++++++ ELIMINACION ++++++++++++
+							//Con el id del elemento en marcha, sólo nos queda modificar su atributo de eliminación de item...
+							// ++++++++++++++++++++++++++++++++++++++
+							
+							//Obtenemos el fichero primigenio
+							var filesArr = await readFile(DocumentDirectoryPath+"/reservasInstalaciones.json");
+							
+							//Buscamos patron y remplazamiento
+							var stringBuscar = '{"id":'+idElemento+',"usuarioReserva":"'+usuarioReserva+'","idInstalacion":"'+idInstalacion+'","fecha":"'+fecha+'","horario":"'+horario+'","borrado":"0"}';
+							var replace = '{"id":'+idElemento+',"usuarioReserva":"'+usuarioReserva+'","idInstalacion":"'+idInstalacion+'","fecha":"'+fecha+'","horario":"'+horario+'","borrado":"1"}';
+							
+							//Machacamos
+							filesArr = filesArr.replace(stringBuscar, replace);
+							
+							//Ejecutamos al fichero
+							await writeFile(DocumentDirectoryPath+"/reservasInstalaciones.json", filesArr);
+							
+							//Mensaje de borrado...
+							Alert.alert(
+								"Elemento Eliminado",
+								"La sala '"+nombreSala+"' se ha eliminado con éxito.",
+								[
+								  {
+									text: 'Aceptar',
+									style: 'accept',
+								  },
+								],
+							);
+						}catch (e) {
+							console.log('error', e);
+						}
+					})
+		  },
+		],
+		{
+			cancelable: true,
+		}
+	);
+	
+	
+	
+	
+	/**/
+}
+
+
+const Instalaciones = ({navigation, route}) => {	
+  {/*Preparamos los elementos dinamicos del json...*/}
+  const [files, setFiles] = useState(() => {
+    (async () => {
+      try {
+        var filesArr = JSON.parse("["+await readFile(DocumentDirectoryPath+"/reservasInstalaciones.json")+"]");
+		filesArr = filesArr.filter(item => item.borrado === "0"); 
+		filesArr = filesArr.filter(item => item.usuarioReserva === route.params.id);
+        setFiles(filesArr);
+      }catch (e) {
+        console.log('error', e);
+      }
+    })();
+	return () => null;
+  }, []);
+  
+  {/*Consultaremos cada segundo, las posibles actualizaciones que haga sobre los datos la aplicación*/}
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    // Intervalo de actualizacion
+	const interval = setInterval(() => {
+      (async () => {
+      try {
+        var filesArr = JSON.parse("["+await readFile(DocumentDirectoryPath+"/reservasInstalaciones.json")+"]");
+		filesArr = filesArr.filter(item => item.borrado === "0"); 
+		filesArr = filesArr.filter(item => item.usuarioReserva === route.params.id);
+        setFiles(filesArr);
+      }catch (e) {
+        console.log('error', e);
+      }
+    })();
+    }, 1000);
+
+    // Subscribe for the focus Listener
+    const unsubscribe = navigation.addListener('focus', () => {
+      setCount(0);
+    });
+
+    return () => {
+      // Clear setInterval in case of screen unmount
+      clearTimeout(interval);
+      // Unsubscribe for the focus Listener
+      unsubscribe;
+    };
+  }, [navigation]);
+	
+
+
+  {/*Ahora, le toca a los 2 json: El de reservas y el de instalaciones... y filramos por el usuario activo y por las reservas sin borrar*/}
+  const jsonInstalaciones = require('./assets/data/load/instalaciones.json');
+  //var jsonReservasInstalaciones = require('./assets/data/load/reservasInstalaciones.json');
+  //var jsonReservasInstalaciones = Object.entries(json);
+  var jsonReservasInstalaciones = files;
+  {/*Falta el cribado de tiempo con la fecha actual...*/}
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+  
+  {/*Recursos gráficos de la aplicacion de reservas de instalaciones*/}
+  const recursos = {
+	"polideportiva_derecha.jpg": {
+		uri: require('./assets/img/installations/polideportiva_derecha.jpg')
+	},
+	"polideportiva_izquierda.jpg": {
+		uri: require('./assets/img/installations/polideportiva_izquierda.jpg')
+	},
+	"polideportiva_interior.jpg": {
+		uri: require('./assets/img/installations/polideportiva_interior.jpg')
+	},
+	"sala_musica.jpg": {
+		uri: require('./assets/img/installations/sala_musica.jpg')
+	},
+	"sala_informatica.jpg": {
+		uri: require('./assets/img/installations/sala_informatica.jpg')
+	},
+  };
+
+  return (
+	<View style={{flex: 1, backgroundColor:'rgba(52, 52, 52, 0.1)'}}>
+		<FlatList
+			data={jsonReservasInstalaciones}
+			renderItem={({item}) => <View style={[styles.container, { flex: 1, backgroundColor: "#EFF2F7" }]}>
+										<Image style={styles.imagen} source={recursos[jsonInstalaciones[item.idInstalacion].ImagenRecurso].uri} />
+										<View style={[styles.containerTexto, { flex: 0.27, backgroundColor: "white" }]}>
+											<Text style={[styles.textoPista]}>{jsonInstalaciones[item.idInstalacion].NombreSala}</Text>
+											<Text style={[styles.textoInfoPista]}>Rervada: {item.fecha} / Hora: {item.horario}</Text>
+											<TouchableOpacity onPress={() => eliminarElemento(item.id, route.params.id, item.idInstalacion, item.fecha, item.horario, jsonInstalaciones[item.idInstalacion].NombreSala)}><Text style={[styles.textoAnular]}>CANCELAR RESERVA</Text></TouchableOpacity>
+										</View>
+									</View>}
+			keyExtractor={item => item.id}
+			ListEmptyComponent = {<Text style={[styles.noReservas]}>No hay reservas disponibles.</Text>}
+		/>
+		<TouchableOpacity style={styles.botonPos} onPress={() => navigation.navigate('AddReservaInstalacion', {id: route.params.id})}>
+			<View style={styles.contenedorBoton}>
+				<Image style={styles.contenedorImage} source={require("./assets/img/icons/iconoAdd.png")}></Image>
+			</View>          
+		</TouchableOpacity>
+	</View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  containerTexto: {
+    width: win.width-20,
+	left: 10, 
+	top: 5,
+	height: win.height/6
+  },
+  imagen: {
+	width: win.width-20,
+	height: win.height/4,
+	resizeMode: 'cover', 
+	left: 10, 
+	top: 5,    
+  }, 
+  textoPista: {
+	fontSize: 25.0,
+	color: '#47525E',
+	left: 25,
+	top: 10
+  },
+  textoInfoPista: {
+	fontSize: 13.0,
+	color: '#8492A6',
+	left: 25,
+	top: 15
+  },
+  textoAnular: {
+	fontSize: 15.0,
+	color: '#F95F62',
+	left: 25,
+	top: 25
+  },
+  noReservas: {
+	fontSize: 25.0,
+	color: '#F95F62',
+	left: 25,
+	top: 10,
+	marginBottom: 20
+  },
+  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
+  }
+});
+
+export default Instalaciones;

assets/data/load/instalaciones.json

+{
+    "1":{
+        "NombreSala": "Aula de Informática", 
+        "LimiteReservas": "2",
+        "DiaReserva": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
+        "Horarios": ["08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00"],
+        "ImagenRecurso": "sala_informatica.jpg",
+    },
+    "2":{
+        "NombreSala": "Pista deportiva derecha", 
+        "LimiteReservas": "2",
+        "DiaReserva": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
+        "Horarios": ["08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00"],
+        "ImagenRecurso": "polideportiva_derecha.jpg",
+    },
+	"3":{
+        "NombreSala": "Pista deportiva izquierda", 
+        "LimiteReservas": "2",
+        "DiaReserva": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
+        "Horarios": ["08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00"],
+        "ImagenRecurso": "polideportiva_izquierda.jpg",
+    },
+	"4":{
+        "NombreSala": "Aula de Música", 
+        "LimiteReservas": "2",
+        "DiaReserva": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
+        "Horarios": ["08:30 - 09:30", "09:30 - 10:30", "10:30 - 11:30", "11:30 - 12:30", "12:30 - 13:30", "13:30 - 14:30"],
+        "ImagenRecurso": "sala_musica.jpg",
+    }
+}
\ No newline at end of file

assets/data/load/reservasInstalaciones.json

+[
+    {
+		"id": 1,
+        "usuarioReserva": "dgh00001", 
+        "idInstalacion": "1",
+        "fecha": "25-01-2023",
+		"horario": "13:00 - 14:00",
+        "borrado": "0"
+    },
+    {
+		"id": 2,
+        "usuarioReserva": "dgh00001", 
+        "idInstalacion": "2",
+        "fecha": "25-01-2023",
+		"horario": "12:00 - 13:00",
+        "borrado": "1"
+    },
+	{
+		"id": 3,
+        "usuarioReserva": "icl00001", 
+        "idInstalacion": "4",
+        "fecha": "25-01-2023",
+		"horario": "13:00 - 14:00",
+        "borrado": "0"
+    },
+    {	
+		"id": 4,
+        "usuarioReserva": "icl00001", 
+        "idInstalacion": "1",
+        "fecha": "25-01-2023",
+		"horario": "12:00 - 13:00",
+        "borrado": "0"
+    },
+]
\ No newline at end of file