Feather – react-native-vector-icons – possible handled promise rejection (id:9) issue – React native

I have a react native application and in the application, I am trying to call Feather from react-native-vector-icons. When i make the call, I get the following error:

[Unhandled promise rejection: Error: Directory for 'file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%2540ohmarj%252Fryppe/ExponentAsset-a76d309774d33d9856f650bed4292a23.ttf' doesn't exist. Please make sure directory '/Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%40ohmarj%2Fryppe' exists before calling downloadAsync.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:50 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync
at node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync
at node_modules/expo-asset/build/PlatformUtils.js:52:25 in _downloadAsyncManagedEnv

I deleted the node_modules folder and reran npm install with the same issue.

I tried everything to fix the issue but I can not figure out this issue.

Here is where I call it:

import React from 'react'
import {View, Text} from 'react-native'

import Icon from 'react-native-vector-icons/Feather'

const HomeScreen = () => {
  return (
    <View><Text>Home Screen</Text><Icon name={"home"} color={'#454545'} size={28} /></View>
  )
}

export default HomeScreen

Here is my package.json

{
  "name": "ryppe",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.17.3",
    "@react-native-community/checkbox": "^0.5.12",
    "@react-native-community/slider": "4.2.1",
    "@react-native-picker/picker": "2.4.0",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.1",
    "axios": "^0.27.2",
    "dotenv": "^16.0.1",
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "expo-updates": "~0.13.4",
    "firebase": "^9.6.11",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-dropdown-picker": "^5.4.2",
    "react-native-email": "^2.1.0",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-maps": "0.30.2",
    "react-native-tag-select": "^2.0.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "0.17.7",
    "react-native-webview": "11.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

The package is not working but I have no idea why and it is causing issues with my react native application

——-UPDATE———–

command to build applcation:
npx create-expo-app ryppe

here is my package.json file:

{
  "name": "ryppe",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.17.3",
    "@react-native-community/checkbox": "^0.5.12",
    "@react-native-community/slider": "4.2.1",
    "@react-native-picker/picker": "2.4.0",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.1",
    "axios": "^0.27.2",
    "dotenv": "^16.0.1",
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "expo-updates": "~0.13.4",
    "firebase": "^9.6.11",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-dropdown-picker": "^5.4.2",
    "react-native-email": "^2.1.0",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-maps": "0.30.2",
    "react-native-tag-select": "^2.0.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "0.17.7",
    "react-native-webview": "11.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

when I run npm run ios I get this:

(base) omarjandali@omars-MacBook-Pro-M1-Max ryppe % npm run ios

> [email protected] ios
> expo start --ios

WARNING: expo-cli has not yet been tested against Node.js v18.10.0.
If you encounter any issues, please report them to https://github.com/expo/expo-cli/issues

expo-cli supports following Node.js versions:
* >=12.13.0 <15.0.0 (Maintenance LTS)
* >=16.0.0 <17.0.0 (Active LTS)

Starting project at /Users/omarjandali/dev/RyppeApp/MobileApp/ryppe
Starting Metro Bundler
› Opening exp://192.168.12.183:19000 on iPhone 14 Pro Max
Started Metro Bundler

› Metro waiting on exp://192.168.12.183:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundling complete 1523ms
iOS Bundling complete 30ms
iOS Running app on iPhone 14 Pro Max

could it be the “`expo-cli“ message

bottomTabnav:

<TabNav.Navigator initialRouteName='HomeScreen'>
      <TabNav.Screen 
        key='Home' 
        name="Home" 
        component={HomeStackNav} 
        options={{
          tabBarIcon: ({size, color}) => <Feather name={"home"} color={color} size={size} />
      }}/> 
      ...
    </TabNav.Navigator>