How can I resolve the error? [TypeError: Network request failed] react native

Issue

Errore nella richiesta:, [TypeError: Network request failed]

at Eventi.js:15:8 in Eventi

- ... 8 more stack frames from framework internals

im used expo go.

my js code is this:

// Eventi.js
import React, { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

const Eventi = () => {
  const [eventi, setEventi] = useState([]);

  useEffect(() => {
    const apiUrl = 'https://tuosito.altervista.org/api-eventi.php';

    fetch(apiUrl)
      .then(response => response.json())
      .then(data => setEventi(data))
      .catch(error => console.error('Errore nella richiesta:', error));
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.eventiText}>Eventi a Torino</Text>
      <View style={styles.eventiContainer}>
        {eventi.map((evento, index) => (
          <View key={index} style={styles.eventoItem}>
            <Image source={{ uri: evento.immagine }} style={styles.eventoImage} />
            <Text>{evento.nome}</Text>
            <Text>{evento.data}</Text>
            <Text>{evento.descrizione}</Text>
            <Text>{evento.luogo}</Text>
            <Text>{evento.prenotazione}</Text>
          </View>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  eventiText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  eventiContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginTop: 10,
  },
  eventoItem: {
    width: '48%',
    marginBottom: 10,
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
  },
  eventoImage: {
    width: '100%',
    height: 100,
    marginBottom: 10,
    borderRadius: 5,
  },
});

export default Eventi;

I'm new to react and I'm having this problem when I access the page. Can you give me a hand? Yesterday I felt like it. could it be the office network with some restrictions? I also wanted to know if when I fill out a form on the app like on the site I have www.chesifastasera.com, is there the possibility that when I press the send button it does the same thing and sends the same data that my site does and therefore collects the data and then send an email and create a unique code and save the data in the db.?

Solution

1st Question;

i could not access to the api you use.

but the api works with the link that you gave. https://www.chesifastasera.com/api-eventi.php

2nd Question;

I do not recommend to connect db from your app due to security breach.

You can use PHP API (or any other languages at server side) for post from the react native app.

You should fill form from the app and send POST request to the php file and insert data to db with PHP. You can achieve with same way for your other questions such as send email.

Answered By - Melihcansahin