run an EAS dev-client build on actual device for developing - react-native

I recently added an NPM package for camera which impacts the Native Modules, so it's not supported by Expo out of the box. Now I am sending a build to EAS and then running that IPA file on my Simulator locally. The issue is that the VideoCamera is not supported by the iOS simulator
I am creating a development build which is sent to EAS, as described in my eas.json:
"development": {
"extends": "staging",
"developmentClient": true,
"distribution": "internal", // tried with & without this line
"ios": {
"simulator": true
}
}
Then I run npx expo start --dev-client so that i can tap into the expo-dev-client can be hooked into my app. It runs fine on my simulator, but when needing to access the camera for video, we need to use a physical device due to limitation stated above.
How can I run the EAS image on my physical device? Or how can I run Expo locally, which can still manage the Native Modules impacted by the new NPM lib?

Related

Expo EAS build fails on Android: run gradlew

enter image description here
enter image description here//i.stack.imgur.com/KpJkv.png
It looks like Expo EAS build use Gradle version 7.3.3 and some modules require Gradle version 7.4 at minimum.
EAS Build doesn't provide a direct way to change the Gradle version but it provides presets for building infrastructure images.
In the eas.json file, try to use latest image, which contains latest versions of build tools.
{
"cli": {
"version": ">= 0.38.2"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
"ios": {
"simulator": true
}
},
"production": {
"android": {
"buildType": "app-bundle",
"image": "latest"
}
}
},
}
I found the error it was enough just to change gradle-7.3.3-all.zip by gradle-7.4-all.zip in yourappName\android\gradle\wrapper\gradle-wrapper.properties
ps : run npx expo prebuild --no-install --platform android before to have android folder
I had the same problem: an error in "Run gredlew" in Android build (no problem with iOS build) when I upgraded to Expo SDK 47.
The good thing was that I already had a successful build with Expo SDK 47, so I began to downgrade one by one the third-party packages I am using to the same versions of that successful build.
In the end, the culprit was #stripe/stripe-react-native. The build was successful again reverting back to version 0.13.1 from 0.19.0.
In your case, it might be any other third-party package, so I suggest going through the same process.
EDIT 26/01/2023: Instead of downgrading #stripe/stripe-react-native, I followed Kudo's advice here:
the #stripe/stripe-react-native#0.19.0 requires android compileSdkVersion 33. you could use expo-build-properties to change the compileSdkVersion to 33 in a managed project: https://docs.expo.dev/versions/latest/sdk/build-properties/#pluginconfigtypeandroid

Eas build brokes the app, when classic expo build works just fine

i have a problem with eas build (expo), My app size is about ~60mb (using expo build:android), and that build is working just fine, (I'am using physically phone).
I've build the same app, no changes, with eas build, there is a crash.
How i run eas build: eas build -p android --profile preview
How i run expo build: expo build:android -t apk
I want to point, I'am not getting any errors when Grandle is runned, and build is just fine
There is my eas.json
{
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
},
"cli": {
"version": ">= 0.48.2"
}
}
How can i check the log of crash?
Does someone had something similar?
Maybe diffrent solution to make app smaller?
In my case, if an environment variable was missing on first screen the app would crash.
The problem was that I had my variables in an .env file, which will work for the classic build but doesn't in eas build.
If that's your case, you'll need to declare your environment variables in your eas.json file, or create a secret for your app through expo's website for sensitive values.
You can read more about it here: https://docs.expo.dev/build-reference/variables/
Maybe any logs?
I've had 1 problem regarding Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8. **EXPO.dev** and I'm working with Firebase, then the problem was about .gitignore having google-service.json and .env, which as per this comment are not uploaded in the EAS Build.
I'm having the same problem and working through debugging.
Here's a good place to start -- if you're on mac, connect an android device and run:
adb logcat '*:S' ReactNative:V ReactNativeJS:V
This will help you log relevant errors and debug the issue. Simply running adb logcat logs an unmanageably large amount of data.
The issue and the answer are actually in this post, but I'll outline it here briefly.
I had the same issue with undefined .env variables. The issue is that the files in your .gitignore file aren't uploaded to eas machine that assembles your build. But you can create .easignore file that would be a copy of your .gitignore file excluding your .env file.

React Native: Build apk file using Expo CLI

