[DO NOT MERGE] feat: run node 16 on device

.cirrus.yml

@@ -15,9 +15,11 @@ task:
     NODEJS_MOBILE_BUILD_NATIVE_MODULES: "0"
     MAPBOX_DOWNLOAD_TOKEN: ENCRYPTED[6c72ef68629d29a9a0d9aa396d1f55badda203ce2d2ce0e21c6f79d6714dc2966db4326efb73d0f6e2082cdf27943d34]
   container:
-    image: digidem/docker-android:2
+    image: digidem/docker-android:3
     cpu: 8
     memory: 24G
+  # TODO: Ideally this step wouldn't be needed but npm v8 comes with node 16 by default and doesn't work for our project at the moment
+  update_global_npm_script: npm install --global [email protected]
   node_modules_cache:
     folder: node_modules
     reupload_on_changes: false # since there is a fingerprint script
@@ -61,7 +63,7 @@ android_test_task:
   only_if: $CIRRUS_BRANCH == $CIRRUS_DEFAULT_BRANCH || $CIRRUS_PR != ""
   depends_on: android_build
   container:
-    image: digidem/docker-android:2
+    image: digidem/docker-android:3
     kvm: true
     cpu: 8
     memory: 16G
@@ -75,6 +77,8 @@ android_test_task:
     echo "Hardware acceleration:"
     $ANDROID_HOME/emulator/emulator -accel-check
   start_emulator_background_script: $ANDROID_HOME/emulator/emulator -avd emu -no-window -gpu swiftshader_indirect -no-snapshot -noaudio -no-boot-anim -camera-back emulated
+  # TODO: Ideally this step wouldn't be needed but npm v8 comes with node 16 by default and doesn't work for our project at the moment
+  update_global_npm_script: npm install --global [email protected]
   node_modules_cache:
     folder: node_modules
     reupload_on_changes: false # since there is a fingerprint script

.github/workflows/android.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Node
         uses: actions/setup-node@v2
         with:
-          node-version: "12.16.3"
+          node-version: "16.17.1"
       - name: Npm Install
         run: |
           npm ci
@@ -40,7 +40,7 @@ jobs:
       - name: Node
         uses: actions/setup-node@v2
         with:
-          node-version: "12.16.3"
+          node-version: "16.17.1"
       - name: Npm Install
         run: |
           npm ci

.nvmrc

