Expo React Native App Not Loading the AppEntry.bundle - ios

I am working on a react-native app using expo. The app was working just fine. I could do npm start to run the metro builder and then run my app on simulator as well as iOS devices directly.
I did 2 things.
I upgraded the expo version to latest - 3.17.15
I rebooted my laptop.
After these 2 changes, I could still do npm start without any issues. But, when I tried to open/ run the app in iOS simulator it got stuck at the bundle loading. In fact it could not get the bundle file only.
I thought this was a network problem where the simulator/ device was not able to reach http://127.0.0.1:19000 However, when I visited the url in the browser that was working.
The bunlde url that I saw in the error:
Now, when I try to visit that bundle url through the simulator:
http://127.0.0.1/node_modules/expo/AppEntry.bundle
The browser never loads the thing and times out.
I have already tried:
Cleaning the cache - npm start --reset-cache
Deleting the .expo folders in ~/.expo as well as ~/project/.expo
Changing the mode from Lan -> Tunnel.
Upgrading the global expo-cli to latest version.
removing the node_modules directory in the project ~/project/node_modules
re installing the node_modules by doing - npm install.
IMPORTANT - After having this issue with my current app, I decided to spawn a new blank expo app and run the same. Same result. The bundle was not loaded. I also remember something like this happening to me in the past but don't remember how I fixed it.
My Network is a hotspot through my phone. The same network used to work until yesterday without any issues. So not sure if reboot has caused some setting to revert.
Any help troubleshooting this problem would be very helpful here.

Finally after spending 2 days and working on 2 different laptops I could get to the root of this problem.
Firstly, I thought this was an OS upgrade issue (I upgraded my OS to Mac OS Catalina). So, I cloned my repo on another laptop, a fresh one where these was no node expo or react native. I initialized a new expo typescript react native project. Tried to run it - Worked like a charm. Simulator was not installed but worked on my device without any issues. The metro bundle log was generated.
This was leading me even closer to my assumption. So I tried to revert all the changes I had in my repo and tried building the app with npm start which eventually runs expo start. Did not work.
Finally - I created a fresher user on my laptop. The upgraded one. Cloned the repo - and tried to build the project. This time! Again it failed, however there was one change - in the metro builder log I got a this error:
2020-04-06T21:29:57,075: [0x110e7fdc0] while computing sockname: failed to create /usr/local/var/run/watchman/shrikant-state: Permission denied
Watchman: watchman --no-pretty get-sockname returned with exit code=1, signal=null, stderr= 2020-04-06T21:29:57,075: [0x110e7fdc0] while computing sockname: failed to create /usr/local/var/run/watchman/shrikant-state: Permission denied
To solve that I just changed the permission to the watchman directory:
sudo chmod 042777 /usr/local/var/run/watchman/
The app was finally built and running successfully on both the simulator and the device!

If anyone else runs into something similar, I was stuck on this and it turned out expo didn't like me using a logical OR assignment ( ||= ) even though typescript and my linters were fine with it. I replaced my ||= with a ternary and worked fine.

Related

How to fix "This operation is not supported in the environment this application is running on. "location.protocol" ..." error running Xcode?

I am trying to run an Ionic Capacitor app with an iPhone simulator via Xcode.
It worked fine for the last couple of weeks. Also running the app with local host (ionic serve) still works fine.
However, since yesterday I am getting the following error when running it on the simulator or directly on an iPhone via Xcode:
[error] - ERROR {"code":"auth/operation-not-supported-in-this-environment","message":"This operation is not supported in the environment this application is running on. \"location.protocol\" must be http, https or chrome-extension and web storage must be enabled."}
For authentication I simply use Firebase Email and Password Auth. No Facebook or Google Auth.
I already tried to use other Firebase libraries as suggested in this post.
But that didn't help.
Anyone an idea how to fix that?
After all I found this solution which fixed the issue for now:
Downgrading #angular/fire from 6.0.3 to 6.0.2
npm install #angular/fire#6.0.2
Delete folder node_modules: rm -rf node_modules
npm i

Could not connect to development server - React Native

