/MentorApp

Native App for Mentors

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

This is the moblie app for the Poverty Stoplight platform. It is a native, not a web, app which requires you to setup your machine for native development.

Table of Contents

Prerequisites

For OSX

  • Install xcode from the App Store
  • Install brew from here
  • Install node via Brew (this will also install npm which you need to install required packages for the app) - brew install node
  • Install react-native command line interface globally via npm - npm install -g react-native-cli
  • Get Watchman via Brew - brew install watchman
  • Install Android Studio (with default settings), which also needs Java SE Development Kit 8
    • Here is how to install Java with Brew (and manage multiple Java versions)

To install

  1. git clone git@github.com:penguin-digital/povertystoplightapp.git to clone the repo
  2. cd povertystoplightapp to go into repo folder
  3. npm i from repo folder to install all dependencies

To run

  • npm run start-ios for IOS dev mode
  • npm run start-android for Android dev mode

Running the simulation on OSX

iOS

Simulating an iPhone on OSX, if you have done the prerequisites above, is as easy as running npm run start-ios.

This will open the xcode simulator automatically. It takes some time, first time it runs. It will finish with opening the app itself in the simulator window. It will also open a browser debugger window, where you can use the console for errors and log outputs.

Some Installation Notes

XCode Issues

`xcrun: error: unable to find utility "instruments", not a developer tool or in PATH``xcrun: error: unable to find utility "instruments", not a developer tool or in PATH`

Then you need to set the Command Line Tools in your XCode Settings like here

Stackoverflow solution here

CFBundleIdentifier Does not exist ":CFBundleIdentifier", Does Not Exist #7308

Make sure port 8081 not in use (Metro Bundler is not Running) when compiling/bundling for the first time.

Stackoverflow solution here

Android

Simulating an Android, is more of a hustle than iOs. Make sure you have done the prerequisites above and have Android Studio and Watchman. Make sure everyrthing is up to date with:

brew update
  1. You need to set up environment variables in your ~/.bash_profile file. Open Android Studio, go to Configure > SDK Manager (Bottom Right). You should now see your Android SDK Location (top center, probably $HOME/Library/Android/sdk). Copy it and use it in your ~/.bash_profile file by adding the following lines:
export ANDROID_HOME=$HOME</path/to/sdk>
PATH=$PATH:$ANDROID_HOME/emulator
PATH=$PATH:$ANDROID_HOME/tools
PATH=$PATH:$ANDROID_HOME/platform-tools
PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH

Save the changes and run source ~/.bash_profile file or safer yet, restart all terminal instances, for them to take effect. See if you have the avdmanager command in bash.

We can also check if the sdkmanager is up to date

sdkmanager --update
  1. Now you need to an android virtual device for the emulator to run. First, you need to download the necessary system image with sdkmanager "name;of;image". The naming convention of the APIs is system-images;android-<API_VERSION>;google_apis;x86 for x86 emulators, which is what we need. Version number is different depending on which android version you need. So for example, if you want to test Marshmallow you run sdkmanager "system-images;android-23;google_apis;x86". If you need to test KitKat you run sdkmanager "system-images;android-19;google_apis;x86". After this run sdkmanager --licenses and accept all the licences with y.
sdkmanager "system-images;android-23;google_apis;x86" # for marshmallow
  1. When you have the image you create the device with avdmanager create avd -n <name> -k "<system-images;name>". So with the Marshmallow image installed above we can do avdmanager create avd -n test -k "system-images;android-23;google_apis;x86" and that will create a device named test running Android Marshmallow. You can use anything for the name.
avdmanager create avd -n test -k "system-images;android-23;google_apis;x86"
  1. Runing the react-native project for Android doesn't open the emulator automatically like for iOS. You need to run it with emulator -avd <device_name>, or with the above setup: emulator -avd test
emulator -avd test
  1. Finally, run npm run start-android. Again, wait for the emluator to open the app itself.
npm run start-android

Running the app on a real device

Android

  1. Enable Debugging over USB on your device in order to install your app during development. If you haven't done so for this particular device, you will first need to enable the "Developer options" menu by going to Settings → About phone and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable USB debugging.

  2. Plug in your device via USB to the dev machine. A popup ascing for permission should appear on the device. Accept it. Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running adb devices in the terminal. If the list is empty, check the cable. If the device display that it's unauthorized, unplug and plug again until you see the above mentioned popup and accept.

  3. Run npm run start-android. Since there is no emulator running, the command will try to run the app on the connected device. Like with emulator mode, wait a bit for the app to appear on the device screen.

Troubleshooting

In case you see a red screen with unable to load script from assets index.android.bundle, try the following:

  1. (in project directory) run mkdir android/app/src/main/assets
  2. run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
  3. Try starting the app again npm run android-start

Debugging

To see the console log you need to enable Remote Debugging. You can use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on Mac OS. That opens the dev menu where you can select Enable Remote Debugging. You can also enable Hot Reload from there.

When running the app on an android device you can use the adb shell on your dev machine terminal to give it commands.

To open the dev tools on a device: adb shell input keyevent 82 To refresh an android device used for testing run: adb shell input text "RR"

In case you get an failed to connect to dev server error, most probably your dev machine is either on a different network, or has switched it's IP since your last session. To fix that:

  1. Open dev tools on the device, shaking it or using the command above.
  2. Open Dev Settings
  3. In there tap Debug server host & port for device
  4. Enter your IP, including the :8081 port otherwise it's likely not to work.

To find your IP address on a Mac, open Settings > Network > Advanced (while your active connection is selected) > TCP/IP tab. Your local IP should be next to IPv4 Address.