I'm having a terrible time with my React Native environment. After doing a pull from the main branch at the little startup I've been working for, I cannot get npx react-native run-ios
to work. I've tried all the usual suspects like:
1. reinstall node modules from package.json
2. reinstall pod in /ios
3. reinstall cocoapods
4. made sure to clear all caches
5. tried different versions of Node
6. reinstalled Node, NVM, Xcode, Cocoapods from the React-Native docs
7. made sure I have a .env file
8. restarted my computer (you'd be surprised)
The errors I get are either:
Error: EISDIR: illegal operation on a directory, read
at Object.readSync (fs.js:498:3)
at tryReadSync (fs.js:332:20)
at Object.readFileSync (fs.js:369:19)
at UnableToResolveError.buildCodeFrameMessage (/Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:304:17)
at new UnableToResolveError (/Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:290:35)
at ModuleResolver.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:168:15)
at DependencyGraph.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:353:43)
at /Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:271:42
Or
Error: Unable to resolve module `./debugger-ui/debuggerWorker.aca173c4` from ``:
None of these files exist:
* debugger-ui/debuggerWorker.aca173c4(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx|.native.svg|.svg)
* debugger-ui/debuggerWorker.aca173c4/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx|.native.svg|.svg)
at ModuleResolver.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
at ResolutionRequest.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
at /Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:267:42
at /Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/Server.js:1096:37
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/Server.js:99:24)
at _next (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/Server.js:119:9)
at process._tickCallback (internal/process/next_tick.js:68:7)
Researching any of the errors of above have led me to the steps I took above but nothing seems to work.
I'm not using Expo for development. I'm using React-Native CLI.
Once you have your React Native project initialized, you can run npx react-native run-ios inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly.
With React Native, developers can write real, natively rendering mobile applications for iOS and Android. It helps build apps on two platforms at once, while maintaining the look, feel, and productivity of an app built on the specific iOS or Android platform.
First open Developer Tools in Simulator. Then press Command+D keyboard shortcut. It will open the developer tools. To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu.
Open your React Native app on your device. You'll see a red screen with an error. This is OK. The following steps will fix that. Open the in-app Developer menu. Go to Dev Settings → Debug server host & port for device. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
Run your app Type the following in your command prompt to install and launch your app on the device: $ npx react-native run-android Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project).
Hint: You can also use the React Native CLI to generate and run a Release build (e.g. npx react-native run-android --variant=release ). You can also iterate quickly on a device by connecting to the development server running on your development machine.
Open the command prompt and type ipconfig to find your machine's IP address ( more info ). Make sure your laptop and your phone are on the same Wi-Fi network. Open your React Native app on your device. You'll see a red screen with an error.
Update your node installation to latest LTS version (14.16.0 now), and it should fix this issue.
I recommend using nvm
to manage your node versions. This can also help you switch versions quickly if needed.
To install the latest LTS version using nvm
you can just run nvm install --lts
Ok. so i ran into this same problem.
Assert that you still have index.js in your root directory. I know it sounds silly, but someone here deleted the index.js and I did not notice and I got the exact same error. after re-creating the index.js. The error was gone.
BTW just in case this is my index.js
import whyDidYouRender from "@welldone-software/why-did-you-render";
import { registerRootComponent } from "expo";
import "react-native-gesture-handler";
import React from "react";
import { enableScreens } from "react-native-screens";
import { App } from "./src/App";
import { setup } from "./src/config";
if (process.env.NODE_ENV === "development") {
whyDidYouRender(React, {
trackAllPureComponents: false,
});
}
enableScreens();
setup();
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With