DEV Community: Davyd NRB

🚨 99% of React Native Apps Make This Localization (i18n) Mistake — Is Yours One of Them?

Davyd NRB — Fri, 01 Aug 2025 09:02:27 +0000

One of the most common (and costly) mistakes in multilingual React Native apps is bundling all localization files directly into the JavaScript bundle.

If your app supports several languages (for example: English, Spanish, French, etc.) and you’re still bundling them into JS, you’re doing it the wrong way.

But don’t worry — 99% of us have done this.

🪤 The Problem

Here’s what happens when all locale files are bundled in JS:

🚀 Increased app size
🐢 Slower app startup
🧠 Higher memory usage (even for unused languages)

This might be fine in development, but it's a performance killer in production.

✅ The Right Way (Android)

Let’s fix it using two native Android features:

Per-app language preferences
Alternative resources based on device locale

Step 1: Move Locale Files to Native Resources

Instead of bundling JSON locale files in JS, place them in Android's raw resource folders:

android/
└── app/
    └── src/
        └── main/
            └── res/
                ├── raw/           # default (e.g. English)
                │   └── localizable.json
                ├── raw-es/       # Spanish
                │   └── localizable.json
                ├── raw-fr/       # French
                │   └── localizable.json
                ├── raw-it/       # Italian
                │   └── localizable.json
                ├── raw-pt-rBR/   # Portuguese (Brazil)
                │   └── localizable.json

Now, Android will include only the necessary languages based on the user's device settings.

Step 2: Enable Per-App Language Preferences

Let Android handle locale selection automatically.

2.1 Create `locales_config.xml`

<?xml version="1.0" encoding="utf-8"?>
<locale-config xmlns:android="http://schemas.android.com/apk/res/android">
    <locale android:name="en"/>
    <locale android:name="es"/>
    <locale android:name="fr"/>
    <locale android:name="it"/>
    <locale android:name="pt-br"/>
</locale-config>

Save this file to:
android/app/src/main/res/xml/locales_config.xml

2.2 Register in `AndroidManifest.xml`

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
+  android:localeConfig="@xml/locales_config"

2.3 Configure `resConfigs` in `build.gradle`

In android/app/build.gradle, declare the supported locales:

android {
    defaultConfig {
        ...
        resConfigs "en", "es", "fr", "it", "pt-rBR"
    }
}

🌍 Bonus: Read Locales from Native Side

Now that your locales live natively, it’s time to read them.

In production, use the native resource. In development, load the file directly for faster iteration:

import { Fbtee } from 'react-native-fbtee';

function getLocale() {
  if (__DEV__) {
    return require('../android/app/src/main/res/raw/localizable.json');
  }

  return JSON.parse(Fbtee.readLocalizationFile('localizable'));
}

📦 react-native-fbtee enables fast, synchronous file access from native resources.

🧩 Putting It All Together

Here's what happens in practice:

📲 User installs your app.
📥 Only the locale matching their device is downloaded.
🔁 If they change the app language (via system settings), Android dynamically downloads the new locale in the background.
📦 Your app reads the updated locale JSON — no JS bundle changes needed.

Often, this triggers a push notification like:

Once the download completes, translations are updated — you can read updated values.

📉 Verify It: Check Your App Size

Tools like Ruler by Spotify can show the difference in download size per locale. You’ll be shocked at how much space you save (👉 see a demo video from Michał Pierzchała)..

TL;DR

❌ Don’t do this...	✅ Do this instead
Bundle all locales in JS	Use native raw resources
Load all languages in memory	Let Android handle locale
Rebuild for every change	Load dynamically from native (dev. mode only)

Boost Your React Native App Start Time: Stop Shipping Lottie JSON Incorrectly

Davyd NRB — Sun, 27 Jul 2025 17:33:10 +0000

I've been analyzing many React Native JavaScript bundles (which you can find on Twitter: https://x.com/tell_me_mur) and have noticed a critical mistake that almost everyone is making. This error significantly impacts your application's App Start Time (AST) and memory usage.

The screenshot below illustrates how the JS bundle is overloaded with numerous i18n locales and Lottie animations (JSON files).

Do you need all locales and animations when the user launches the application? The answer is NO.

You'll only need JSON files at specific moments when using your application. Therefore, it's best to handle them as assets and load them on demand.

How to Load Lottie JSON as Assets On Demand

Move JSON files to the assets directory.

