Develop Reference

DetoxRuntimeError: Detox can't seem to connect to the test app(s)! - Android only

I use Detox automation tool for bare React Native project. Everything works perfectly on iOS, but when I run tests on Android I get following errors:
DetoxRuntimeError: Detox can't seem to connect to the test app(s)!
HINT: Have you forgotten to call 'device.launchApp()' in the beginning of your test?
Refer to our troubleshooting guide, for full details: https://wix.github.io/Detox/docs/troubleshooting/running-tests#tests-execution-hangs
and
DetoxRuntimeError: The pending request #9 ("invoke") has been rejected due to the following error: The app has unexpectedly disconnected from Detox server.
Some tests have green status. Tests are run in parallel on multiple emulators.
Below is my configuration for detox:
/detoxrc.json
{
"testRunner": "jest",
"runnerConfig": "e2e/config.js",
"skipLegacyWorkersInjection": true,
"apps": {
"ios": {
"type": "ios.app",
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ProjectName.app",
"build": "RN_SRC_EXT=e2e.js xcodebuild -workspace ios/ProjectName.xcworkspace -scheme ProjectName -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -UseModernBuildSystem=YES -destination 'platform=iOS Simulator,name=iPhone 11'"
},
"android": {
"type": "android.apk",
"binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
"testBinaryPath": "android/app/build/outputs/apk/androidTest/release/app-release-androidTest.apk",
"build": "cd android && RN_SRC_EXT=e2e.js ./gradlew clean assembleRelease assembleAndroidTest -DtestBuildType=release && cd .."
}
},
"devices": {
"simulator": {
"type": "ios.simulator",
"device": {
"type": "iPhone 11"
}
},
"emulator": {
"type": "android.emulator",
"device": {
"avdName": "Pixel_XL"
}
}
},
"configurations": {
"ios": {
"device": "simulator",
"app": "ios"
},
"android": {
"device": "emulator",
"app": "android"
}
}
}
/e2e/config.js
module.exports = {
preset: 'react-native',
setupFilesAfterEnv: ["./init.js"],
setupFiles: [
"<rootDir>/../node_modules/react-native/jest/setup.js",
],
testPathIgnorePatterns: ["/node_modules/"],
testMatch: [
"<rootDir>/*.e2e.js"
],
transformIgnorePatterns: [
'node_modules/(?!(jest-)?#react-native|react-native|#react-native-community|#react-navigation)'
],
};
/e2e/init.js - File which is run after environment setup
import detox from 'detox';
import packageFile from '../package.json';
const detoxConfig = packageFile.detox;
jest.setTimeout(120000);
beforeAll(async () => {
await detox.init(detoxConfig, { launchApp: false });
await device.launchApp();
});
afterAll(async () => {
await detox.cleanup();
});
beforeEach(async () => {
await device.reloadReactNative();
});
and test files looks like similar to this one:
describe('some-screen-description', () => {
beforeEach(async () => {
await logInPage.tapLogInButton();
});
it('description', async () => {
await nextScreen.performAction();
});
});
/package.json
"detox": {
"test-runner": "jest",
"runner-config": "e2e/config.js"
}
I use following version of detox: "detox": "^19.6.9".
I use Macbook Pro with M1 processor. Any hints recommended.
Can anyone confirm that it can be problem with installing both APK and test APK ? I don't know how check that both are installed.

in your init.js inside your beforeAll hook, what's the first line doing? Did you try removing that line?
Regarding your apks being installed, if they weren't installed properly, you'd get a different error message(something like the apks couldn't be found, did you run detox build beofre it?). And also looking at your config file + detox build command I'm sure that the apks were built and they're in the right place. To double check you can go to your android's build output directory(see the paths mentioned in binaryPath and testBinaryPath inside your detox config)

Android white screen when running ionic capacitor run with SSL

I'm trying to run a simple test, trying to add ionic and capacitor to an already existing angular project. I have managed to make it work and run correctly but when I add the SSL command to the CLI so that the server runs with HTTPS the app no longer loads and everything I can just see is a blank screen. Moreover if I access the URL manually from the browser everything loads correctly. Could it be there's something wrongly configured in Android Studio or the ionic/capacitor files? I have tried different configurations and different emulated devices w/ different Android versions but there's no use, I haven't been able to make it work. I would certainly appreciate if someone could help me with this...
Running ionic capacitor run android --livereload --external
https://i.stack.imgur.com/ljfUT.png
https://i.stack.imgur.com/8LxNV.png
When I add the --ssl flag to the CLI ionic capacitor run android --livereload --external --ssl
https://i.stack.imgur.com/fS0jV.png
https://i.stack.imgur.com/D3sLL.png
https://i.stack.imgur.com/3v5Bx.png
Capacitor.config
import { CapacitorConfig } from '#capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'iotest',
webDir: './android/www',
bundledWebRuntime: false
};
export default config;
Angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"cli": {
"defaultCollection": "#ionic/angular-toolkit"
},
"schematics": {
"#ionic/angular-toolkit:component": {
"styleext": "scss"
},
"#ionic/angular-toolkit:page": {
"styleext": "scss"
}
},
"projects": {
"iotest": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "./android/www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*.svg",
"input": "./node_modules/ionicicons/dist/ionicicons/svg",
"output": "./svg"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "iotest:build:production"
},
"development": {
"browserTarget": "iotest:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "iotest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "iotest"
}
Ionic.config
{
"defaultProject": "iotest",
"projects": {
"iotest": {
"name": "iotest",
"integrations": {
"capacitor": {}
},
"type": "angular"
}
}
}
Angular
Angular CLI: 12.1.4
Node: 16.14.0 (Unsupported)
Package Manager: npm 8.3.1
OS: win32 x64
Angular: 12.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1201.4
#angular-devkit/build-angular 12.1.4
#angular-devkit/core 12.1.4
#angular-devkit/schematics 12.1.4
#angular/cli 12.1.4
#schematics/angular 12.1.4
rxjs 6.6.7
typescript 4.3.5
Warning: The current version of Node (16.14.0) is not supported by Angular.
NPM
Version 8.3.1
My goal is to make it run with SSL since in a future I will need to apply this to an app that needs to be run with HTTPS

From capacitor.config.ts make change like this:
{
...
server: {
url: 'https://your-local-ip:8100' // like: 192.168.1.66:8100
androidScheme: 'https',
clearText: true // just for test
}
...
}
then open two terminal and run
this command's:
ionic cap run android -l --external --ssl
from second terminal run:
ionic serve 0.0.0.0 --ssl
after all if you still see blank page, open a browser from mobile device and go to https://your-host-ip:8100, then make sure the url is trusted.

Dark Mode: useColorScheme() always returns light on Android

I am trying to get Dark Mode to work and it doesn't work on Android. It always returns "light". On iOS it works fine.
import React from 'react';
import { useColorScheme } from "react-native";
export default function App() {
const theme = useColorScheme();
alert("your color scheme is: " + theme); // always returns "light" on Android
return null;
}
I am using Expo SDK 42.
I put "userInterfaceStyle": "automatic" in my app.json but it doesn't make a difference.

I figured it out. It was not enough to just put "userInterfaceStyle": "automatic" in app.json root, I had to define it for iOS and Android individually too:
app.json:
{
"expo": {
"userInterfaceStyle": "automatic",
"ios": {
"userInterfaceStyle": "automatic"
},
"android": {
"userInterfaceStyle": "automatic"
}
}
}

worked for me
{
expo {
"userInterfaceStyle": "automatic",
"ios": {
"userInterfaceStyle": "automatic"
},
"android": {
"userInterfaceStyle": "automatic"
}
}
}

I had the same problem; the solution is to set these properties in the app.json file manually for both iOS and android.
{
"expo": {
"userInterfaceStyle": "automatic",
"ios": {
"userInterfaceStyle": "automatic"
},
"android": {
"userInterfaceStyle": "automatic"
}
}
}

How to use Watermarkjs library with ionic capacitor?

Problem
Hi, I recently migrated an ionic cordova project to ionic capacitor following this guide.
I got everything working except for the Watermarkjs library, which I use to watermark pictures taken with the camera of an Android device.
The library used to work fine before the migration, but now everytime I use the functions defined in that library I get this log in Logcat:
Capacitor: Handling local request: http://localhost/9j/4AAQSkZJRgABAQAAAQABAAD
It seems the function is not being called properly.
Code
async takePicture(fieldId){
const image = await Camera.getPhoto({
quality:20,
allowEditing:false,
resultType: CameraResultType.Base64,
source: CameraSource.Prompt
});
let finalImage = await this.addTextWatermark(image.base64String); //problem begins here
console.log("Image with watermark, " finalImage); // this is never printed out in logcat
}
// Function that adds a watermark
// reference: http://brianium.github.io/watermarkjs/text.html
addTextWatermark(base64String){
let result = await watermark([base64String])
.dataUrl(watermark.text.lowerLeft( 'Watermark text', '48px Josefin Slab', '#ffffff', 0.9) )
.then( image => {
return image;
}).catch(error => {
return "error";
})
return result;
}
What I've tried...
Adding watermarkjs script in angular.json scripts section and running npx cap copy, as suggested in this StackOverflow question
angular.json (excerpt)
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": [
"./node_modules/watermarkjs/dist/watermark.js" <----- Added script here
]
} ...
Using different input types for the watermark() function. (file, blob, etc.)
I think the problem is related to not importing the functions properly.
If the library is incompatible with ionic capacitor...
Does anyone know a workaround for this problem?

Cannot configure expo app properly `Failed to read config at: /app.config.js`

I am trying to develop an application and I am having trouble getting it to build once I added dotenv.
In my app.config.js I have
import "dotenv/config";
const API_URL = process.env["API_URL"] || "";
const API_VERSION = process.env["API_VERSION"] || "";
const MIRAGE_ENABLED = process.env["MIRAGE_ENABLED"] === "true" ? true : false;
const NODE_ENV = process.env["NODE_ENV"];
export default {
name: "My Application",
version: "0.0.0",
extra: {
API_URL,
API_VERSION,
MIRAGE_ENABLED,
NODE_ENV,
},
};
in my app.json I have:
{
"expo": {
"name": "my-application",
"slug": "my-application",
"owner": "my-expo",
"privacy": "unlisted",
"version": "0.0.0",
"orientation": "landscape",
"icon": "./assets/images/icon.png",
"sdkVersion": "37.0.0",
"platforms": ["ios"],
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "io.company.my-application",
"buildNumber": "0.0.0"
}
}
}
After reading the documentation I am more confused than before. The output of expo build is:
Failed to read config at: .../app.config.js
ConfigError: Failed to read config at: .../app.config.js
at Object.getDynamicConfig (/Users/me/.npm-global/lib/node_modules/expo-cli/node_modules/#expo/config/src/getConfig.ts:37:9)
at getConfig (/Users/me/.npm-global/lib/node_modules/expo-cli/node_modules/#expo/config/src/Config.ts:121:62)
at validateAsync (/#expo/xdl#58.0.12/src/project/Doctor.ts:438:24)
at Object.validateWithoutNetworkAsync (/#expo/xdl#58.0.12/src/project/Doctor.ts:419:10)
at /Users/me/.npm-global/lib/node_modules/expo-cli/src/exp.ts:644:35
at Command.<anonymous> (/Users/me/.npm-global/lib/node_modules/expo-cli/src/exp.ts:331:7
which is no help at all. Searching for Failed to read config at: .../app.config.js yielded no results whatsoever.
What am I doing wrong? What is the best practice for configuration using expo in this manner? Any help would be greatly appreciated.

To begin with, you need to override the app.json with your envirionment variables in app.config.js. To override the js object you can use separator operator, and to give "extra" variables you can use extra key. Let me give an example:
import 'dotenv/config'
export default ({config}) => {
const appConfig = ({
...config,
version: process.env.VERSION,
//override anything you want
extra: {
API_URL: process.env.API_URL,
//...
}
});
return appConfig;
}
This will attach the process env variables to your manifest. If you have any read errors about app.config.js, it's possible that you didn't install the dotenv package. Let me know.

first, you'll need to install the module 'dotenv' using the command npm i dotenv
Then, in your app.config.js file, provide the configuration in the arguments to the exported function:
import 'dotenv/config'
export default ({config}) => {
const appConfig = ({
...config,
version: process.env.VERSION,
//override anything you want
extra: {
API_URL: process.env.API_URL,
//...
}
});
return appConfig;
};