elm-expo

Elm-Expo is an experimental library for writing mobile phone apps with
Elm, based on the Expo
platform/helper app.

The July 2018 version of the library (Elm package 1.1.0, npm package 1.1.0) is
at a proof of concept/technology preview (pre-alpha) stage. The general idea
seems to be working, and a bare-bones "counter app" demo can be written in it
for Android. Some important features are however still TODO. Please note I
cannot say how much I'll want to expand on developing this library; I'm not
backed by anyone. You're very much welcome to join the fun (I can answer any
questions you want, you can email me or open an issue), or take it and run away
in any direction you like (as long as you respect the license).

The current situation as I see it is as below:

- ~~View nodes~~ — DONE Note: this uses basic low-level React Native
blocks, such as RCTView etc. As of
RN 0.55.4,
on Android this list should include more or less:
- ARTGroup, ARTShape, ARTText, ARTSurfaceView
- AndroidCheckBox, AndroidProgressBar, AndroidSwitch, AndroidTextInput
- AndroidDialogPicker, AndroidDropdownPicker
- AndroidDrawerLayout, AndroidSwipeRefreshLayout
- AndroidViewPager
- ToolbarAndroid
- (AndroidHorizontalScrollView, AndroidHorizontalScrollContentView)
- (RCTScrollView)
- RCTSlider
- RCTWebView
- RCTTextInlineImage
- RCTImageView
- RCTModalHostView
- RCTRawText, RCTText, RCTVirtualText
- RCTView
- View attributes — PARTIALLY DONE: string & double attributes work OK,
bool attributes are TODO
- ~~Per-node callbacks/events~~ — DONE Note: currently only basic low-level
React Native touch events (topTouchStart, topTouchMove, topTouchEnd)
- Scrolling views handling — TODO
- Note: especially for onClick etc. events/callbacks, this may require
porting the touch processing logic from React Native (this logic handles
recognition of scroll events vs. click events)
- Global click/touch events — PARTIALLY DONE: basic handling of touch-down;
needs better handling + touch-up + touch-drag handling
- Non-view modules — TODO
- Note: the plan here is to hijack HTTP (or WebSocket?) API for the
internal mechanism, with some fake URL scheme, e.g. 'elm-expo://'
- TODO: how to protect this against command injection in future?
- iOS support — TODO
- Important Note: I don't own an iOS device, so cannot currently do this
without your help. If you are interested in iOS support, I currently see
two options: you can sponsor (send or finance) an iOS device for me,
and/or author and contribute the code yourself (you're welcome to
contact me for discussion and guidance) — even partial support is
heartily welcome. In any way, I suggest you contact me via
email.
- Multi-touch — TODO (LATER)

See also
elm-native-expo-counter
for an example app using this library.

Installation guide

Start with create-react-native-app:

$ npm install -g create-react-native-app
$ create-react-native-app my-app # on Windows: %appdata%\npm\create-react-native-app my-app
$ cd my-app/

Install extra dependencies:

$ npm install --save-dev chokidar-cli@1.2.0
$ npm install --save-dev elm@~0.18.0 # FIXME: how to make it add version "~0.18.0"?
$ elm-package install akavel/elm-expo # on Windows: %aAppdata%\npm\elm-package ...

Add the following lines to your package.json, in section "scripts":

"watch-elm": "chokidar \"src/*/.elm\" -c \"npm run build\" --initial",
"build": "elm-make src/Main.elm --output=elm.js",

Create directory 'src/', and in it a file named Main.elm with the following contents:

module Main exposing (..)

import Expo exposing (..)
import Expo.Attribute as Attr

-- MODEL

type alias Model =
{ n : Int
}

model : Model
model =
{ n = 9000
}

-- UPDATE

type Msg
= TouchDown Expo.Position

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
TouchDown _ ->
( { model | n = Debug.log "CLICKS:" (model.n + 1) }, Cmd.none )

-- VIEW

view : Model -> Node Msg
view model =
Expo.view
[ Attr.double "flex" 1
, Attr.string "alignItems" "center"
, Attr.string "justifyContent" "center"
]
[ text "hello Elm-Expo!"
, text ("Counter: " ++ toString model.n)
, text "Touch anywhere on the screen to increase the counter!"
]

-- PROGRAM

main : Program Never Model Msg
main =
Expo.program
{ init = ( model, Cmd.none )
, view = view
, update = update
, subscriptions = \model -> Expo.downs TouchDown
}

Replace the contents of the App.js file with the following lines:

var elmexpo = require('elm-expo');
elmexpo.prepare();
const Elm = require('./elm');
elmexpo.bridge(Elm.Main);

console.log('...app.js end...');

Run the following commands, install Expo app on your phone, and try loading it via the QR-code:

$ npm run build # this should compile Elm to JS
$ npm start

NOTES:

- If you have trouble with Expo not connecting to your local IP (especially on
Windows), try setting up a VPN between your PC and your phone, e.g. with the
free ZeroTier One tool.
- The npm start command will try to detect an IP, but it may pick a poor
choice. If you want to run it at a different IP, assign it to OS environment
variable REACT_NATIVE_PACKAGER_HOSTNAME and run npm start again.