How to fetch data from a local JSON file in React Native ? - GeeksforGeeks

01 Sep, 2021
Fetching JSON (JavaScript Object Notation) data in React Native from Local (E.g. IOS/Android storage) is different from fetching JSON data from a server (using Fetch or Axios). It requires Storage permission for APP and a Library to provide Native filesystem access.
Implementation: Now let’s start with the implementation:
Step 1: Open your terminal and install expo-cli by the following command.npm install -g expo-cli
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.expo init jsonDemo 
Step 2: Now create a project by the following command.
expo init jsonDemo
 
Step 3: Now go into your project folder i.e. jsonDemocd jsonDemo
Step 3: Now go into your project folder i.e. jsonDemo
cd jsonDemo
Project Structure: It will look like the following.
Directory Structure
Example: Fetching data from a local JSON file in React Native.
Step 1: Install react-native-fs using the following command:
npm install react-native-fs
Note: If you are getting errors like Attempt to get length of null array EUNSPECIFIED then in the android manifest file add the following code.
XML
<manifest ...>    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />    <application      android:requestLegacyExternalStorage="true"      ...>      ...    </application></manifest>
Step 2: Create a JSON file named data.json and place it in android’s “/storage/emulated/0/” directory which is default ExternalStorageDirectoryPath of android. You can also change the location of the JSON file but make sure to store its path which will be required when reading the file.
All possible Directories that can be accessed are mentioned in react-native-fs documentation.
{
   "type":"Fruits",
   "example":[
       {"name":"banana"},
       {"name":"apple"},
       {"name":"orange"},
       {"name":"mango"},
       {"name":"grape"}
   ]
}
Step 3: In the App.js file, we will import react-native-fs and call a function named readFile which accepts file path and encoding as parameters and returns the file content. Inside “/storage/emulated/0/” I have created a folder named DATA and inside is the JSON file.
Example:
App.js
import { mapValuesSeries } from 'async';import React, { Component } from 'react';import { Text, View, Button } from 'react-native';import * as RNFS from 'react-native-fs';  export class App extends Component {  constructor(props) {    super(props);    this.state = {      content: null,      fruitType: null,    };  }    readFile = () => {    RNFS.readFile('/storage/emulated/0/DATA/data.json', 'ascii')      .then((res) => {        console.log(res);        const d = JSON.parse(res);        this.setState({ content: res, fruitType: d.type });      })      .catch((err) => {        console.log(err.message, err.code);      });  };    render() {    return (      <View style={{ alignItems: 'center' }}>        <View style={{ marginVertical: '15%' }}>          <Button title="READ" onPress={() => this.readFile()} />        </View>        <Text> {this.state.content} </Text>        <Text          style={{            marginVertical: '5%',            fontSize: 20,            color: 'green',            fontWeight: 'bold',          }}>          TYPE ={' '}          {this.state.fruitType === null ?           'Press READ to get the type' : this.state.fruitType}        </Text>      </View>    );  }}  export default App;
Start the server by using the following command.
npx react-native run-android
Output:
To get the Directory (e.g. ExternalStorageDirectory) files paths we will use the function readDir which accepts directory (for all available directory types refer to the documentation of react-native-fs) type as a parameter and returns an array of objects containing file paths and information.
App.js
import { mapValuesSeries } from 'async';import React, { Component } from 'react';import { Text, View, Button } from 'react-native';import * as RNFS from 'react-native-fs';  export class App extends Component {  constructor(props) {    super(props);    this.state = {      content: null,      fruitType: null,    };  }    readFile = () => {      // On Android, use "RNFS.DocumentDirectoryPath"    // (MainBundlePath is not defined)    RNFS.readDir(RNFS.ExternalStorageDirectoryPath)      .then((result) => {        for (let i = 0; i < result.length; i++) {            // Print the result          console.log('GOT RESULT', result[i]);        }          // Stat the first file        return Promise.all([RNFS.stat(result[0].path), result[0].path]);      })      .then((statResult) => {        if (statResult[0].isFile()) {            // If we have a file, read it          return RNFS.readFile(statResult[1], 'utf8');        }        return 'no file';      })      .then((contents) => {          // Print the file contents        console.log(contents);      })      .catch((err) => {        console.log(err.message, err.code);      });  };    render() {    return (      <View style={{ alignItems: 'center' }}>        <Text>Text</Text>      </View>    );  }}  export default App;
Reference: https://github.com/itinance/react-native-fs 
JSON
Picked
React-Native
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Angular File Upload
How to get selected value in dropdown list using JavaScript ?
How to remove duplicate elements from JavaScript Array ?
Express.js express.Router() Function
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript