JeLuOrRi/MocionesIUPI/screens/HomeScreen.js

import { propertiesListToString } from "@expo/config-plugins/build/android/Properties";
import React, { useEffect, useState }from "react";
import { StyleSheet, View, Text, Button } from 'react-native';
import { globalStyles } from "../styles/global";

export default App = ({ navigation }) => {
    const [isLoading, setLoading] = useState(true);
    const [Description, setDescription] = useState([]); // this is looking for 'Description' and it's content
    const [Mocion, setMocion] = useState([]); // this is looking for 'Mocion' and it's content
    const [PIN, setPIN] = useState([]); // this is looking for 'PIN' and it's content
  
    // this connects us to the API and fetches the json file with the mociones
    const getMociones = async () => {
       try {
        const response = await fetch('http://10.190.1.140:5000/send?PIN=121071'); // connection to the website 
        const json = await response.json();
  
        // setting the content of each category 
        setMocion(json.Mocion); 
        setDescription(json.Description);
        setPIN(json.PIN);
  
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false); // once found the loading icon will be replaced with the content of the json
      }
    }

    const pressHandler = () => {
        navigation.navigate('Mocion');
    }
    
    useEffect(() => {
        getMociones();
      }, []);

    return (
        <View style = {globalStyles.container}>
            <Text style = {globalStyles.tittleText}>Home Screen</Text>
            <Button title="go to pin page" onPress={pressHandler}/>
        </View>
    )
}