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?

Answer 1

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.

Answer 2

ES6/ES2015 version:

import customData from './customData.json';

Answer 3

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;
}

Answer 4

Use this

import data from './customData.json';

Answer 5

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

Answer 6

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...

Answer 7

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.

Answer 8

I have the same requirement like above I have found the above mentioned ways helpful just to add more clarity and I have followed below ways to access json array from a .js file or .json file like below

1st Method :

Step - 1: Create a js file like below and add the custom data into that json array like below

data.js

export const DATA = [
    {
      id: 1,
      title: 'The Hunger Games'
    },
    {
      id: 2,
      title: 'Harry Potter and the Order of the Phoenix'
    },
    {
      id: 3,
      title: 'To Kill a Mockingbird'
    },
    {
      id: 4,
      title: 'Pride and Prejudice'
    },
    {
      id: 5,
      title: 'Twilight'
    },
    {
      id: 6,
      title: 'The Book Thief'
    },
    {
      id: 7,
      title: 'The Chronicles of Narnia'
    },
    {
      id: 8,
      title: 'Animal Farm'
    },
    {
      id: 9,
      title: 'Gone with the Wind'
    },
    {
      id: 10,
      title: 'The Shadow of the Wind'
    },
    {
      id: 11,
      title: 'The Fault in Our Stars'
    },
    {
      id: 12,
      title: "The Hitchhiker's Guide to the Galaxy"
    },
    {
      id: 13,
      title: 'The Giving Tree'
    },
    {
      id: 14,
      title: 'Wuthering Heights'
    },
    {
      id: 15,
      title: 'The Da Vinci Code'
    }
  ];
  
  export default DATA;

Step - 2: Now accessing and showing in a list from App.js file so first I have imported like below and showing in a list

import DATA from './data';

App.js

import React from 'react';
import DATA from './data';
import { SafeAreaView,StyleSheet, View, Text}  from 'react-native';

const App = () => {

  return (
    <SafeAreaView style={{flex:1}}>
    <View style={{ flex: 1, backgroundColor: 'white' }}>
        {DATA.map((item)=> 
        {return(
          <View style={{flex:1,borderBottomColor:'red',borderBottomWidth:2,marginHorizontal:12,justifyContent:'center'}} key={item.id}>
           <Text numberOfLines={1} style={{fontSize: 24, fontWeight: '400'}}>{item.title}</Text>
        </View>
        )})}
    </View>
    </SafeAreaView>
)
}

and then below screenshot is the result for both the methods followed. Just to add both App.js and data.js, items.json are present in the same folder.

2nd Method :

Step - 1: Create a json file like below and add the custom data into that json array like below

items.json

[
    {
      "id": 1,
      "title": "The Hunger Games"
    },
    {
      "id": 2,
      "title": "Harry Potter and the Order of the Phoenix"
    },
    {
      "id": 3,
      "title": "To Kill a Mockingbird"
    },
    {
      "id": 4,
      "title": "Pride and Prejudice"
    },
    {
      "id": 5,
      "title": "Twilight"
    },
    {
      "id": 6,
      "title": "The Book Thief"
    },
    {
      "id": 7,
      "title": "The Chronicles of Narnia"
    },
    {
      "id": 8,
      "title": "Animal Farm"
    },
    {
      "id": 9,
      "title": "Gone with the Wind"
    },
    {
      "id": 10,
      "title": "The Shadow of the Wind"
    },
    {
      "id": 11,
      "title": "The Fault in Our Stars"
    },
    {
      "id": 12,
      "title": "The Hitchhiker's Guide to the Galaxy"
    },
    {
      "id": 13,
      "title": "The Giving Tree"
    },
    {
      "id": 14,
      "title": "Wuthering Heights"
    },
    {
      "id": 15,
      "title": "The Da Vinci Code"
    }
  ]
  

Step - 2: Now accessing and showing in a list from App.js file so first I have imported like below and showing in a list

import DATA from './items.json';

App.js

import React from 'react';
import DATA from './items.json';
import { SafeAreaView,StyleSheet, View, Text}  from 'react-native';

const App = () => {

  return (
    <SafeAreaView style={{flex:1}}>
    <View style={{ flex: 1, backgroundColor: 'white' }}>
        {DATA.map((item)=> 
        {return(
          <View style={{flex:1,borderBottomColor:'red',borderBottomWidth:2,marginHorizontal:12,justifyContent:'center'}} key={item.id}>
           <Text numberOfLines={1} style={{fontSize: 24, fontWeight: '400'}}>{item.title}</Text>
        </View>
        )})}
    </View>
    </SafeAreaView>
)
}

export default App;