Requires backend: https://github.com/MechaGK/imada-backend
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.
Install NodeJS using your distribution’s package manager.
On Ubuntu, that would be
sudo apt-get update && sudo apt install nodejs nodejs-legacyThe latter package just sets up a symlink(See this).
Yarn is a package manager like npm, but not complete shit like npm. Follow this guide.
I think the following will work.
sudo yarn global add react-nativeIf it doesn’t, use npm.
sudo npm install -g react-nativeYou 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.
To test if everything is installed correctly, run the following commands
node
yarn
react-native
# Optional
watchmanEverything is good to go if none of them give you command not found.
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-toolsNow close your terminal and open a new one. Now run
which android
which adbThis 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.
Run android avd in the terminal.
- Press the Create button
- In “AVD Name”, input whatever you want.
- In “Device” choose whatever – TODO: does this choice affect anything except resolution, etc?
- In “Target”, choose Android 6.0
- In “CPU/ABI”, choose Intel Atom (x86_64)
- 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”.
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 devicesThe output should look something like this
List of devices attached 05157df5127a9630 device
If it does, you should be good to go.
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.
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 installIf everything went as expected, ensure that you have the android emulator running(or your own device connected) and run
react-native run-androidThis 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 startWhen 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.