XCode iOS iPhone Simulator Does Not Connect to app In VSCode and Tanks Internet on Same Computer - Mac Mini M1, - expo

Environment: Mac Mini M1, macOS Ventura 13.1, watchOS 9.1, Xcode 14.2 includes SDK iOS 16.2. Building first app in Expo ~47.0.6 using VSCode. Project compiles and works fine in actual iPhone connected to same network. However, when I attempt to use the Xcode Simulator from VS Code to by pressing "i" in the terminal window after running locally with "npx expo start" or globally with 'expo start' or even clearing expo cache with expo r -c, I am mostly unsuccessful and the problems start. Simulator is usually automatically opened from the invoking of "i" from the Expo terminal menu and Expo Go is launched on the simulator, but the app will simply sit there with the spinner and finally fail after several minutes. On top of this, the internet to the same computer my project and simulator are on is completely tanked (drops off to zero or close bandwidth) until the simulator is completely closed. Very rarely the project will open on the simulator but the internet tanking is still an issue. Additionally, the Simulator refuses to close completely via the standard means of right clicking on the simulator icon in the Mac Doc and choosing Quit. I can only Force Quit the Simulator to get it to close completely. I greatly appreciate any feedback!
package.json File - React Native Project
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/native": "^6.0.14",
"#react-navigation/native-stack": "^6.9.2",
"#reduxjs/toolkit": "^1.9.0",
"expo": "~47.0.6",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-dotenv": "^3.4.2",
"react-native-elements": "^3.4.2",
"react-native-google-places-autocomplete": "^2.5.1",
"react-native-maps": "^1.3.2",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.5",
"twrnc": "^3.4.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
Recently updated Xcode, macOS to no avail.
Running project locally with "npx expo start" or globally with 'expo start' or even clearing expo cache with expo r -c,
I have been tirelessly searching for a solution.

Related

Can we build APK file for android smart TV from expo React Native?

I am trying to build app for android Tv from expo but when I tried to open app and it gets crash after opening white screen.
I am confused either we can build app for smart TV from expo or not.
Found somewhere that we need to add
"android": {
"intentFilters": [
{
"action": "MAIN",
"category": [
"LEANBACK_LAUNCHER"
]
}
],
}
on App.json but when i try to add it on app.json {expo build:android} shows build fails! error.

Expo EAS: How to link eas update branch with build channel?

I have an expo (v 46.0.0) project with EAS with the following build config (eas.json).
{
"cli": {
"version": ">= 1.1.0"
},
"build": {
"production": {
"channel": "production",
"env": {
"APP_ENV": "production"
},
"credentialsSource": "local"
},
"preview": {
"channel": "staging",
"env": {
"APP_ENV": "staging"
},
"credentialsSource": "local"
},
"development": {
"distribution": "internal",
"developmentClient": true,
"ios": {
"simulator": true
}
}
},
"submit": {
"production": {}
}
}
A preview build shows up in Expo as follows:
Now I used EAS Update to push some changes to the existing build with the following command: eas update --branch staging.
The update shows up in expo and it is also possible to use the Preview QR Code with Expo Go. However the changes do not populate to the preview version submitted to App Store and Play Store.
Do i need to do some additional steps to link the created update with the existing staging build?
After reading the docs, I think you have to have to think differently about branch and channel.
Channels are specified at build time and exist inside a build's native code.
and
Branches are an ordered list of updates, similar to a Git branch, which is an ordered list of commits.
With EAS Update, we can link any channel to any branch, allowing us to make different updates available to different builds.
So first you have to "publish" the update group to a branch and then you gotta link the channel to point to that branch.
I imagine it could look like
eas update --branch staging-1.0.1
eas channel:edit staging --branch staging-1.0.1
Please correct me if I'm wrong about anything here.
https://github.com/expo/eas-cli#eas-channeledit-name
This was also hard to understand for me but now I got it. Unfortunately the docs are so far not really clear.
EAS builds retrieve updates from the channel specified in eas.json. So normally for production builds you would have a channel named "production".
If you now want to run an EAS Update to distribute changes to clients you won't publish directly to a channel but instead you go a detour using branches. Because branches are linked to channels you can work with different branches (e.g. for different versions) and then you only need to change the branch-channel link to publish an update.
To change the linking between a branch and a channel you run:
eas channel:edit
In an simplified setup (like mine) you would have a git branch called production and also a channel with the same name. To publish an update you then just run:
eas update --branch production
or
eas update --auto
In the latter case EAS then sets your current git branch as the branch name, so you could check out the production branch and then run this command to publish the update.
This is not possible if you are updating from the old release channel that used classic updates to the new eas update. I asked the question on the expo discord and got an answer from the staff.
This information can be found in the docs.

