File system access in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Reading a file content in React Native

What will be the output shown on the screen after running this React Native code snippet that reads a file content asynchronously?

React Native

import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import * as FileSystem from 'expo-file-system';

export default function App() {
  const [content, setContent] = useState('');

  useEffect(() => {
    async function readFile() {
      const fileUri = FileSystem.documentDirectory + 'test.txt';
      await FileSystem.writeAsStringAsync(fileUri, 'Hello React Native');
      const data = await FileSystem.readAsStringAsync(fileUri);
      setContent(data);
    }
    readFile();
  }, []);

  return (
    <View>
      <Text>{content}</Text>
    </View>
  );
}

A The screen is blank with no text

B The screen displays: [object Promise]

C The screen displays: Hello React Native

D The app crashes with a runtime error

💡 Hint

Remember that reading files asynchronously returns a Promise, so you must await it before setting state.

The code writes 'Hello React Native' to a file and then reads it asynchronously. The content is stored in state and displayed inside the Text component. Since the read is awaited, the content is correctly set and displayed.

📝 Syntax

intermediate

Correct syntax for writing a file in React Native

Which option shows the correct syntax to write the string 'Data saved' to a file named 'output.txt' using Expo FileSystem in React Native?

A await FileSystem.writeFileAsync('output.txt', 'Data saved');

B FileSystem.writeFile(FileSystem.documentDirectory + 'output.txt', 'Data saved');

C FileSystem.writeAsString(FileSystem.documentDirectory + 'output.txt', 'Data saved');

D await FileSystem.writeAsStringAsync(FileSystem.documentDirectory + 'output.txt', 'Data saved');

💡 Hint

Check the exact method name and parameters in Expo FileSystem documentation.

The correct method is writeAsStringAsync with the full file URI and string content. It returns a Promise, so await is needed. Other options use incorrect method names or missing await.

❓ lifecycle

advanced

File read timing in React Native component lifecycle

In which React Native lifecycle phase is it best to read a file asynchronously to ensure the UI updates with the file content after the component mounts?

A Inside useEffect with an empty dependency array []

B Inside useEffect with no dependency array

C Directly inside the component body before return

D Inside the constructor function

💡 Hint

Think about when side effects like file reading should happen in React functional components.

useEffect with [] runs once after the component mounts, perfect for async file reading and updating state. Reading directly in the body causes issues because async calls can't be awaited there. useEffect without [] runs every render causing infinite loops. Constructor is not used in functional components.

🔧 Debug

advanced

Debugging file read error in React Native

You run this code but get an error: "File does not exist" when reading a file. What is the most likely cause?

React Native

const fileUri = FileSystem.documentDirectory + 'notes.txt';
const content = await FileSystem.readAsStringAsync(fileUri);
console.log(content);

A The file 'notes.txt' was never created or written before reading

B You must import 'fs' module to read files in React Native

C readAsStringAsync requires a callback function as second argument

D The fileUri path is incorrect because documentDirectory is undefined

💡 Hint

Check if the file exists before reading it.

If the file was never created or written, reading it causes a 'File does not exist' error. documentDirectory is defined by Expo FileSystem. readAsStringAsync returns a Promise and does not take a callback. 'fs' is a Node.js module, not used in React Native.

🧠 Conceptual

expert

Understanding file system permissions on mobile devices

Which statement best describes file system access permissions in React Native apps on iOS and Android?

A Apps can freely read and write any file anywhere on the device without restrictions

B Apps have sandboxed storage areas and need explicit permissions to access external storage on Android

C iOS allows apps to write files anywhere on the device but Android restricts to app folders only

D React Native automatically grants all file system permissions without user consent

💡 Hint

Think about mobile OS security and app sandboxing.

Mobile OSes sandbox apps to their own storage areas. Android requires explicit permissions to access external storage outside app folders. iOS restricts apps to sandboxed directories only. React Native does not bypass OS permission models.