/
Environment set-up

Environment set-up

Mar 18, 2022

This section presents the environment set-up that is required for running the mobile project in your macOS local development environment. If you are using a different OS, please check out the official documentation for this set-up, on which this is based. That said, we do not intend to copy and paste from the official documentation, but just summarise what you will need to do. Please note although there are basic steps for Android and iOS, they still have different tool kits, therefore we will have them both as two different sections.

Node & Watchman

brew install node brew install watchman

React Native Command Line Interface

Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using npx, which ships with Node.js. With npx react-native <command>, the current stable version of the CLI will be downloaded and executed at the time the command is run.

For iOS

  • Install Xcode via App Store

  • Install Xcode Command Line Tools

    • Preferences → Locations → Command Line Tools

  • Install iOS Simulator

  • Install Cocoapods

For Android

  • Install Android Studio

    • During the wizard guide, make sure you select:

      • Android SDK

      • Android SDK Platform

      • Android Virtual Device

Configure the ANDROID_HOME environment variable

Add the following lines to your $HOME/.bash_profile:

export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

If you need more details, please check the official documentation.

Advanced setup (optional)

This section describes how to configure the different environments according to different app flavors such as dev, test, and prod which build different applications according to different environment configurations. This is optional and does not affect the build process.

Twelve-Factor setup  

Default environment setup  

Rename .env.sample  to .env  and set your environment variables. These variables will be looked up in compile time.

For Sentry setup (in case your project uses Sentry), please add the following Sentry configuration to the.env file.



.env
SENTRY_PROJECT_URL=<SENTRY_PROJECT_URL_GOES_HERE> SENTRY_AUTH_TOKEN=<AUTHENTICATION_TOKEN_GOES_HERE>

Test environment setup

Rename .env.sample  to .env.test  and set test environment variables of Sentry there, if you want to configure Sentry.

Then you need to setup Firebase keys to the project.

For Android, copy the example file of the Firebase key (app/google-services.example.json) in the  android/app/src/qa  folder and rename it to google-services.json and change the value of the package name in the key file to "com.totaramobileapp.qa" in order to run the app. If you need to enable the Firebase feature you can find guidance on the App customisation, extensions, and further development page. 

Run the following command to load the .env.test and it will run the to the build.

iOS
yarn local:ios-test
Android
yarn local:android-test

Troubleshooting

Below you can find some common troubleshooting guidance.

Cache data

In case you run into dependency issues, you can try running the following command to clear all the cache, modules & pods then reinstall:

Clear app all cache data
yarn clear:all #reset metro server using start command yarn start --reset-cache

From version 1.1.5, we are using React Native version 0.67. Therefore, you might face the following problems:

Problem

Solution

Problem

Solution

FBReactNativeSpec error

Upgrade the macOS version to macOS Monterey or a later version.

Node 17 currently breaks most webpack configurations

use export NODE_OPTIONS=--openssl-legacy-provider

Android has errors related to NDK

make sure you do not have set a specific ndk version in android/local.properties