For Android, move all JSON animation files to:
android/app/src/main/assets/*.json

For iOS applications, you can reuse the same files from the Android directory for linking on iOS. To do this, run the following command:

npx react-native-asset --ios-assets android/app/src/main/assets

The files will be successfully added and ready for use. Remember to rebuild your application if you are in development mode.

Read the asset files.

Your project might already have a library for file operations, such as react-native-fs, react-native-blob-util, or react-native-file-access. If not, install one of your choice.

Below are code examples for each of these libraries:

`react-native-fs`

import { Platform } from 'react-native';
import { readFileRes, readFile, MainBundlePath } from 'react-native-fs';

export async function readAsset(name: string): Promise<string | null> {
  try {
    if (Platform.OS === 'android') {
      const content = await readFileRes(name, 'utf8');
      return content;
    }
    const path = `${MainBundlePath}/${name}`;
    const content = await readFile(path, 'utf8');
    return content;
  } catch (e) {
    console.error('Error reading asset:', e);
    return null;
  }
}

// Usage example
readAsset('animation.json')
  .then(jsonStr => JSON.parse(jsonStr))
  .then(data => {
    // your logic
  });

`react-native-blob-util`

import RNFetchBlob from 'react-native-blob-util';

export async function readAsset(name: string): Promise<string | null> {
  try {
    const path = RNFetchBlob.fs.asset(name);
    const content = await RNFetchBlob.fs.readFile(path, 'utf8');
    return content;
  } catch (e) {
    console.error('Error reading asset:', e);
    return null;
  }
}

// Usage example
readAsset('animation.json')
  .then(jsonStr => JSON.parse(jsonStr))
  .then(data => {
    // your logic
  });

`react-native-file-access`

import { Platform } from 'react-native';
import { Dirs, FileSystem } from 'react-native-file-access';

export async function readAsset(name: string): Promise<string | null> {
  try {
    if (Platform.OS === 'android') {
      const tmpPath = Dirs.CacheDir + `/${name}`;
      await FileSystem.cpAsset(`raw/${name}`, tmpPath, 'resource');
      const content = await FileSystem.readFile(tmpPath, 'utf8');
      return content;
    }
    const path = `${Dirs.MainBundleDir}/${name}`;
    const content = await FileSystem.readFile(path, 'utf8');
    return content;
  } catch (e) {
    console.error('Error reading asset:', e);
    return null;
  }
}

// Usage example
readAsset(
  Platform.select({
    ios: 'animation.json',
    android: 'animation', // skip extension for Android
  }),
)
  .then(jsonStr => JSON.parse(jsonStr))
  .then(data => {
    // your logic
  });

Now you understand how easy it is to read your asset files. From here, you can load these files at any time, which will significantly accelerate your app's start time and reduce memory consumption.

It's also worth mentioning that you can employ various approaches for how and when to load your assets. For instance, you might preload all necessary files at a specific initial stage. Additionally, caching the results can prevent the need to read and parse JSON multiple times.

Render lazy loaded assets

I can also share a React component example showcasing how to implement data loading using the use React hook and Suspense:

import { readAsset } from './my-fs.js';
import { MyLottie } from './my-lottie.js';
import { Suspense, use } from 'react'; // Assuming 'use' and 'Suspense' are imported.

const sourcePromise = readAsset('new-chat-anim.json').then(s => JSON.parse(s));

export default function App() {
  return (
    <Suspense fallback={/* ... */}>
      <MyLottie sourcePromise={sourcePromise} />
    </Suspense>
  );
}

// ./my-lottie.js
import LottieView from 'lottie-react-native';
// Assuming 'use' is imported from 'react' as well.

export function MyLottie({ sourcePromise }) {
  const source = use(sourcePromise);
  return <LottieView source={source} />;
}

As an alternative solution, you can also load data over the internet. For example, Re.Pack offers remote assets functionality.

Lastly, the example involving locales JSON files will be discussed in a dedicated article, as previously detailed in 🚨 99% of React Native Apps Make This Localization (i18n) Mistake — Is Yours One of Them?

How to fix "ADB server didn't ACK" error on MacOS Sequoia

Davyd NRB — Wed, 27 Nov 2024 14:44:58 +0000

If you see the next error in you stdout when you run adb commands, I have a simple solution for you: temporarily disable unused interfaces, such as awdl0 (used for AirDrop) or other virtual interfaces: sudo ifconfig awdl0 down

* daemon not running; starting now at tcp:localhost:5037
ADB server didn't ACK
Full server startup log: /var/folders/f5/3pmcz80n74n56ymms26g_4h00000gn/T//adb.501.log
Server had pid: 73568
--- adb starting (pid 73568) ---
11-27 15:26:43.561 73568 622665 I adb     : main.cpp:63 Android Debug Bridge version 1.0.41
11-27 15:26:43.561 73568 622665 I adb     : main.cpp:63 Version 35.0.2-12147458
11-27 15:26:43.561 73568 622665 I adb     : main.cpp:63 Installed as /Users/hi/Library/Android/sdk/platform-tools/adb
11-27 15:26:43.561 73568 622665 I adb     : main.cpp:63 Running on Darwin 24.1.0 (arm64)
11-27 15:26:43.561 73568 622665 I adb     : main.cpp:63 
11-27 15:26:43.564 73568 622665 I adb     : auth.cpp:416 adb_auth_init...
11-27 15:26:43.566 73568 622665 I adb     : auth.cpp:152 loaded new key from '/Users/hi/.android/adbkey' with fingerprint 0CBF619FA32DB4D1DE6D7228BFE4C2205D41C69DD69C2EB6F0EC7E9A1D43D678
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:170 AdbUdpSocket fd=9
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:170 AdbUdpSocket fd=10
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:274 SetMulticastOutboundInterface for index=14
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:533 bind endpoint=0.0.0.0:5353
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:274 SetMulticastOutboundInterface for index=14
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:558 bind endpoint=[0000:0000:0000:0000:0000:0000:0000:0000]:5353 scope_id=0
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:170 AdbUdpSocket fd=11
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:274 SetMulticastOutboundInterface for index=17
11-27 15:26:43.567 73568 622665 I adb     : udp_socket.cpp:558 bind endpoint=[0000:0000:0000:0000:0000:0000:0000:0000]:5353 scope_id=0
11-27 15:26:43.634 73568 622665 F adb     : udp_socket.cpp:447 Check failed: static_cast<size_t>(num_bytes_sent) == length (static_cast<size_t>(num_bytes_sent)=11, length=45)

