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