I am creating an app using react native. I tried to change a file path to an image within my code and when I ran my app on the iOS emulator the following message was displayed.
I have tried a number of different methods such as closing the terminal and running the app again.
I also tried running localhost:8081 in my browser and was given the following message
I have also tried deleting my node_modules folder and running yarn but this still hasn't fixed the problem.
Any ideas as to how I would fix this?
You can try to clean xcode, remove app in the simulator
cd ios
xcodebuild clean
run bundler
react-native start --reset-cache
Replace the actual IP Address with the "localhost" in the Url and that should fix the issue if the url is proper.
Fully delete the app on the iOS Simulator, then rebuild the app from xcode.

How to fix expo start throwing "Simulator is installed but is identified as 'com.apple.CoreSimulator.SimulatorTrampoline'; dont know what that is"

I am trying to set up a react-native development environment. I would like to set up an iOS emulator (preferably an iPhone 10) to run my app on. I am using a Macbook Pro 2016 running on MacOS 10.14.3. I have installed my react-native app through the command create-react-native-app (running version 2.0.2). I also have installed XCode running version 10.2(10E125). When I scan the QR code that Expo generates and run it on my iPad or my Android device it works just fine, but when I try to load the iOS emulator by pressing i after expo start it returns the error
Trying to open the project in iOS simulator...
Simulator is installed but is identified as 'com.apple.CoreSimulator.SimulatorTrampoline'; don't know what that is.
Simulator not installed. Please visit https://developer.apple.com/xcode/download/ to download Xcode and the iOS simulator. If you already have the latest version of Xcode installed, you may have to run the command `sudo xcode-select -s /Applications/Xcode.app`
I have already tried running the command sudo xcode-select -s /Applications/Xcode.app
I have also tried running the command xcode-select -r
I have also confirmed that in my XCode->Preferences->Locations Command Line Tools is selected as "Xcode 10.2(10E125)"
None of these have worked.
I am expecting that after pressing i after expo start an iOS emulator loads up. Thank you.
-----EDIT-------
After some more research, I found out that running open -a Simulator and then running expo start loads the app on an emulator and works for my purposes. But still if I just run expo start without running open -a Simulator it still gives the same error. I want to ask if this is the best I am going to get?
You might be running an outdated version of Expo. I had this problem when I was download someone's old repo using Expo 27 when Expo 36 came out. After updating to the latest version, it works.
To update packages in your project, npm-check-updates comes in handy.
npm i -g npm-check-updates # installs ncu globally
ncu -u # updates all dependency versions in your local package.json
npm install # updates the packages in node_modules to match
Note: This will update all your dependencies to the latest version. If you don't want to do this, you can find the latest version of expo and change the version in package.json manually.
I ran into the exact same problem all of a sudden. Clicking "Run on iOS Simulator" within the Expo Developer Browser worked 2 days ago but did not work today. Your clue of using open -a Simulator helped me though. I went into Xcode and clicked the Xcode menu > Open Developer Tool > Simulator. This started the Simulator and then I was able to click "Run on iOS Simulator" within the Expo Developer Browser and it worked as expected. If you haven't had the fortune of "Run on iOS Simulator" working, I'm guessing you could just start a simulator, download Expo from the App Store and just use it from there. None of this answers the question as to why the error happens but at least gives a few workarounds for anyone else that might need. All that matters is you get the app running on the Simulator in the end!

React Native app not running in XCode iOS simulator

