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— DONE string, double & bool attributes work OK -
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)
- Note: especially for
- 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?
- Note: the plan here is to hijack HTTP (or WebSocket?) API for the
internal mechanism, with some fake URL scheme, e.g. 'elm-expo://'
- 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 variableREACT_NATIVE_PACKAGER_HOSTNAME
and runnpm start
again.