So I am using a fake backend called json server and I am trying to fetch data from it but it is throwing this error

[Unhandled promise rejection: TypeError: Network request failed]

This is what my code looks like starting with the json server file

{
    "listings": [
      { 
        "id": 0,
        "image": "../app/assets/jacket.jpg",
        "title": "Red jacket for sale",
        "subtitle": "$400"
      },
      { 
        "id": 1,
        "image": "../app/assets/couch.jpg",
        "title": "Nice couch for basking in",
        "subtitle": "$100"
      },
      { 
        "id": 2,
        "image": "../app/assets/image.jpg",
        "title": "Just an image for sale nje",
        "subtitle": "$10"
      }
    ]
  }

And then my logic file where i call using fetch

import React, {useEffect, useState} from 'react'
import { StyleSheet, Text, View } from 'react-native'

export default function ItemsScreen() {
    const [listings, setlistings] = useState(null);

    useEffect(() => {
        fetch("http://localhost:8000/listings")
            .then(res => {
                return res.json();
            })
            .then(data => {
                setlistings(data)
            })
    }, []);

    return (
        <View>
            {listings && listings.map(listing => (
                <View key={listing.id}>
                    <Text>{listing.title}</Text>
                    <Text>{listing.subtitle}</Text>
                </View>
            ))}
        </View>
    )
}

const styles = StyleSheet.create({})

And finally my App.js file

import React, {useState} from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'

import ItemsScreen from './app/screens/ItemsScreen'

export default function App() {

  return (
        <ItemsScreen />
  )
}

const styles = StyleSheet.create({})

This is all of it. Where could I be going wrong?