Elm Native UI

Experimental support for writing native iOS and Android applications in the beautiful functional Elm language. This project builds on Facebook's React Native, using it as the JavaScript environment for Elm.

Is This Production Ready?

No.

Get it running

Caution: Experimental software!

The newest version of Elm Native UI depends on

modified Elm compiler — Must be on your PATH before the standard elm-make. There is a pre-built elm-make for OS X 64-bit. For other platforms you will need to build the compiler from source yourself for now.
modified core — Must replace the elm-lang/core package in your project.

The modified compiler will allow our NativeUi type to pass through main, and the modified core enables rendering for it.

Actually getting it running

Install React Native following their guide. Check that you can create a new project:

$ react-native init MyAppName

and try running it on a real or virtual device.

Once that works, clone this repository and the modified core in the same directory where you ran react-native init in. You should have a directory structure similar to this:

--|
  -- core
  |
  -- elm-native-ui
  |
  -- MyAppName

Go ahead and copy the files from the examples in your React Native app directory now and try to compile the Elm code with

$ npm run compile

This will create the elm-package.json and elm-stuff for you, even though it won't compile yet. (Also, edit the index.*.js files' last lines in case your React Native app is not called 'MyAppName' at this point.)

We will then use elm_self_publish to publish the Elm packages into our project.

Assuming we're in the parent directory where core and elm-native-ui reside, and that elm_self_publish.py is in that same directory:

$ python elm_self_publish.py ./core ./MyAppName
$ python elm_self_publish.py ./elm-native-ui ./MyAppName

Now we are ready to rock! 🤘🎸

Just to list out the basics:

# install dependencies
$ npm install
# compile Elm with
$ npm run compile
# run app on iOS
$ react-native run-ios
# or run on Android
$ react-native run-android

When you make changes to the code, you only need to recompile Elm and press Cmd-R on the Simulator (iOS) or refresh the emulator (Android).

If you wish, you can also start a file watcher for *.elm files, which will recompile whenever you make a change:

$ npm start

How it works

This section was outdated, but for an overview of the older structure, read this blog post: Elm Native UI: Writing a React Native app in Elm

You can also watch this ElmCast Live episode, where @ohanhi explains some of the differences between the old and the new versions. (You can safely skip the first 5 minutes, as we had technical issues in the beginning.)

Screenshots

iOS	Android

To Do

License

BSD (3-clause)

mk/elm-native-ui