Introduction

Project Objective

• Provide a new target platform
• Compile to React Native bindings
• It may change to other target in the future

Naming

Why now ?

Installing

React native install

docker run -it --rm \
       -e DISPLAY=$DISPLAY \
       -v /tmp/.X11-unix:/tmp/.X11-unix \
       /opt/android-studio/studio/bin.sh

Docker ?

create-react-native-app ?

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

React native install quirks

=> avoid unsaved local elm install

elm-native-ui install quirks

# Assuming elm is installed globally

$ react-native init Counter
$ git clone https://github.com/ohanhi/elm-native-ui
$ cp -R elm-native-ui/examples/Counter/* Counter
$ cd Counter
$ npm install

Use elm_self_publish or edit elm-package.json

 "source-directories": [
     ".",
     "../elm-native-ui/src"
 ],

Build & Run

Code

Project structure

.
├── android/
├── ios/
├── app.json
├── elm.js
├── elm-package.json
├── elm-stuff
├── index.android.js
├── index.ios.js
├── Main.elm
├── package.json
├── README.md
├── __tests__/
└── node_modules/

index.{android/ios}.js

Elm Side - NativeUi Imports

module Main exposing (..)

import NativeUi as Ui exposing (Node)
import NativeUi.Style as Style exposing (defaultTransform)
import NativeUi.Elements as Elements exposing (..)
import NativeUi.Events exposing (..)
import NativeUi.Image as Image exposing (..)

Elm Architecture

-- MODEL

-- UPDATE

-- VIEW

-- PROGRAM

View

view : Model -> Node Msg
view count =
    let
        imageSource =
            { uri = "https://raw.githubusercontent.com/futurice/spiceprogram/master/assets/img/logo/chilicorn_no_text-128.png"
            , cache = Just ForceCache
            }
    in
        Elements.view
            [ Ui.style [ Style.alignItems "center" ]
            ]
            [ image
                [ Ui.style
                    [ Style.height 64
                    , Style.width 64
                    , Style.marginBottom 30
                    , Style.marginTop 30
                    ]
                , source imageSource
                ]
                []
            , text
                [ Ui.style
                    [ Style.textAlign "center"
                    , Style.marginBottom 30
                    ]
                ]
                [ Ui.string ("Counter: " ++ toString count)
                ]
            , Elements.view
                [ Ui.style
                    [ Style.width 80
                    , Style.flexDirection "row"
                    , Style.justifyContent "space-between"
                    ]
                ]
                [ button Decrement "#d33" "-"
                , button Increment "#3d3" "+"
                ]
            ]


button : Msg -> String -> String -> Node Msg
button msg color content =
    text
        [ Ui.style
            [ Style.color "white"
            , Style.textAlign "center"
            , Style.backgroundColor color
            , Style.paddingTop 5
            , Style.paddingBottom 5
            , Style.width 30
            , Style.fontWeight "bold"
            , Style.shadowColor "#000"
            , Style.shadowOpacity 0.25
            , Style.shadowOffset 1 1
            , Style.shadowRadius 5
            , Style.transform { defaultTransform | rotate = Just "10deg" }
            ]
        , onPress msg
        ]
        [ Ui.string content ]