Profitable and guaranteed winning method in the Gold Battle of Frostpunk: Beyond the Ice mobile game

Davyd NRB — Tue, 05 Mar 2024 21:50:36 +0000

Gold Battle in Frostpunk mobile game is a simple bar game with the next rules: Each person gets 100 chips and can distribute these chips into five groups. Compare each part and the one with more chips wins.

How can you distribute your chips to win more?

Win strategy the next:

1 group => 21 chips
2 group => 21 chips
3 group => 37 chips
4 group => 21 chips
5 group => 0 chips

So you will win 4/3 games as game opponent usually distribute chips like this:

20-20-20-20-20
0-0-33-33-34

Cheat-sheet of diseases based on people's symptoms from Frostpunk: Beyond the Ice game

Davyd NRB — Sat, 24 Feb 2024 15:37:50 +0000

Examples of sickness symptoms that you may encounter in the Frostpunk mobile game are provided below.

Fatigue

I haven't dug up my quota of Coal for the day, but I feel so exhausted... What's wrong with me?
My workload is really too heavy, I have to work intensely every day, I feel like my body is at its limit, I often have headaches and dizziness.
It's really hard for me now, but I still have to keep working, so I can only hope to finish my tasks quickly and get some rest!
I felt as if my body was filled with lead and each step required a lot of strength. My brain has also become so sluggish that I can barely think. I really wish I could have a good rest, but now I have to face this state of fatigue.
My Spots on the body. I've never had it before, it's like a cold but it's also different.
I felt like my body was as heavy as a mountain and I could barely move. My eyes also became very heavy.
Maybe it's because I've been doing so much Coal handling lately, I feel my muscles are aching all over and I can't remember things, and yesterday I even moved the Coal to the lumber store.
Now I really want to lie down and rest, but I haven't finished my work yet, I'm really tired!
I had to carry heavy loads again today and I feel physically exhausted, my arms and lower back are so sore!
Gosh, I feel like I've been hit by a train. My head is heavy, my eyes are ary and my body is weak. I don't really know what to do
I don't know if I've caught some illness, but I'm feeling tired all the time.
I have been working in the factory for a long time and I feel very tired and my arms and legs feel very heavy.
I have to carry heavy loads every day and I feel very tired and my arms and back feel very sore.
I work intensely in a factory and feel very weak and tired, with frequent headaches and dizziness.
I've been working like hell for the past few days and I feel like my body is already exhausted, my arms and feet are so sore and achy!
My workload is really too heavy, I have to work intensely every day, I feel like my body is at its limit, I often have headaches and dizziness.
Now I feel very tired and weak and cannot perform my daily tasks and need to rest and regain my strength.
Now I feel so weak and tired that I can’t concentrate on my tasks and need to rest for a while.
I’ve been feeling so tired recently, and when I sleep, I struggle to wake up. Is it because it’s so cold?
I hadn't slept properly for days and I felt like a walking corpse. Every part of my body is aching and my brain has become very sluggish. I wish someone could help me because I feel like I can't take care of myself anymore.

Influenza

I felt like a sick cat, hiding in a corner. My body is exhausted and I feel like I can't accomplish anything anymore. I find even the simplest things overwhelming.
Stuffy nose, didn't sleep well, just got up and feel tired to the max already.
I felt like my body was stripped of all energy, like a bag of air. My limbs were weak and my eyes were getting heavy. I wish I could have a good rest, but I don't know when I'll recover.
I don't know whether it's because it's so cold outside, but my body has been burning up recently.
I don't have any other problems, it's just Weakness throughout the body.
Yesterday, I ate snow with my food. I had to. I was starving.
I was coughing all last night and couldn't sleep at all and now I feel like my whole body is falling apart!
I woke up this morning feeling like my throat was blocked by something and now I'm really struggling!
My nose is stuffy and I feel dizzy. I don't know if I have some strange disease or not.
I felt like a pile of waste, only to be abandoned. I couldn't focus on anything and my head was nothing but chaos. I wish I could find a way to get rid of this feeling, but I don't know how to do it.

Typhus

I felt like my body was on fire, I was hot all over and had a red rash and felt like my whole body was on the verge of burning up.
I think I have a cold, headache and chills and a fever, and this rash is itchy.
I thought it was allergies or a skin condition at first, but then I noticed my body developed a high fever and persistent headaches, and I was so weak that I had no energy to get out of bed.
Yesterday before bed, I found a couple more sunburnt scars. It's easy to get sunburned in the snow, but the last couple of days, I've had a headache.
My Fever. I've never had it before, it's like a cold but it's also different.
I thought it was just a common cold at first, but then I noticed that I had red patches on my skin and my appetite had become very bad and my whole body was very weak.
Two days ago, I was bitten by a bug. How come there are bugs that can survive in this weather?
I felt like my body was being pressed by an invisible force and I had no strength to move at all. I also had a red rash and a persistent headache and felt very uncomfortable throughout.
I felt like my body was being attacked by a virus, there was pain everywhere and it was accompanied by high fever and nausea, it felt like my whole body was in agony, it was definitely not ordinary typhoid!
I felt like my body had been bitten by a thousand mosquitoes, there were painful and itchy spots everywhere, and with the high fever and headache, it felt like my whole body was going to collapse.

Septicemia

Pale skin, Low blood pressure, Skin spots. Your body temperature may suddenly drop.
Chills, Fever, Low blood pressure. Your body temperature may suddenly drop.
Rapid heartbeat, Fever, Chills. Your body temperature may suddenly drop.
Skin bruises, Low body temperature, Fever. Your body temperature may suddenly drop.
Fever, Skin bruises, LOW body temperature. Your body temperature may suddenly drop.
I feel that my heart is beating faster and I am vomiting and having diarrhoea in addition to the fever.
I feel like my body is starting to break down and different problems are happening in every part of my body. I feel very tired and weak and my skin has become very dry and fragile. I've also been running a fever but my body temperature is unstable. I really don't know if my body can take it anymore, but I'm still hoping to recover.
I felt my body deteriorating and I was shivering and sweating uncontrollably. I had redness and pain around my wounds, and bruises and rashes on other parts of my body. I had been running a high fever and had developed shortness of breath and a rapid heartbeat. I felt very sick and nauseous and could not eat or sleep properly.
I get chills at night and have a lot of bruises on my body... You think I'm a ghost?
One minute I'm hot, the next I'm cold. I'm so anxious, I can't help thinking that even we've survived, there isn't much hope...
Skin spots, Fever, Anxiety and restlessness. Your body temperature may suddenly drop.
I had redness and severe pain around my wounds and the infection had spread to other parts of my body with a rash and bruising. My body had been running a high fever and I had developed chills and headaches. I felt very weak and tired and was unable to perform my daily activities properly, which was very frustrating.
Maybe I drink less water, but I don't go to the bathroom often. (I noticed that the patient's face was pale)
Fever, Anxiety and restlessness, Reduced urine output. Your body temperature may suddenly drop.
I feel weak all over and find it difficult to even sit up. I was experiencing redness and pain around my wounds, and I had severe fever and even cold sweats. I was very frightened because the condition made me feel that I had no control over my body and that I was dependent on others for help.

Migraine

I felt a sharp pain penetrating my head that lasted for several hours. My head also felt very heavy and tired and I could not even think or concentrate properly. My vision also became blurred and the pain was often accompanied by ringing in my ears and nausea.
I would feel a dull pain on the side of my head, sometimes accompanied by ringing in my ears and blurred vision. The pain was so uncomfortable that I was unable to carry out even simple activities of daily life. I need to lie still and breathe deeply to get some relief.
I felt a constant throbbing and jerking in my head that felt very heavy and exhausting, and my vision became blurred and distorted.
My migraines make me feel very tired and unwell, even more so than a normal headache. I need a lot of sleep
Even the slightest movement of my head would make me feel even more uncomfortable. I needed to lie completely still in a darkened room to get a little relief from the symptoms. The pain made me feel very lonely and helpless.
I'm seeing stars... Maybe I've been working too hard in the Cookhouse.

Diphtheria

Low blood pressure, Swelling of the neck, Fever...
Low blood pressure, Fever, Fatigue...
I felt like I had a strong smell in my throat and I felt sick every time I breathed. I also felt very weak and tired. In the last few days, I have started to have high fevers and severe headaches which make me feel like I am going to collapse.
My throat had been feeling a bit uncomfortable lately, but I didn't pay much attention to it. It wasn't until one day that I suddenly noticed a white membrane in my throat, which made me very scared.
Swelling of the neck, Nausea, Mild sore throat...
Is the medicine not working? I think it’s gotten worse.
It felt like my throat was burning and I felt extreme pain every time I swallowed. Worst of all, I started to experience strange symptoms such as a white membrane in my throat and my tongue becoming swollen. This frightened me so much that I thought I might die.
They say my neck is thicker. Can you take a look, Captain? (You spot that the patient’s neck is swollen)

Frostbite

I noticed that my toes had become purple and they were very itchy, but scratching them made them feel worse. Sometimes it would also puff up and get stuck inside my shoes making it difficult to walk. If it is not cured, I am really afraid that my feet will become deformed and affect my normal life.
My fingers feel numb, like I've been bitten by tiny ants, but I can't feel anything. Sometimes it also hurts, like a prick of a needle. It was really painful to feel like this!
Look at my hands, they're all rotten and my hands are bleeding in my gloves.
My arms feel very cold, as if they were wrapped in a block of ice. There is regular numbness that makes me afraid to make a fist hard sometimes. The feeling was really unbearable and left me feeling like I had nowhere to go.
I repaired a building a few days ago. My muscles still ache. My skin has become very dry and the peeling has gotten worse. Sometimes red patches would appear and itched so much that I wanted to scratch them all off.

Leprosy

