Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 01 Sep, 2021
Geek Week

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 2: Now create a project by the following command.

    expo init 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 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :