can read /storage but cannot read /storage/emulated in react-native-fs [Error: Attempt to get length of null array]

Question

I'm trying to write an app that needs to navigate through file system (directory based music player). For that I'm using react-native-fs. The problem is that I can read content of the /storage directory but when I'm trying to read any deeper like for example /storage/emulated or content of sd card the app shows me an error - [Error: Attempt to get length of null array].

When I'm checking for permission both build in function and app settings shows me that I have permission granted. The problem occurs both on android emulator and on real device.

Any ideas what am I doing wrong or how can I bypass this problem?

That's my android manifest:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.filesys">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

    <application ...

And that's my code:

import { View, Text, StyleSheet, PermissionsAndroid, Alert, Button } from 'react-native';
import * as RNFS from 'react-native-fs';


const requestPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      {
        'title': 'Read External Storage Permission',
        'message': 'The App needs access to your external storage '
      }
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      Alert.alert("Read external storage permission granted.");
    }
    else {
      Alert.alert("Read external storage permission not granded");
    }
  }
  catch (err) {
    console.log(err)
  }
}

const checkPermission = () => {
  PermissionsAndroid.check( PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)
  .then(result => console.log(result))
  .catch(err => console.log(err));
}

const showFiles = (path) => {
  RNFS.readDir(path)
  .then(files => {
    console.log('files:')
    files.forEach(file => console.log(file))
  })
  .catch(err => console.log(err));
}


export default class Main extends Component {

  async componentDidMount() {
    await requestPermission()
  }

  render() {
    return (
      <View style={styles.container} >
        <Text>show files app</Text>
        <Button title='check permission' onPress={checkPermission}/>
        <Button title='show storage files' onPress={() => showFiles('/storage')}/>
        <Button title='show storage/amulated files' onPress={() => showFiles('/storage/emulated')}/>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },
  });

When I press "show storage files" button the console logs me:

LOG files:

LOG {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2021-03-21T21:02:49.000Z, "name": "0123-4567", "path": "/storage/0123-4567", "size": 131072}

LOG {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2021-03-21T21:01:52.000Z, "name": "emulated", "path": "/storage/emulated", "size": 4096}
LOG {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2021-03-21T20:54:25.000Z, "name": "sdcard0", "path": "/storage/sdcard0", "size": 4096}

LOG {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2021-03-21T21:01:52.000Z, "name": "self", "path": "/storage/self", "size": 60}

But when I press "show storage/amulated files" I've got:

LOG [Error: Attempt to get length of null array]