Skip to content

Goettcke/Imada-App

Repository files navigation

Imada App

Requires backend: https://github.com/MechaGK/imada-backend

Setting everything up

Note that this assumes you are running Linux. If you are running Windows or OS X, you are on your own. However, if you should figure out the steps, please add them to this README.

Installing some required tools

NodeJS

Install NodeJS using your distribution’s package manager.

On Ubuntu, that would be

sudo apt-get update && sudo apt install nodejs nodejs-legacy

The latter package just sets up a symlink(See this).

Yarn

Yarn is a package manager like npm, but not complete shit like npm. Follow this guide.

react-native

I think the following will work.

sudo yarn global add react-native

If it doesn’t, use npm.

sudo npm install -g react-native

Watchman

You can probably skip this to begin with. This is technically optional, and you may not need it. If you run into issues with hot reloading at some point, you should consider it.

Follow this guide. Unfortunately, watchman isn’t in the Ubuntu repositories and you will need to build it manually. If you are running Arch Linux, you can get it from the AUR.

Confirming that all tools are installed

To test if everything is installed correctly, run the following commands

node
yarn
react-native
# Optional
watchman

Everything is good to go if none of them give you command not found.

Installing the Android SDK

You should follow point 2 in the Getting Started guide. The guide is wrong, and it has been fixed, but for some reason, even though this pull request has been accepted and merged, the online guide doesn’t reflect it yet.

If you followed the guide correctly, you should now have a folder called Android in your home directory, which contains a single directory called Sdk.

Now you need to set up your $PATH environment variable. To do this, add the following lines to the end of your .bashrc or .zshrc, depending on what shell you are using.

export ANDROID_HOME=~/Android/Sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Now close your terminal and open a new one. Now run

which android
which adb

This should return something like

/home/<your-username>/Android/Sdk/tools/android      
/home/<your-username>/Android/Sdk/platform-tools/adb 

If everything worked correctly, run android in your terminal. This should bring up the Standalon SDK Manager. Here, you will need to install

  • Under “Tools”
    • Android SDK Build-tools version 23.0.1
  • Under “Android 6.0 (API 23)
    • SDK Platform 23
    • Intel x86 Atom_64 System Image

The installation may take a while.

Once that is done, you can close the SDK manager.

Setting up the Android Emulator

Run android avd in the terminal.

  1. Press the Create button
  2. In “AVD Name”, input whatever you want.
  3. In “Device” choose whatever – TODO: does this choice affect anything except resolution, etc?
  4. In “Target”, choose Android 6.0
  5. In “CPU/ABI”, choose Intel Atom (x86_64)
  6. In “Skin”, choose whatever – TODO: How important is this?

The default values for everything else should be fine for the most part. It should be possible to click on the “OK” button now. Do that, and it will create the virtual device. When that is done, select it and press “Start” and then “Launch”.

Using your own device

To use your own device, it should be sufficient to just plug it in, and it should be detected. To confirm that it is detected, you can run

adb devices

The output should look something like this

List of devices attached 
05157df5127a9630  device                    

If it does, you should be good to go.

Develop on device without USB

It is possible to develop on a device without having it plugged into the computer.

Open up the debugging menu. Choose “Dev Settings” and then “Debug server host & port for device”. Find your IP by running something like ifconfig or ip addr depending on distro in the terminal. By default, the development server listens on port 8081. Input the address and port ip:port. For example, 192.168.123.1:8081. It should work.

Note that it is probably best to start by plugging the device to the computer and then running react-native run-android, which ensures that the app is properly installed on your device, with all changes since the last time.

Running the project

Open your terminal, and navigate to a directory where you would like have the project. Now run

git clone https://github.com/Goettcke/Imada-App/
cd Imada-App
yarn install

If everything went as expected, ensure that you have the android emulator running(or your own device connected) and run

react-native run-android

This will take a minute, but if it works correctly, you will see the app pop up on your emulator or device. Sometimes, it will not work quite correctly, and the app will show you a red screen complaining about not being able to connect, or some such. In that case, just run

react-native start

When it is started, you can reload the app by pressing R twice, if you’re using the emulator, or by shaking your phone and pressing “Reload” in the debugging menu that comes up. To access the debugging menu in the emulator, press Ctrl + M.

Open the debugging menu, and select “Enable Hot Reloading”.

Now you are finally ready to go. Open up index.android.js and try changing something, like the the contents of a <Text> element, and see if it doesn’t update automatically. Hot reloading is very hard to do 100% flawlessly, so sometimes it will not work. In that case, just reload manually.

Known issues

Node path

Watchman and inotify overload

About

React Native go on

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors