Pull Requests Welcome!
Running the Project on Mac
- Install yarn. Homebrew for mac is highly recommended. Skip this if you already have it installed
./shared, and watches it for changes. Leave this terminal open. Remove the
-targument if you don't want gradle to watch for changes and auto-rebuild.
- Open a new terminal window and run
yarn haul start. After a few seconds, it will prompt you asking which platform to bundle for. Select the
androidplatform. Add the
--platform androidparameter to select the android platform automatically.
- Run the Android app in an Android emulator. It should display the
HelloWorldreact component located in the
Main.ktfile in the
- Any changes you make in the
./sharedmodule should auto-trigger builds thanks to what we did in step 3. If using IntelliJ or Android Studio, files aren't always saved instantly. Pressing
⌘ + Swill trigger a save of all changed files, and gradle should see the changes, and trigger another build within a second or 2. After the js files have changed, pres
rrin the emulator to trigger a js code reload.
- Press the Android
menukey on the emulator (You know... that key from 4 years ago that the
ActionBarreplaced) to see a debug menu allowing several debug options, including debugging.
Why use Haul instead of metro (the default react-native packager)?
- The bundler will time-out while packaging the kotlin.js library (which is 1.4MB, 37k lines). There are some known work-arounds discussed in the link for this.
- Source-maps aren't properly merged. There are no known work-arounds for this. The effect of this is that you can't properly debug Kotlin source files, or get proper stack-traces.
./android- Base android project directory
./ios- Base ios project directory
./index.js- The entry point for the react-native js application. All this file does currently is defer to the
- Have the Android gradle
:android:assemblecommands depend on the corresponding
How does React-Native Work?
The best place to read about this is the React-Native Documentation, however here is a high level working model for those who are brand new to React-Native:
To display screens / ui, a representation of how to display all the data on the screen, along with any data that needs to be displayed, is serialized and sent to the main application thread, and then it will use native android / iOS
View's to create the View representation described in the React
haul, and then can be delivered to the mobile application without rebuilding by pressing
rr in the Android emulator, or pressing the Android
menu key, and selecting