Splash screen on Expo Standalone App is not same with Expo Client App

Configuration
I have an issue about splash configuration on Android in app.json.
It's fine if I run it on the Expo Client App but it's not after I build it as the standalone app.
I've tried as what is written on the link.
Here is my configuration :
"expo": {
...
"splash": {
"backgroundColor": "#4286f4",
"image": "./assets/images/splash/splash_full.png",
"resizeMode": "contain",
"tabletImage": "./assets/images/splash_full.png",
"hideExponentText": true
},
...
"android": {
"splash": {
"backgroundColor": "#4286f4",
"ldpi": "./assets/images/splash/splash_full.png",
"mdpi": "./assets/images/splash/splash_full.png",
"hdpi": "./assets/images/splash/splash_full.png",
"xhdpi": "./assets/images/splash/splash_full.png",
"xxhdpi": "./assets/images/splash/splash_full.png",
"xxxhdpi": "./assets/images/splash/splash_full.png",
"resizeMode": "contain",
"hideExponentText": true
},
}
...
}
RESULT
run on Expo Client App :
run on Expo Standalone App :
EXPECTED
Expo Standalone App should be same with Expo Client App
How it's​ possible?
I had the same problem with splash resizeMode='cover' on Android.
Following the advice in https://github.com/expo/expo/issues/4494 I upgraded expo-cli and the problem is gone.
To summarize:
Before SDK 33, expo-cli 2.x: worked well
When upgraded to SDK 33, still using expo-cli 2.x, displayed a small splash surrounded by black background
Upgraded expo-cli to 3.0.2, using sdk-33, works well

How can I use a Command to activate livereload in reload

I'm trying to figure out what are the commands or ways to reload my browser platform on every change detected with ionic or cordova because for me this lineis not working:
ionic run browser --livereload
So I'm wondering if you know how to do that. I'm using cordova plugins by the way.
Kind regards!
You can start your app in your browser with
ionic serve
This will refresh the app after every save. There were some build changes after the ionic rc2 release, so be sure to update to the latest version. That way it will even show you a loading toast, as well as give you a nicely formatted js error whenever your app fails to launch.
To update your project to the latest build version, update your package.json
{
...
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
...
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
}
}
You can find an example of a full package.json here: https://github.com/driftyco/ionic2-app-base
ionic serve is working fine for me.
for browser, ionic serve detect every change in code and refresh the page.
You can find some commands here:
https://ionicframework.com/docs/cli/serve/
on Cli, you may try npm run dev too. --> Runs ionic serve ( development ). it's short, concise, gets the job done most times. give it a try

Running jest tests directly in Intellij Idea/WebStorm?

I'm using jest to write tests in my ReactJS application.
So far, to run my test suite, I need to type 'npm test'.
Here's the snippet from package.npm:
"scripts": {
"test": "./node_modules/.bin/jest",
(other stuff)
},
"jest": {
"unmockedModulePathPatterns": ["<rootDir>/node_modules/react"],
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"testFileExtensions": [
"es6",
"js"
],
"moduleFileExtensions": [
"js",
"json",
"es6"
]
},
Is it possible to run those tests within my IDE (IDEA/WebStorm) directly, preserving the configuration? I'm not a js guy, but for example WebStrom works perfectly fine with Karma. Shouldn't this be possible with jest-cli either?
To make Jest test results shown in a tree view (like karma, etc.), a special integration is needed. WebStorm doesn't yet support Jest. Please vote for WEB-14979 to be notified on any progress.
EDIT: as of March 2017 the first version of Jest integration at WebStorm has been released.
In WebStorm 9+ You can set this up as follows:
Install Jest CLI: npm install --save-dev jest-cli
Create node run configuration with javascript file set to node_modules/.bin/jest, and application parameter to --runInBand. runInBand tells jest to run in single process, otherwise there's a port conflict when running multiple node processes in debug mode
Create some tests and run configuration in Debug mode (Ctrl-D/CMD-D). If you set breakpoints in your test or app code they should hit
It would be great though if you could click on file:line numbers in the output to go directly to the code.
app_sciences's answer is awesome, but does not work for Windows.
For windows, you can use next configuration:
Provided configuration is taken from here
For IDEA I'm using https://confluence.jetbrains.com/display/IDEADEV/Run+Configurations for that purposes. For WebStorm it seems you can add your config by yourself https://www.jetbrains.com/webstorm/help/creating-and-editing-run-debug-configurations.html . The configuration you are talking about is on the software level. If you will configure to run it via your IDE it will definitely will run within the ENV variables and paths given, you just need to add the needed global paths and the commands to run.