I have always felt that my body has become stranger and stranger lately. I have noticed that my skin has become less normal, with many red patches, and I often feel numbness and some loss of feeling in my hands and feet. Such symptoms make me feel very uncomfortable and I really wish I could find a solution to this problem.
I initially noticed that I had red patches on my body and that my skin had become very dry and hardened. These patches became larger and larger and gradually formed raised nodules. Now my face was also affected and my whole body looked horrible.
I have recently noticed that my arms and legs have started to become very stiff and my movements are becoming less flexible. Sometimes there is also muscle atrophy and joint pain. This has been very difficult for me as I used to be a very active person.

Gastroenteritis

I don't have any other problems, it's just Vomit.
I am dehydrated and have had diarrhoea for two days.
I don't have any other problems, it's just Diarrhoea.
My stomach hurts so much! I keep going to the bathroom.
I feel as if my body has been emptied, I have no energy and no appetite. Every time I ate I felt nauseous and the pain was like a kitten jumping around in my stomach.
Ugh, I'm such a wuss, I start to get nervous when I feel sick. It's like a bunch of little rats jumping around in my tummy now and it makes me feel very uncomfortable. And the constant farting, isn't that embarrassing?
My stomach feels like it has been cut by a knife and every time I walk I feel a dull unbearable pain. I have been drinking lots of herbs and taking lots of tablets but still no improvement. I feel like I have had the most painful few days of my life.
Gosh, I’ve felt like I’ve been walking through hell for the past few days. The inside of my stomach kept churning like an internal turmoil. I didn’t even dare to eat anything and only dared to drink some plain water. Every time I went to the toilet it was painful, it was so unbearable.
My stomach felt like a knife had been sliced through it and the pain was unbearable. My stomach was churning all the time, I was nauseous and had no appetite for anything I ate.
I felt like my stomach was on fire and the pain was unbearable. I would also feel nauseous when I ate and my diarrhoea was non-stop. Every time I went to the toilet, it was an ordeal and I wished I could get better soon.

Tuberculosis

My appetite has become very poor and I feel nauseous and vomit every time I eat. And I haven't had a bowel movement for days and my stomach always feels awful inside. I really hope this symptom will go away soon.
I’ve been coughing for a few days, and today I’m coughing up blood. 1-I’m not going to die, right?
My chest is always stuffy, as if there is a stone pressing down on It. Every time I breathe, I feel pain and discomfort. I haven’t slept properly for days because every time I lie down I cough incessantly.
I feel like my body has been completely taken over by this disease. Every day I have coughing, breathlessness and chest tightness, making it impossible for me to live a normal life. I know this disease is very serious.
I’ve been coughing for a few days, and today I’m coughing up blood. 1-I’m not going to die, right?

Maximize Speed: Enabling Apple M1 Arm64 Runner for Swift iOS Builds on GitHub Actions

Davyd NRB — Sun, 11 Feb 2024 14:54:21 +0000

Reputed as one of the top CI/CD service providers is Github Action. Recently, support for M1 Apple chips was added.

Switching to arm64 runner will speed up your iOS builds and cost the same amount of money $0.08/min, see: Github Actions pricing: https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions#per-minute-rates

One crucial step is to activate macos-14, in you your .github/workflows/<name>.yml

jobs:
  deploy-ios-to-test-flight:
-    runs-on: macos-12 # xcode 14
+    runs-on: macos-14 # M1 and Xcode 15.0.1

System info:

Also, here the list of all tools/software pre-installed by default: https://github.com/actions/runner-images/blob/main/images/macos/macos-14-Readme.md#xcode

Resolve memory leaks caused by Jest with Node.js 16.x and 18.x (JavaScript heap out of memory)

Davyd NRB — Mon, 08 Jan 2024 17:37:10 +0000

