How to fetch data from local JSON file with React Native?

Sometimes, we want to fetch data from local JSON file with React Native.

In this article, we’ll look at how to fetch data from local JSON file with React Native.

How to fetch data from local JSON file with React Native?

To fetch data from local JSON file with React Native, we can import the JSON file with import.

For instance, we write:

customData.json

{
  "foo": 1
}

App.js

import * as React from 'react';
import { View, Text } from 'react-native';
import { Card } from 'react-native-paper';
import customData from './customData.json';


const App = () => {
  return (
    <View>
      <Text>{JSON.stringify(customData)}</Text>
    </View>
  );
};
export default App;

to import the content of customData.json as a default import.

Then we can use customData in our components as an object.

Therefore, we call JSON.stringify with customData to convert it to a JSON string.

And {"foo":1} is displayed on the screen.

Conclusion

To fetch data from local JSON file with React Native, we can import the JSON file with import.