Why React-Native doesn't show data fetched by Axios?

Question

I've installed axios by this command:

npm i axios

I wrote the code below and everything I think is correct but React-Native doesn't show any data and throw any errors:

import React, {useState, useEffect} from 'react';
import axios from 'axios';

import {
  View,
  Text,
  StyleSheet
} from 'react-native';

const App = () => {
    
    const [data, setData] = useState([]);
    
    useEffect(() => {
        axios.get('http://localhost:8000/posts').then(res => {
            setData(res.data);
        });
    }, []);
    
    return (
        <View style={styles.mainBody}>
            {
                
                data.map(item => (
                    <View>
                        <Text>{item.fields.title}</Text>
                    </View>
                ))
                
            }
        </View>
    );
};

• I've tested functional and class-based components for this.

• I fetch data with Postman and works correctly.

• I added .catch and it shows this: Error: Network Error

But it doesn't work on React-Native and because of no errors, I can't understand what's my problem. Any help will be appreciated.

Answer 1

It's because you're using localhost in your URL, with react-native we cant use localhost but instead, we use the IPv4 address of our computer. So click on your wifi icon then click on the properties then look for IPv4 address something like: 193.93.443

So if to say your IPv4 address is 193.93.443, the local URL will be like this: http://193.93.443:8000/posts