I've just started using Expo and React Native to create a project for a mobile app. I've been following this guide to develop the project, and I'm building locally rather than using EAS.

I can run npx expo start. When I do, the QR code is not parseable by my iOS device, but I'm able to visit the web app at http://localhost:8081.

However, when I try to run npx expo run:ios or run prebuild, I get the following error:

➜ npx expo run:ios
HTTP 403 Forbidden
✖ Failed to create the native directory
You may want to delete the ./ios and/or ./android directories before trying again.

I can't seem to get any additional logs out on where the permission error is coming from, and I haven't found anyone online with the same issue. I have installed Xcode and all the necessary expo packages, and I'm logged into expo locally. I've also tethered my iOS device to my Macbook and tried running with the --device tag, but I get the same error.

Any insight into what might be happening here? I've included my full app.json below (with the app name redacted), the rest of the project is the boilerplate created by expo.

{
  "expo": {
    "name": "<app_name>",
    "slug": "<app_name>",
    "version": "1.0.0",
    "platforms": ["ios", "android", "web"],
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.<app_name>"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

I've just started using Expo and React Native to create a project for a mobile app. I've been following this guide to develop the project, and I'm building locally rather than using EAS.

I can run npx expo start. When I do, the QR code is not parseable by my iOS device, but I'm able to visit the web app at http://localhost:8081.

However, when I try to run npx expo run:ios or run prebuild, I get the following error:

➜ npx expo run:ios
HTTP 403 Forbidden
✖ Failed to create the native directory
You may want to delete the ./ios and/or ./android directories before trying again.

I can't seem to get any additional logs out on where the permission error is coming from, and I haven't found anyone online with the same issue. I have installed Xcode and all the necessary expo packages, and I'm logged into expo locally. I've also tethered my iOS device to my Macbook and tried running with the --device tag, but I get the same error.

Any insight into what might be happening here? I've included my full app.json below (with the app name redacted), the rest of the project is the boilerplate created by expo.

{
  "expo": {
    "name": "<app_name>",
    "slug": "<app_name>",
    "version": "1.0.0",
    "platforms": ["ios", "android", "web"],
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.<app_name>"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

• ios
• react-native
• mobile
• expo

• Turns out this was due to a permission error against the artifact repository I use, I've resolved this! – Amir Idris Commented Mar 24 at 16:57

2 Answers 2

There are couple things you need to know to run your app successfully:

1. You can do a clean prebuild using:

   npx expo prebuild --clean
   

   Or you could also just delete the .ios/ and .android/ directories and then simply run npx expo prebuild

2. To run the app on your phone, it needs to be on the same network as your computer, in case you are using the Wi-Fi Hotspot on your phone to build the app, you can start a tunnel using:

   npx expo start --tunnel
   

   After scanning that QR code, your app should work well. It might prompt you to install ngrok globally/add it your your devDependencies under your package.json file.

Turns out this was a permissions issue against the artifact respository that I use. Temporarily resetting my npmrc and hitting the normal npm respository fixed this.