I try to make my first steps using React Native. Development for Android (on Windows host) works. Now I wanted to test iOS, and tried to set up a development environment on a MacBook Pro.
Problem: React Native starts the iOS simulator, and then nothing happens any more. The simulator runs OK, but my React native app won't start.
What do I need to do to get my React Native installation going?
More Info:
I set up XCode and React Native according to the docs on the MacBook Pro running OSx 10.13.2 (High Sierra). XCode was installed and tested successfully, including the simulator.
When I installed Node.js I deliberately picked an older version (containing npm 4.2.0), since forums say that React Native does still have problems with npm 5. I also installed Homebrew and Watchman, like stated in the docs.
To initialize an empty project, I used
create-react-native-app HelloWorldProject
and a projet structure got created in my Documents folder.
If I finally fire up my "Hello World" test app using
cd HelloWorldProject
sudo react-native run-ios
the system responds:
Starting packager ...
Starting simulator ...
and then nothing happens. The simulator does indeed start (boot --> apple logo --> progress bar --> IOs start screen), but nothing happens afterwards.
Edit
I have given up on React Native for several reasons, I leave this question here for documentary purposes, but I cannot verify or accept any answer, I don't have a React Native development environment any more.
It's probably because you used sudo. /.expo/ is owned by root. Try to change the ownership with
sudo chown -R `whoami` ~/.expo
Refer https://github.com/react-community/create-react-native-app/issues/422
Even everything in your app seems fine, sometime you face the issue that the app is taking too much time to load either through terminal or Xcode. If there is no any other specific issue with your project, the following solution works most of the time:
Go to your app folder and then go to 'iOS' folder.
Delete 'Podfile.lock' and 'Pods' folder.
Execute the following command in Terminal from your 'ios' folder, that will bring back the 'Podfile.lock' and required Pods will be installed to 'Pods' folder:
pod install
Delete the 'build' folder in your 'iOS' folder.
Run the following command in terminal:
react-native run-ios
While the terminal is running, open '.xcworkspace' in your 'ios' folder in Xcode.
The above steps will make sure it will be build your react native project newly and will run on the simulator.
Thanks
Wasantha Wijayaratna

React Native App crashes on Launch Screen on device

I'm starting with React Native, everything works fine in the iOS simulator. I decide to try it on a device.
The app launches, I can play with it, I close/reopen it around 4 or 5 times, and then somewhat randomly the app crashes on Launch Screen (the one with "Powered By React Native"). It just shows the screen, and the app crashes to the iPhone home screen.
Any idea how I can further debug that?
Edit: I added Bugsnag in my AppDelegate.m, but bugsnag doesn't detect anything when the app crashes.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
[BugsnagReactNative start];
// Rest of code
}
I came across this issue today. Read a few SO posts and saw one guy mentioned if your app launches and hangs on the splash screen and then crashes with no error it probably has something to one of your npm dependencies.
After digging deeper i saw the react packager was throwing the error
This error is caused by a #providesModule declaration with the same name across two different files.
To fix
check / clean up dependencies(check for same name declerations)
rm -rf node_modules
rm -rf $TMPDIR/react-*
npm i
This can caused by many issues it seems. Recently this happened to me and I had to search a bit to find out the exact reason.
I'll save you guys the trouble by sharing few places I read
- https://github.com/facebook/react-native/issues/14500#issuecomment-348063910
- https://github.com/facebook/react-native/issues/17276#issuecomment-357538208
In my case it was a library issue which I have not linked properly.
-https://github.com/ivpusic/react-native-image-crop-picker/issues/204
So yeah! my point is, it's something we have done or not done. Bit more research would help!!!
I had a similar issue. My application crashed on emulator device every time I ran the application without throwing any error in the console.
Here are a bunch of solutions that might work:
Solution 1 Remove node_modules
rm -rf /node_modules
npm install
Solution 2 Remove /android/app/build directory (This one worked for me)
rm -rf /android/app/build
After this, uninstall the application from emulator device and then run your application again
I was also facing the same issue on real device and it was working fine on simulator. So, i have fixed my issue by given solution
Solution: i have uninstall the application from simulator and then installed it again. This time it showed me the actual error on simulator that i had made mistake.
I finally solve this error by running the app in release mode from xcode
goto Product->Scheme and then click edit Scheme
Select run from left side menu
change Debug to Release
untick Debug executable
now clean the project and run your app in release mode
Some time you have to delete pods and install again after doing above
look for your error in xcode console in my case VS code has imported a Library I just have to remove that import
I had this problem also, what triggered it for me though was updating react and react-native.
I did a build after updating and then I experienced the same issue. I downgraded back to the previous versions of react and react-native, but that didn't work for me.
I tried removing node modules, and reinstalling, that didn't help. Then I noticed that when I was building: react-native run-ios,
the files in ios/build were not updating
I rm -rf ios/build/ and then I react-native run-ios and the ios/build folder populated. My app ran fine after that.
For me lottie package was creating problem. After removing the package able to launch the package.
Make sure by checking the last package/packages installed
In my case it was the Firebase GoogleService-info.plist file which was missing that is supposed to be present in your project.xcodewrkspc when opened using XCode. Adding that resolved the issue.

Resources