I'm a new learner on this platform.
I code a simple react native app using expo. But I want to build a .apk file.
I tried this command:
expo build:android
Then I sign up an expo account. After completing the building process it shows the download button. Just like the following picture: But its not apk file. It is .aab file.
So, I want to build an actual apk file.
How can I do that?
By default Expo, CLI builds the app into a .aab file format. this format is better for Google Play Store as it will be optimized for every device CPU architecture which results in a smaller app size.
In case you want to test for your device or emulator, run:
expo build:android -t apk
Update for new users:
Run the following:
› npm install -g eas-cli
› eas build -p android https://docs.expo.dev/build/setup/
expo build:android will be discontinued on January 4, 2023
to build a apk out of the file first you need to do some changes to your eas.json file.
By default, EAS Build produces Android App Bundle, you can change it by:
setting buildType to apk
setting developmentClient to true
setting gradleCommand to :app:assembleRelease, :app:assembleDebug or any othergradle command that produces APK
after changing the config you can run eas build -p android --profile preview to build the application
you can read more about this in docs
https://docs.expo.dev/build-reference/apk/
and here's a sample config i used for a basic project to build ( also you can find on docs )
{
"cli": {
"version": ">= 0.52.0"
},
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
}
}
--
also alternatively another possible way would be to get the bundle ( .aab ) file and convert it to apk using a too like bundletool. and you can find the apk ( universal.apk ) inside app.apks
bundletool build-apks --bundle=bundle.aab --output=app.apks --mode=universal
https://github.com/google/bundletool
From expo documentation :
When building for android you can choose to build APK (expo build:android -t apk) or Android App Bundle (expo build:android -t app-bundle).

React native - missing srcipt: ios

How to run react native app in iOS Stimulator?
I'm using npm run ios but I'm getting this error missing srcipt: ios
How to solve this?
You can run your project with just simple
react-native run-ios
And if you want to run on any particular simulator device run this
react-native run-ios --simulator="iPhone 6s" // Check your available devices
Usually we have package.json with any command line scripts, for example:
"scripts": {
"test": "node ./node_modules/jest/bin/jest.js --watchAll",
"dev": "exp start --dev --lan",
"build-android": "exp build:android",
"build-ios": "exp build:ios"
},
In your case, I am not sure from which source you initialized or cloned your project. But you will need to add and you can add without any issue the missing scripts.
You can label them by anything, e.g. "test" can be named by "mytest".
The example I have given above, you can see command exp, this is a module that you will need to install globally in order to run this command.
using npm install -g exp command. Then you can run the custom added scripts.
Find anything confusing, ask again.
Did you try running react-native run-ios?
https://facebook.github.io/react-native/docs/running-on-simulator-ios.html
If that doesn't work, you can always open project-directory/app/ios/[your-project-name].xcodeproj in xcode, and run the simulator in xcode directly.

react-native: hot-loading on two devices simultaneously in development

I'm developing an app for both Android and iOS at the same time and I have my two phones in front of me. I have hot-loading enabled on both of them, but it seems only the last phone I touched will hot-load and the other one stays inactive until I shake it and choose "reload js" again.
Is this intended behaviour?
I ran into this issue too.
You can get around it by running the packager on two separate ports. In my package.json I have:
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start ",
"port-8082": "node node_modules/react-native/local-cli/cli.js start --port 8082",
},
And in my iOS startup code in AppDelegate I changed the port to 8082 e.g.
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8082/index.ios.bundle?platform=ios&dev=true"];
So then I run npm start in one terminal session (which starts on the default port 8081), and npm run port-8082 in another session. Then 8081 will serve the Android device and 8082 the iOS device, and you can use Hot Reloading on both devices simultaneously.
Edit: With the change of react-native file architecture, the AppDelegate code is now:
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8082/index.bundle?platform=ios&dev=true"];
I use this method to debug both Android and iOS platforms at the same time:
Add ["port-8082": "react-native start --port 8082"] in package.json under "scripts" section to launch another metro process to support Android platform. (You could input [npm run port-8082] to launch this metro process)
Using [adb -s <DeviceName> reverse tcp:8081 tcp:8082] to make Android device(port:8081) mapping to MacOS(port:8082).(You could use [adb devices] to find the <DeviceName> of Android Device)