How to fetch data from local JSON file on react native?

Question

How can I store local files such as JSON and then fetch the data from controller?

score 189 · Accepted Answer · edited May 06 '19 at 21:22

189

Since React Native 0.4.3 you can read your local JSON file like this:

const customData = require('./customData.json');

and then access customData like a normal JS object.

edited May 06 '19 at 21:22

jasonleonhard

12,047
89
66

answered May 16 '15 at 19:06

peter

3,109
2
18
15

Is this syntax still supported ? because i can't use this syntax in my code. – Sohail Mohabbat Ali May 23 '16 at 08:23
1

Seems to work with React Native 0.26.2 for iOS. You might want to check with `react-native -v` and try reading the `package.json`. – peter May 26 '16 at 07:21
1

customData only storing first 3500 character of file customData.json, Any other way to load large file @peter – Akki Feb 11 '17 at 09:52
@Akki Divide it into multiple smaller files? – Simon Forsberg Aug 03 '17 at 21:28
1

It works perfectly - Q: Why can't I use import syntax instead? – dod_basim Apr 08 '18 at 05:52
As mentioned by @PaulMest, the better solution for now is: `import customData from './customData.json';` – thismrojek Jul 18 '22 at 09:04
Is the `require('file')` a call to the backend/server in React similar to `fetch('function_that_returns_json_in_nodejs')` in plain js? – Timo Feb 16 '23 at 15:30

score 147 · Answer 2 · answered Jun 13 '16 at 04:35

147

ES6/ES2015 version:

import customData from './customData.json';

answered Jun 13 '16 at 04:35

PaulMest

12,925
7
53
50

1

could it have any name or does it have to be `customData ` – farmcommand2 Jul 27 '17 at 21:50
3

@farmcommand2 It can be any name. `import myJsonFile from './foobar.json';` – PaulMest Jul 28 '17 at 00:25
1

I just tried with React Native 0.57, and looks like the .json extension is not necessary. – Manuel Zapata Feb 15 '19 at 20:49
1

@ManuelZapata That is correct. If you exclude the suffix, the module resolver will try different extensions until it finds one that works. More info here: https://nodejs.org/api/modules.html#modules_all_together – PaulMest Feb 17 '19 at 20:50

score 29 · Answer 3 · answered May 26 '18 at 07:00

29

For ES6/ES2015 you can import directly like:

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

If you use typescript, you may declare json module like:

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}

answered May 26 '18 at 07:00

Little Roys

5,383
3
30
28

You cannot say `import * as data from './example.json'` because that will try to assign all inner elements as data. Instead, you must use `import data from './example.json'`. – Display name Apr 01 '23 at 00:37

score 13 · Answer 4 · edited Aug 01 '19 at 16:20

13

Use this

import data from './customData.json';

edited Aug 01 '19 at 16:20

A.L

10,259
10
67
98

answered Jan 17 '18 at 06:58

Mudassir Zakaria

387
4
17

score 9 · Answer 5 · answered Sep 06 '20 at 07:29

The following ways to fetch local JSON file-

ES6 version:

import customData from './customData.json'; or import customData from './customData';

If it's inside .js file instead of .json then import like -

import { customData } from './customData';

for more clarification/understanding refer example - Live working demo

score 3 · Answer 6 · answered Apr 05 '15 at 00:26

3

maybe you could use AsyncStorage setItem and getItem...and store the data as string, then use the json parser for convert it again to json...

answered Apr 05 '15 at 00:26

clagccs

2,224
2
21
33

score 1 · Answer 7 · answered Apr 05 '15 at 10:06

Take a look at this Github issue:

https://github.com/facebook/react-native/issues/231

They are trying to require non-JSON files, in particular JSON. There is no method of doing this right now, so you either have to use AsyncStorage as @CocoOS mentioned, or you could write a small native module to do what you need to do.

How to fetch data from local JSON file on react native?

7 Answers7

Linked