{"id":13393395,"url":"https://github.com/ohanhi/elm-native-ui","last_synced_at":"2025-05-16T03:05:15.397Z","repository":{"id":139866392,"uuid":"45697060","full_name":"ohanhi/elm-native-ui","owner":"ohanhi","description":"[CLOSED] Experiment: mobile apps in Elm using React Native.","archived":false,"fork":false,"pushed_at":"2020-06-12T10:15:27.000Z","size":10388,"stargazers_count":1538,"open_issues_count":4,"forks_count":75,"subscribers_count":94,"default_branch":"master","last_synced_at":"2025-05-13T19:01:30.256Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ohanhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-11-06T17:37:01.000Z","updated_at":"2025-04-14T09:18:50.000Z","dependencies_parsed_at":"2024-01-21T04:42:05.953Z","dependency_job_id":null,"html_url":"https://github.com/ohanhi/elm-native-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohanhi%2Felm-native-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohanhi%2Felm-native-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohanhi%2Felm-native-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohanhi%2Felm-native-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ohanhi","download_url":"https://codeload.github.com/ohanhi/elm-native-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:00:51.731Z","updated_at":"2025-05-16T03:05:10.388Z","avatar_url":"https://github.com/ohanhi.png","language":"Elm","funding_links":[],"categories":["Elm","Index"],"sub_categories":["Elm"],"readme":"# Elm Native UI [![Build Status](https://travis-ci.org/ohanhi/elm-native-ui.svg?branch=master)](https://travis-ci.org/ohanhi/elm-native-ui)\n\n**THIS PROJECT IS NOT MAINTAINED.** If you want to become the maintainer, see [issue #90](https://github.com/ohanhi/elm-native-ui/issues/90). The code is from 2017 and the facilities used here are not applicable to current versions of Elm.\n\n\n![](img/elm-native-160.png)\n\nExperimental support for writing native iOS and Android applications in the beautiful functional [Elm language](http://elm-lang.org/).\nThis project builds on Facebook's [React Native](https://facebook.github.io/react-native/), using it as the JavaScript environment for Elm.\n\n## Frequently Asked Questions\n\n### Is This Production Ready?\n\nNo. This is really just an experiment, and it is not under active development. [People have used it](https://robots.thoughtbot.com/elm-native-ui-in-production) for applications despite this.\n\n### Why React Native?\n\nMobile applications are expected to look and feel at home on the device and the OS it is running. This goal cannot really be achieved with a WebView-based solution (such as Cordova). React Native applications use the same pieces of UI as an app built with Objective-C or Java, choosing the platform-specific native variant of the UI feature for you.\n\n### Will it always be React Native?\n\nIn the long term, not necessarily. The ultimate goal would be for Elm Native UI to be a standalone project, complete with the mobile platform groundwork that has been put into React Native already. It has not been fully assessed how much work this would in reality entail.\n\nAddendum 2017-10-17: [elm-ios](https://github.com/pzp1997/elm-ios) was a Google Summer of Code project that explored this idea for iOS.\n\n\n## Get it running\n\n### Caution: Experimental software!\n\nElm Native UI may get breaking changes at any time, and it might only work with an older version of React Native.\n\n### Actually getting it running\n\nInstall React Native following [their guide](https://facebook.github.io/react-native/docs/getting-started.html#content). Check that you can create a new project:\n\n```bash\n$ react-native init MyAppName --version 0.44.3\n```\n\nand try running it on a real or virtual device.\n\nOnce that works, clone this repository in the same directory where you ran `react-native init` in. You should have a directory structure similar to this:\n\n```\n│\n├── elm-native-ui\n└── MyAppName\n```\n\nGo ahead and copy the files from the [`examples/Counter`](examples/Counter) folder into your React Native app directory now.\n\nNow try to compile the Elm code with\n\n```bash\n$ npm run compile\n```\n\nThis will create the `elm-package.json` and `elm-stuff` for you, even though it won't compile yet.\n\nEdit the `index.*.js` files' last lines in case your React Native app is not called 'MyAppName' at this point. You may also need to rename the project in the `package.json` file.\n\nYou can then use e.g. [elm_self_publish](https://github.com/NoRedInk/elm-ops-tooling#elm_self_publish) to publish the Elm Native UI package into our project.\n\nAssuming we're in the parent directory where `elm-native-ui` reside:\n\n```bash\n$ python path/to/elm_self_publish.py ./elm-native-ui ./MyAppName\n```\n\nNow we are ready to rock! 🤘🎸\n\nJust to list out the basics:\n\n```bash\n# install dependencies\n$ npm install\n# compile Elm with\n$ npm run compile\n# run app on iOS\n$ react-native run-ios\n# or run on Android\n$ react-native run-android\n```\n\nWhen 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).\n\nIf you wish, you can also start a file watcher for \\*.elm files, which will recompile whenever you make a change:\n\n```bash\n$ npm start\n```\n\n### React native versions\n\nIf you use the package.json files from the example projects, you'll get the react native version that has been tested and known to be working with the examples.\n\nThat is currently react-native 0.44.3\n\nLater versions of react native may work, however, specifically in the subsequent react native 0.45.x release the \"Navigation Experimental\" module was depricated and moved to an external library, so the Navigation Example will not work. The intention is to port this to \"React Navigation\", which is now the accepted approach for react apps. The counter app still works, so if you don't use navigation your app should work with more recent versions.\n\n## How it works\n\nThis 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](http://ohanhi.github.io/elm-native-ui.html)\n\nYou can also watch this [ElmCast Live episode](https://www.livecoding.tv/elmcast/videos/JjbOK-elmcast-live-2), 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.)\n\n\n## Screenshots\n\niOS | Android\n----|--------\n![](img/screenshot-ios.png) | ![](img/screenshot-android.png)\n\n## To Do\n\n- [x] Basic PoC\n  - [x] Show something from Elm\n  - [x] Make basic VTree work\n  - [x] Add some kind of event handlers\n- [x] Library\n  - [x] Make `main` support our VTree ([see this suggestion](https://github.com/ohanhi/elm-native/commit/0a35edeb0c21985394b6f3b296140da431aa936c#commitcomment-14303291))\n- [ ] Styles\n  - [x] Basic types for styles\n  - [x] Support object type styles - _transform styles and `shadowOffset`_\n  - [x] Make enum type styles safer\n  - [ ] Allow the `StyleSheet.create` method for styles\n- [x] Props\n  - [x] Improved event handlers\n  - [x] Support props besides styles and event handlers\n  - [x] Unify syntax for styles, handlers and other props\n- [ ] Core features\n  - [x] Navigation (NavigationExperimental)\n  - [x] Tasks (HTTP calls, storage)\n  - [ ] UIExplorer / Component examples\n\n## License\n\n[BSD (3-clause)](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fohanhi%2Felm-native-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fohanhi%2Felm-native-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fohanhi%2Felm-native-ui/lists"}