Example using Kotlin in a React-Native Application
yarn install
to install all the javascript dependencies../gradlew -t :shared:assemble
- compiles the Kotlin javascript module located in ./shared
, and watches it for changes. Leave this terminal open. Remove the -t
argument if you don't want gradle to watch for changes and auto-rebuild.yarn haul start
. After a few seconds, it will prompt you asking which platform to bundle for. Select the android
platform. Add the --platform android
parameter to select the android platform automatically.HelloWorld
react component located in the Main.kt
file in the ./shared
module../shared
module 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 ⌘ + S
will 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 rr
in the emulator to trigger a js code reload.menu
key on the emulator (You know... that key from 4 years ago that the ActionBar
replaced) to see a debug menu allowing several debug options, including debugging.This example uses Haul, an open-source, drop-in replacement for the react-native bundler. The default react-native bundler is metro, which has 2 known issues when using Kotlin currently:
./android
- Base android project directory./ios
- Base ios project directory./shared
- The module compiled to javascript that runs react-native./index.js
- The entry point for the react-native js application. All this file does currently is defer to the Main.kt
in the ./shared
module.:android:assemble
commands depend on the corresponding :shared:assemble
commands.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:
React-Native can be thought of as a mini js server running alongside the android / ios application. In production the js code runs inside the android / ios applications on it's own separate thread. It communicates back and fourth with the main application through a single socket connection. When debugging the javascript application, the javascript code is run inside a chrome browser (debugging is done in chrome), and communicates back-and fourth with the main application through that same socket.
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 Component
.
In development, the javascript code isn't packaged with the application. It's instead delivered to the running application by a locally hosted server. Any changes to the js files are automatically packaged by 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 Reload
.
Any events (i.e. click events) are serialized, and sent back to the javascript thread for javascript to handle / process.