We saw memory leaks when running tests using a Jest framework after migrating to an up-to-date version of Node.js in our project. (jest issues#11956

v14.21.3 ✅ (no leaks)
v16.20.2 ⚠️ (leaks)
v18.19.0 ⚠️ (leaks)
v20.10.0 ✅ (no leaks)

Undoubtedly a Node.js problem, it was resolved in the release v20.10.0

Therefore, adding a --no-compilation-cache option will fix memory leaks if you plan to use versions 16 or 18.

see package.json example:

{
  "scripts": {
-    "test": "jest"
+    "test": "node --expose-gc --no-compilation-cache node_modules/.bin/jest"
  }
}

Use Genymotion SaaS to run Maestro E2E on CI

Davyd NRB — Thu, 10 Aug 2023 18:00:01 +0000

Genymotion service privide a huge amount of Android emulators that can be used to run Maestro E2E tests.

I'll try to provide you a short list of instructions in this article to help you create a workflow.

Let's first install gmsaas cli

pip3 install gmsaas
gmsaas config set android-sdk-path "$ANDROID_HOME"

After that, you need to sign in (Obviously, you must signup first)

export GMSAAS_EMAIL="[email protected]"
export GMSAAS_PASSWORD="you-password"

gmsaas auth login $GMSAAS_EMAIL $GMSAAS_PASSWORD

Let's begin by starting your first Android emulator now.

To start Android you need to know its recipes_id. You can make your own or use already created recipes:

gmsaas recipes list # print list available recipes
# ...
# 4c015ada-e64e-4f5d-a320-06cbf6e95648  Google Pixel 3a          10.0       1080 x 2220 dpi 420  genymotion
# 70eaaf75-bd9a-406d-9f01-682a5d400c6e  Samsung Galaxy S10       10.0       1440 x 3040 dpi 560  genymotion
# e104f058-b291-4764-8e0d-d9ff78a41192  Custom Phone             11.0       768 x 1280 dpi 320   genymotion
# c65db329-511a-4c2a-9761-c7259649e8c7  Custom Tablet            11.0       1536 x 2048 dpi 320  genymotion
# 95016679-8f8d-4890-b026-e4ad889aadf1  Google Pixel 3a          11.0       1080 x 2220 dpi 420  genymotion


INSTANCE_UUID=$(gmsaas instances start 95016679-8f8d-4890-b026-e4ad889aadf1 my_instance_name)

Now, on the Virtual Devices page, you should be able to see a launched instance:

INSTANCE_UUID on the screenshot above have to store UUID value of that instance, using this UUIS you can connect a running instance to ADB:

gmsaas instances adbconnect $INSTANCE_UUID

$ANDROID_HOME/platform-tools/adb devices # check if it works
# List of devices attached
# localhost:34953   device

when an instance will be connected you run Maestor e2e:

$ANDROID_HOME/platform-tools/adb install myApp.apk
# ^^^ install app
$HOME/.maestro/bin/maestro test .maestro/myTest.yaml
# ^^^ run tests

video demonstration:

Finnaly when test pass don't forget to stop instance at the end:

gmsaas instances stop --no-wait $INSTANCE_UUID

If you don't want to read the manual, just copy Maestro and Genymotion from my repository as working examples.

That also includes Github Actions configuration: android-genymotion-cloud.yaml

React Native force to bundle javascript in Debug build

Davyd NRB — Sun, 30 Jul 2023 21:30:35 +0000

You can use a special env. variable on iOS

FORCE_BUNDLING=1 yarn ios

Source: https://github.com/facebook/react-native/blob/667d85bddada31a51bcf6e05b3b042efb93ddb78/packages/react-native/scripts/react-native-xcode.sh#L39

For android edit your app's android/app/build.gradle file:

// React Native <= 0.70.x
project.ext.react = [
  // ...
  bundleInDebug: System.getenv("FORCE_BUNDLING") != null,
]

// React Native >= 0.71.x
react {
    debuggableVariants = System.getenv("FORCE_BUNDLING") ? [] : ["debug"]
}

then you can use:

FORCE_BUNDLING=1 yarn android

React Native fix android build error "[CXX1428] exception while building Json A problem occurred starting process"

Davyd NRB — Sun, 30 Jul 2023 17:49:55 +0000

I setup dev environment for my new m1 laptop and faced with weird error when tryied to build React Native 0.72.x New Architecture on Android:

[CXX1428] exception while building Json 
  A problem occurred starting process 
  'command /Users/my/Library/Android/sdk/cmake/3.22.1/bin/cmake'

I was managed to fix it removing all cache:

rm -rf android/app/build/ android/app/.cxx/
./android/gradlew clean -p android

and reinstalling some Android SDK components:

2.1 open Android Studio -> open Settings -> then Appearance & Behavior -> System Settings -> Android SDK ->choose SDK Tools -> enable Show Package Details

2.2 And then unmark all CMake, NDK, Command build tools versions:

2.3 then Apply

2.4 finally install again:

latest Command-line Tools
3.22.1 CMake
23.1.7779620 NDK

Best tips & tricks for E2E Maestro with React Native

Davyd NRB — Sun, 07 May 2023 20:21:36 +0000

A collection of practical tips and techniques that simplify your developer experience of Maestro E2E framework!

1. Installing Maestro

Let's add a new script to the package.json file:

{
  "scripts": {
    "install-maestro": "MAESTRO_VERSION=1.37.0 curl -Ls 'https://get.maestro.mobile.dev' | bash"
  }
}

I define the version we now support using the environment variable MAESTRO_VERSION. The use of the same version by our team and CI is guaranteed.

docs: https://maestro.mobile.dev/getting-started/installing-maestro

2. Identify the app as being run by Maestro.

When an app is run by e2e, we occasionally need to configure the behavior of the app:

Disable animation / pause video;
Stop sending analytics;
Turn off React Native LogBox LogBox.ignoreAllLogs().

For this case you need to add arguments to a launchApp command

- launchApp:
    appId: "com.example.app"
    arguments: 
       isE2E: "true"

And then on JS side using react-native-launch-arguments package you can access that arguments

import { LaunchArguments } from "react-native-launch-arguments";

LaunchArguments.value().isE2E // true

3. Dot env file support `.env`

You need to create .env file with next text:

-e UNIVERSAL_USERNAME=[email protected]
-e UNIVERSAL_PASSWORD=123qwe

After that you can use that file as argument for test or record commands:

{
  "scripts": {
    "record": "$HOME/.maestro/bin/maestro record @.env"    
    "test": "$HOME/.maestro/bin/maestro test @.env"
  }
}

Additionally, you can combine various env files (maestro test @.env @.env.prod), in which case all variables from the most recent file will replace, extend, or reset env variables from earlier files.

"test": "$HOME/.maestro/bin/maestro test @.env"
"test-prod": "yarn test @.env.prod"
"test-staging": "yarn test @.env.staging"

Example:

# .env file:
-e BACKEND=staging
-e USERNAME=test@test.com
-e PASSWORD=123qwe
#-----------------
# .env.prod
-e BACKEND=                 # unset variable
-e USERNAME=[email protected] # edit existing 
-e SKIP_UNBOARDING=true     # add a new variable

The following values will be available in the Maestro environment:

${BACKEND}         // null
${USERNAME}        // "[email protected]"
${PASSWORD}        // "123qwe"
${SKIP_UNBOARDING} // "true"

4. Different `appId` between platforms or environments

It's common practice to differentiate production apps from non-production (staging/beta) apps using a Bundle ID (for example: com.example.myapp & com.example.myapp.staging)

# .maestro/my-test.yaml
appId: ${APP_ID}
name: My test name
---
- launchApp # used an `appId` specified above

Then using -e MY_VAR=myVal you can pass APP_ID in each test:

{
  "scripts": {
    "test": "$HOME/.maestro/bin/maestro test"
    "test-android-staging": "yarn test -e APP_ID=com.example.myapp.staging"
    "test-android-prod": "yarn test -e APP_ID=com.example.myapp"
  }
}

and finally, an example of a terminal command:

yarn test-android-staging .maestro/my-test.yaml
# ^^^ Run test using staging app

yarn test-android-prod .maestro/my-test.yaml
# ^^^ Run test using prod app

5. Filtering tests to run using tags

You have the ability to run a particular set of tests using tags in Maestro.

Your nightly builds, for instance, frequently verify the following crucial features:

appId: com.example.myapp
name: Sign-in email+password
tags:
  - "on:pre_release"
  - "on:pull_request"
  - "on:nightly_build"
  - "feature:auth"
  - "backend:prod"
  - "backend:pre_prod"
  - "backend:staging"
---
- launchApp
# ...

You can use --include-tags="on:nightly_build" and path to your directory with yaml files to run all test that include an on:nightly_build tag:

{
  "scripts": {  
    "test": "$HOME/.maestro/bin/maestro test"
    "nightly-test": "yarn test --include-tags='on:nightly_build' ./path_to_flows"
    "pr-test": "yarn test --include-tags='on:pull_request' ./path_to_flows"
  }
}

6. Complicated `waitFor` logic

I had the issue that Maestro couldn't wait for the appearance of the "A" or "B" elements.

But using a repeat & runFlow we can simulate this logic:

- evalScript: ${output.myStatus = 'unknown'}
- evalScript: ${output.attemptsCount = 0}
# ^^^ specify initial parameters

- repeat:
    while:
      true: ${output.myStatus === 'unknown'} 
    # run until the status changes
    commands:
      - runFlow:
          when:
            visible: "Booking failed"
          commands:
            - evalScript: ${output.myStatus = 'error'}
      # ^^^ first `runFlow` wait for an error case
      - runFlow:
          when:
            true: ${output.myStatus === 'unknown'}
          commands:
            - runFlow:
                when:
                  visible: "Booking success"
                commands:
                  - evalScript: ${output.myStatus = 'success'}
      # ^^^ second nested `runFlow` will wait for a success case

      # The remaining logic deals with a timeout case
      - runFlow:
          when:
            true: ${output.attemptsCount > 10} # Check attempt limit 
          commands:
            - evalScript: ${output.myStatus = 'timeout'}
      - evalScript: ${output.attemptsCount = output.attemptsCount + 1} # Incerunmen an attempt counter


# ^^^ After that you can run any logic based on `output.myStatus`
# for example throw an error if status isn't `success`
- assertTrue: ${output.myStatus === 'success'}

7. Useful bash commands

Android Debug (required to run metro in background)

./android/gradlew assembleDebug -p ./android # build debug apk
find ./android -type f -name "*.apk"         # find apk file
yarn start                                   # run metro bundler
adb reverse tcp:8081 tcp:8081                # open port
adb install "<path_to_apk_file>"             # `path_to_apk_file` - result of `find` command above

Android Release (bundle JS with apk)

./android/gradlew assembleRelease -p ./android # build debug apk
find ./android -type f -name "*.apk"           # find apk file
adb install "<path_to_apk_file>"               # `path_to_apk_file` - result of `find` command above

8. Run on CI using GitHub Actions

⚠️ If you want to run Maestro test using GitHub Actions on Android you can't use default ubuntu runners as nested virtualization is disabled (that required by Android Emulator).

See run-on: * table:

Runners	Android	iOS	Price (min)	Spec
large ubuntu	✅	⛔	from $0.016 to $0.256	4-64CPU 15-256GB RAM
`ubuntu-*`	⛔	⛔	$0.008	2CPU 7GB RAM
`custom buildjet`	✅	⛔	from $0.004 to $0.048	2-34CPU 8-64GB RAM
`macos-*-xl`	✅	✅	0.32$	12CPU ??GB RAM
`macos-*`	✅	✅	0.08$	3CPU 14GB RAM

Simple Github Actions workflow .github/workflows/mobile-e2e.yml to run Android & iOS e2e test using Maestro:

no caching
no versionlock (xcode,java,nodejs,cocoapods)

name: Maestro E2E

on: [push]

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true # auto cancel prev. run

env:
  MAESTRO_VERSION: 1.37.0
  ANDROID_ARCH: x86_64

jobs:
  ios_e2e:
    name: iOS
    runs-on: macos-12 # or macos-12-xl
    steps:
      - uses: actions/checkout@v3

      - name: Installing Maestro
        run: curl -Ls "https://get.maestro.mobile.dev" | bash # will use `MAESTRO_VERSION` from env

      - name: Installing Maestro dependencies
        run: |
          brew tap facebook/fb
          brew install facebook/fb/idb-companion

      - name: Install node_modules
        run: yarn install --frozen-lockfile

      - name: Install Pods
        working-directory: ios
        run: pod install

      - name: Build app for simulator
        working-directory: ios
        env:
          DERIVED_DATA_PATH: my_build
        run: |
          xcrun xcodebuild \
            -scheme "Myapp" \
            -workspace "Myapp.xcworkspace" \
            -configuration "Release" \
            -sdk "iphonesimulator" \
            -destination "generic/platform=iOS Simulator" \
            -derivedDataPath "${{ env.DERIVED_DATA_PATH }}"

          echo "Print path to *.app file"
          find "${{ env.DERIVED_DATA_PATH }}" -type d -name "*.app"
      # ^^^ Path to *.app file (based on derivedDataPath + working-directory):
      # ./ios/my_build/Build/Products/Release-iphonesimulator/Myapp.app

      - name: Run e2e tests
        env:
          APP_PATH: "./ios/my_build/Build/Products/Release-iphonesimulator/Myapp.app"
                    # ^^^ change this path to your *.app file
        run: |
          echo "Launching iOS Simulator"
          xcrun simctl boot "iPhone 14 Pro"

          echo "Installing app on Simulator"
          xcrun simctl install booted "${{ env.APP_PATH }}"

          echo "Start video record"
          xcrun simctl io booted recordVideo video_record.mov & echo $! > video_record.pid

          echo "Running tests with Maestro"
          $HOME/.maestro/bin/maestro test .maestro/ --format junit

      - name: Stop video record
        if: always()
        run: kill -SIGINT $(cat video_record.pid)

      - name: Store video record
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: e2e_ios_report
          path: |
            video_record.mov
            report.xml

  android_e2e:
    name: Android
    runs-on: macos-12 # or buildjet-4vcpu-ubuntu-2204, ubuntu-22.04-4core, macos-12-xl
    steps:
      - uses: actions/checkout@v3

      - name: Installing Maestro
        run: curl -Ls "https://get.maestro.mobile.dev" | bash # will use `MAESTRO_VERSION` from env

      - name: Install node_modules
        run: yarn install --frozen-lockfile

      - name: Build apk for emulator
        working-directory: android
        run: |
          ./gradlew assembleRelease --no-daemon -PreactNativeArchitectures=${{ env.ANDROID_ARCH }}

          echo "Print path to *.apk file"
          find . -type f -name "*.apk"

      - name: Install Maestro and run e2e tests
        uses: reactivecircus/android-emulator-runner@v2
        env:
          APK_PATH: ./android/app/build/outputs/apk/release/app-release.apk
                    # ^^^ change this path to your *.apk file
        with:
          api-level: 33 # Android 13
          arch: ${{ env.ANDROID_ARCH }}
          script: |
            adb install "${{ env.APK_PATH }}"
            $HOME/.maestro/bin/maestro test .maestro/ --format junit

      - name: Store tests result
        uses: actions/upload-artifact@v3
        with:
          name: e2e_android_report
          path: |
            report.xml

Fix a pod install error "undefined method 'exist' for File:Class" React Native

Davyd NRB — Fri, 27 Jan 2023 11:30:43 +0000

It is advised to use Brew to install the arm version of cocoapods for Apple M1/M2 chips.

brew install cocoapods
pod install # fail: "undefined method 'exist' for File:Class"

In Ruby 3.2, "Fill.exists" was removed. brew will automatically install the most recent version of Ruby when you perform a brew install cocoapods, which is why you encounter this problem.

There are two fixes I found—the first is advised by the React Native team, and the second is really quick but ugly!

Make use of a Ruby version manager

1.1) In the root of your react native project, create a .ruby-version and Gemfile

.ruby-version:

2.7.8

Gemfile:

source 'https://rubygems.org'

# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby File.read(File.join(__dir__, '.ruby-version')).strip

gem 'cocoapods', '~> 1.13.0'

1.2) Install the Ruby version manager

brew install rbenv ruby-build # install ruby ver. manager
rbenv init                    # load rbenv in your shell
# ^^^follow instructions after re-run terminal!!! 
rbenv install 2.7.8           # install required Ruby version

1.3) Preinstalling ruby gems

cd your/rn_project/folder
rbenv local     # switch to 2.7.8 ruby version
bundler install # install gem deps

Finally, execute the following command to install pods when necessary

cd ios; bundler exec pod install
# or
bundler exec pod install --project-directory=ios

Hacky/Dirty way: Install cocoapods using an outdated version of Ruby:

# clean up
brew uninstall --ignore-dependencies ruby --force
brew uninstall cocoapods --force
sudo gem uninstall cocoapods

# install cocoapods 
brew install [email protected]
brew install cocoapods --ignore-dependencies
ln -s /opt/homebrew/opt/[email protected] /opt/homebrew/opt/ruby