React Native : "typeerror: cannot read property 'documentdir' of null, js engine: hermes"

After installing and linking the package, perform the following steps:

1. Remove all watches:

watchman watch-del-all

2. Clean npm cache forcefully:

npm cache clean --force

3. Remove the /ios/build directory (if you are building for iOS):

rm -rf /ios/build

4. Remove the /android/build directory (if you are building for Android):

rm -rf /android/build

5. Run the application on iOS:

react-native run-ios

6. Or run the application on Android:

react-native run-android

I have used the rn-fetch-blob plugin:

        
            const { dirs } = RNFetchBlob.fs
            const dirToSave = Platform.OS == 'ios' ? dirs.DocumentDir : dirs.DownloadDir
        
    

Solution for "TypeError: Cannot read property 'documentDir' of null" Error

The error message "TypeError: Cannot read property 'documentDir' of null" typically occurs in JavaScript code when attempting to access a property (in this case, 'documentDir') of a variable that is null. This error indicates that the variable being accessed is null, hence it does not have the expected property.

Possible Causes:

• Attempting to access a property of a variable before it has been initialized or assigned a value.
• Incorrect usage of APIs or libraries that expect certain variables or objects to be non-null.
• Bugs or unexpected behavior in the JavaScript code.

Solution:

1. Check Variable Initialization: Review the JavaScript code where the error occurs and ensure that the variable being accessed (in this case, 'documentDir') is properly initialized before accessing its properties.
2. Debugging: Use debugging techniques such as console logging or breakpoints to identify the point in the code where the variable becomes null. Trace back the code execution to understand why the variable is null at that point.
3. Handle Null Values: Implement null-checking mechanisms to handle cases where variables may be null. Use conditional statements (such as if statements) to ensure that properties are only accessed if the variable is non-null.
4. Review API Documentation: If the error occurs while using an API or library, refer to its documentation to understand the expected behavior and usage. Ensure that you are following the correct usage patterns and handling null values as required.
5. Test Edge Cases: Test the JavaScript code with different inputs and scenarios to identify any edge cases where variables may become null unexpectedly. This can help uncover potential issues that may not be apparent during normal execution.
6. Consider JS Engine Compatibility: If you're encountering this error specifically with the Hermes JavaScript engine, consider testing your code with alternative engines like V8 to see if the issue persists. It's possible that the error is specific to the behavior of the Hermes engine.

After identifying and addressing the root cause of the error, re-run your JavaScript code to ensure that the "TypeError: Cannot read property 'documentDir' of null" error no longer occurs.

Error: Cannot read property 'DocumentDir' of undefined

Solution:

1. Ensure that you have properly configured and initialized Firebase in your React Native project.
2. Make sure you have installed and linked react-native-fetch-blob correctly.
3. Check if you're importing and using the necessary modules from react-native-fetch-blob.
4. Verify that you have the necessary permissions for file access on your device.
5. Ensure that you're using the correct syntax and methods when accessing file paths or directories.
6. Check the documentation of react-native-fetch-blob and Firebase for any updates or changes in usage.
7. Inspect your code for any typos or errors in variable names or method calls.
8. Try restarting your development server and rebuilding your project to see if the error persists.

Example:

    
import RNFetchBlob from 'react-native-fetch-blob';
import firebase from 'firebase';

// Initialize Firebase
const firebaseConfig = {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    databaseURL: "your-database-url",
    projectId: "your-project-id",
    storageBucket: "your-storage-bucket",
    messagingSenderId: "your-messaging-sender-id",
    appId: "your-app-id",
    measurementId: "your-measurement-id"
};

firebase.initializeApp(firebaseConfig);

// Example usage of react-native-fetch-blob with Firebase storage
const downloadFile = async () => {
    const storageRef = firebase.storage().ref('path/to/file');
    const url = await storageRef.getDownloadURL();

    RNFetchBlob.config({
        fileCache: true,
    })
    .fetch('GET', url)
    .then((res) => {
        console.log('The file saved to ', res.path());
    })
    .catch((error) => {
        console.error('Error downloading file: ', error);
    });
};

// Call the downloadFile function to download a file from Firebase storage
downloadFile();
    
    

In my case, I forgot to terminate the Metro bundler of project one before building project two. This caused the Metro bundler to accept the configurations of project one. So, I terminated the Metro bundler of project one and then built project two. As a result, project two started its own Metro bundler, and everything worked perfectly.