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.
No.
The newest version of Elm Native UI depends on
-
modified Elm compiler — Must be on your
PATH
before the standardelm-make
. There is a pre-builtelm-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.
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
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.)
iOS | Android |
---|---|
- Basic PoC
- Show something from Elm
- Make basic VTree work
- Add some kind of event handlers
- Library
- Make
main
support our VTree (see this suggestion)
- Make
- Styles
- Basic types for styles
- Support object type styles - transform styles and
shadowOffset
- Make enum type styles safer - currently all Strings
- Allow the
StyleSheet.create
method for styles
- Props
- Improve event handlers - currently uses event handler ids
- Support props besides styles and event handlers
- Unify syntax for styles, handlers and other props