@@ -1 +1 @@
-12.16.3
+16.17.1

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-Thank you so much for taking the time to contribute to Mapeo development! Mapeo Mobile is a mobile app written in react-native that currently runs on Android. 
+Thank you so much for taking the time to contribute to Mapeo development! Mapeo Mobile is a mobile app written in react-native that currently runs on Android.
 
 After doing the [Initial Install](#initial-install), for most development you will need Android Studio and the Android SDK installed on your computer as outlined in the [Full App Development](#full-app-development) section.
 
@@ -9,9 +9,16 @@ storybook server. See the below [Storybook](#storybook) section for more informa
 
 ## Initial Install
 
-In order to start developing you will need git and node >=v10 installed on your
-computer (node v14 does not seem to be working at this time, you can use [nvm](https://github.com/nvm-sh/nvm) to rollback
-your node version).
+In order to start developing you will need git, node v16, and npm v6 installed on your computer. We recommend using a node version management tool like [nvm](https://github.com/nvm-sh/nvm) to install and manage different node versions. For many development tasks you will also need the Android SDK installed.
+
+Note that when installing node v16, it comes with npm v8 by default, which will not work for this project. You can update the global npm version by running the following:
+
+```sh
+npm --version # check which npm version is installed globally
+npm install --global npm@6 # install v6 globally if necessary
+```
+
+To get started with the project, run the following:
 
 ```sh
 git clone https://github.com/digidem/mapeo-mobile.git
@@ -23,10 +30,9 @@ npm install
 
 ### Pre-requisites
 
-In order to develop the full app you will need the Android Studio, Android SDK, React Native CLI, and other dependencies installed, as per [this guide](https://reactnative.dev/docs/0.66/environment-setup) following the instructions up to *Creating a new application*.
-
-Once you have done so and have Android Studio open, you may need to open your app's `/android` folder in Android Studio, so that it detects, downloads and configures requirements that might be missing, such as the NDK and CMake to build the native code part of the project. However, the version of NDK to use with Mapeo Mobile needs to be specifically [21.4.7075529](https://developer.android.com/ndk/guides/). You can download this version (as well as CMake if necessary) in Android Studio by navigating to Tools -> SDK Manager -> SDK Tools.
+In order to develop the full app you will need the Android Studio, Android SDK, React Native CLI, and other dependencies installed, as per [this guide](https://reactnative.dev/docs/0.66/environment-setup) following the instructions up to _Creating a new application_.
 
+Once you have done so and have Android Studio open, you may need to open your app's `/android` folder in Android Studio, so that it detects, downloads and configures requirements that might be missing, such as the NDK and CMake to build the native code part of the project. However, the version of NDK to use with Mapeo Mobile needs to be specifically [24.0.8215888](https://developer.android.com/ndk/guides/). You can download this version (as well as CMake if necessary) in Android Studio by navigating to Tools -> SDK Manager -> SDK Tools.
 
 Due to an [issue](https://github.com/rnmapbox/maps/issues/1572) with installing some Mapbox SDK Android deps, you will also have to complete additional steps before getting the app to build:
 
@@ -57,8 +63,7 @@ to check that you can see the phone. You may need to unlock the phone screen and
 say that you trust your computer in order for adb to connect.
 
 You can also test Mapeo Mobile in an emulator. [Set up a virtual device in
-Android Studio](https://developer.android.com/studio/run/managing-avds). Choose
-`x86` as the `ABI`, since this will be much faster.
+Android Studio](https://developer.android.com/studio/run/managing-avds).
 
 ### Starting the dev version of Mapeo Mobile
 
@@ -81,7 +86,8 @@ dev version of the app on your device:
 npm run android
 ```
 
-This process may take a while when you are first building the app. Additionally, to bypass unneeded latency when installing certain dependencies like TypeScript, you can add the following to your `.gitconfig`  file in your home directory (`~`):
+This process may take a while when you are first building the app. Additionally, to bypass unneeded latency when installing certain dependencies like TypeScript, you can add the following to your `.gitconfig` file in your home directory (`~`):
+
 ```sh
 [url "https://"]
         insteadOf = git://
@@ -172,6 +178,104 @@ npm run storybook-native
 
 You will probably need to reload the storybook mobile app for the web app to be
 able to control the mobile app.
+
+## Full App Development
+
+### Pre-requisites
+
+Follow the [official React Native instructions](https://reactnative.dev/docs/0.67/environment-setup) for setting up the majority of what's needed for your development environment (ignore the "Creating a new application" section and anything that comes after it).
+
+In order to develop the full app you will need the Android SDK installed and
+specifically [24.0.8215888 of the NDK](https://developer.android.com/ndk/guides/) in order to build
+nodejs-mobile for Android.
+
+You may need to open your app's `/android` folder in Android Studio, so that it detects, downloads and configures requirements that might be missing, like the NDK and CMake to build the native code part of the project.
+
+Due to an [issue](https://github.com/rnmapbox/maps/issues/1572) with installing some Mapbox SDK Android deps, you will also have to complete additional steps before getting the app to build:
+
+1. Refer to the [`Configure Credentials`](https://docs.mapbox.com/android/maps/guides/install/#configure-credentials) section and follow the instructions for creating a **secret access token**. This requires creating a [Mapbox](https://mapbox.com) account.
+
+2. With the secret token, you'll need to define the `MAPBOX_DOWNLOAD_TOKEN` environment variable. Although not ideal, there are a couple of options to choose from:
+
+- Specify the environment variable when running the `react-native run-android` command (or any command that runs it). For example:
+
+  ```sh
+  MAPBOX_DOWNLOAD_TOKEN=your_token_here npm run android
+  ```
+
+- Export the environment variable in your shell environment. Usually this will be in a file like `$HOME/.bashrc` (or `$HOME/.bash_profile`), `$HOME/.zshrc`, etc (depending on which shell you use). For example, add a line like this in the file and then restart your shell session:
+
+  ```sh
+  export MAPBOX_DOWNLOAD_TOKEN=your_token_here
+  ```
+
+We recognize that this extra configuration is not ideal and we intend for this to be temporary.
+
+### Testing Device
+
+To use a real device, you will need to [enable USB
+debugging](https://developer.android.com/studio/debug/dev-options) and connect
+the phone to your computer with a USB cable. Enter `adb devices` in the terminal
+to check that you can see the phone. You may need to unlock the phone screen and
+say that you trust your computer in order for adb to connect.
+
+You can also test Mapeo Mobile in an emulator. [Set up a virtual device in
+Android Studio](https://developer.android.com/studio/run/managing-avds).
+
+### Starting the dev version of Mapeo Mobile
+
+Build translations with:
+
+```sh
+npm run build:translations
+```
+
+Connect your phone with USB, or start up the emulator. Then start the Javascript bundler:
+
+```sh
+npm start
+```
+
+In another terminal window build and run the
+dev version of the app on your device:
+
+```sh
+npm run android
+```
+
+You can configure the app to reload whenever you make a change: shake the device
+to bring up the developer menu, and select "Enable Live Reload". Whenever you
+change the code the app should reload. Changes to any code in the `src/frontend`
+folder will appear immediately after a reload. If you change anything in
+`src/backend` you will need to re-run `npm run android` in order to see changes.
+If you are tired of shaking the phone you can enter `npm run dev-menu` from your
+computer.
+
+`npm run android` does two things: starts "Metro bundler" in one window, and
+then builds and installs the dev version of Mapeo on the connected device.
+That might not work on all machines, so in order to start the Metro bundler on
+its own (e.g. if you already have the app installed), use `npm start`.
+
+### Running end-to-end tests
+
+Mapeo uses [Detox](https://github.com/wix/Detox) to run end-to-end tests. If Metro bundler is already running (via `npm start` or `npm run android`), stop it first with `Ctrl-C`, then restart it:
+
+```sh
+RN_SRC_EXT=e2e npm start
+```
+
+Then, build a debug test version of the app:
+
+```sh
+RN_SRC_EXT=e2e detox build -c android.device.debug
+```
+
+Now, to run the tests on a device or a running emulator, replace `DEVICE_ID` in the line below with the output of `adb devices`:
+
+```sh
+RN_SRC_EXT=e2e detox test -c  android.device.debug -n DEVICE_ID -r
+```
+
 ## Release Variants
 
 We generate different variants of the app, each with a different Application ID,

android/app/build.gradle

@@ -233,7 +233,8 @@ android {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            // nodejs-mobile v16.17.X does not support x86: https://github.com/nodejs-mobile/nodejs-mobile/blob/main/doc_mobile/CHANGELOG.md#2023-01-26-version-16170
+            include "armeabi-v7a", "arm64-v8a", "x86_64" // "x86"
         }
     }
     signingConfigs {
@@ -286,7 +287,8 @@ android {
             // For depedencies, fallback to using this build type name
             matchingFallbacks = ['release']
             ndk {
-                abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+                // nodejs-mobile v16.17.X does not support x86: https://github.com/nodejs-mobile/nodejs-mobile/blob/main/doc_mobile/CHANGELOG.md#2023-01-26-version-16170
+                abiFilters "armeabi-v7a", "arm64-v8a", "x86_64" // "x86"
             }
         }
         // Build type for intel devices (chromebooks and rare phones)
@@ -296,15 +298,17 @@ android {
             signingConfig signingConfigs.release
             matchingFallbacks = ['release']
             ndk {
-                abiFilters "x86", "x86_64"
+                // nodejs-mobile v16.17.X does not support x86: https://github.com/nodejs-mobile/nodejs-mobile/blob/main/doc_mobile/CHANGELOG.md#2023-01-26-version-16170
+                abiFilters "x86_64" // "x86"
             }
         }
         debug {
             // We need to set this to null so that we can override it for variants
             signingConfig signingConfigs.debug
             applicationIdSuffix ".debug"
             ndk {
-                abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+                // nodejs-mobile v16.17.X does not support x86: https://github.com/nodejs-mobile/nodejs-mobile/blob/main/doc_mobile/CHANGELOG.md#2023-01-26-version-16170
+                abiFilters "armeabi-v7a", "arm64-v8a", "x86_64" // "x86"
             }
             manifestPlaceholders = [bugsnagReleaseStage: "development"]
         }
@@ -321,7 +325,7 @@ android {
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
-            // The special intel (x86) build type needs to have a different
+            // The special intel (e.g. x86, x86_64) build type needs to have a different
             // version code to the release build type if they are to be
             // published alongside each other on the Play Store
             if (variant.buildType.name == "intel") {

android/build.gradle

@@ -51,7 +51,7 @@ buildscript {
         supportLibVersion = "31.0.0"
         // Kotlin is needed by Detox testing framework and react-native-screens
         kotlinVersion = "1.6.10"
-        ndkVersion = "21.4.7075529"
+        ndkVersion = "24.0.8215888"
 
         // All of this (i.e. rnmbglMapboxLibs and rnmbglMapboxPlugins) is needed because of an 
         // issue with the telemetry module on Android 12 that the default android sdk depends on:

bitrise.yml

@@ -269,7 +269,7 @@ workflows:
       - [email protected]:
           title: Update npm
           inputs:
-            - command: install -g --force npm@^6.13
+            - command: install -g --force npm@^6.14.8
       - [email protected]:
           title: npm ci
           inputs:
@@ -291,7 +291,7 @@ workflows:
                 # debug log
                 set -x
 
-                ANDROID_NDK_VERSION='21.4.7075529'
+                ANDROID_NDK_VERSION='24.0.8215888'
 
                 echo '### User Sources for Android SDK Manager' > $HOME/.android/repositories.cfg
                 yes | sdkmanager --licenses