ohanhi / elm-native-ui Goto Github PK

@mk @ohanhi @eeue56

in src/Native/Runtime.js the following lines throw error in Redbox and nothing works.

// React elements have a$$typeofmarker whose value is an // ES6 Symbol. IfSymboldoes not exist, we bail out early. if (typeof(window.Symbol) === 'undefined') { throw new Error( 'You seem to be running on an unsupported platform.\n' + 'Elm.embedReact is currently only supported for React Native.\n' + 'Please use Elm.embed or Elm.fullscreen instead.' ); }

As I checked the react source. Symbol or a polyfill may or may not be available always and they use a plan number 0xeac7 as fallback to represent ReactElement Type. This happens at runtime so the value for REACT_ELEMENT_TYPE is not fixed across all compiled files. We need to figure this out in runtime not development time. It has to be dynamic not static.

The following is the code from https://github.com/facebook/react/blob/0.14-stable/src/isomorphic/classic/element/ReactElement.js

var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) || 0xeac7;

I'm excited about this, I really love working with Elm, but my React/React Native experience is limited.

How can I contribute?

@ohanhi @mk As I understand to go to Production Quality we need to complete quiet a few things and some are out of my control.

• Wrappers for Components, Style, Props and APIs
• Navigator
• UIExplorer / Examples for Android & iOS
• Platform Specific Code
• Single Code Base for all platforms
• Code sharing between Web & Mobile Apps
• Tasks (fetch, AsyncStorage,... )
• Support for 3rd Party React Native Components

The following are completely out of my control

• elm-native-ui available as a library in package.elm-lang.org
• elm-lang/core -> Support for elm-native-ui
• elm-compiler -> Support for elm-native-ui
• elm-lang release with the Support for elm-native-ui
• Maintain Code base for every Release of React Native

So this is what I am going to do...

1. Work on the fork (https://github.com/elm-native/elm-native-ui)
2. Build custom elm-native binaries for elm compiler (Mac & Ubuntu/Linux 64Bit only) Lets see if people need 32bit binaries
3. May be package.elm-native.com to host all packages
4. Build Native Mobile Apps with Elm!
5. Maintain elm-native-ui for all future releases of React Native Release. Every 2 weeks or so...
6. Fun & Profit!

When the library is mature enough I guess things which are out of control will be taken care of by those responsible.

Wish elm Main supported custom types and hooks to handle those custom types... things would have been way easier.

I have been trying to get refreshControl to work with ListView but haven't found a way to pass in a Node a value as a property in the props list. Am I missing something really obvious here or is there any other work I can make this work?

BTW, have been using this for few days, great work guys 👍 I would like to contribute to make this better but still in my very early Elm days, have to level up before that happens 😄

The definition of ellipsizeMode is:

ellipsizeMode : TextEllipsizeMode -> Property msg

but TextEllipsizeMode isn't currently exposed.

This seems like an idiomatic way to write the updateDataSource:

ListView.emptyDataSource
    |> ListView.updateDataSource [ 1, 2, 3 ]

but right now we can't do that - the data source has to be the first argument, so the best the user can currently do is to flip the function.

(This is similar to the *.andThen debate and BC change in elm-lang/core not so long ago).

This includes forking the new compiler and core.

"Go ahead and copy the files from the examples in your React Native app directory now."
Where exactly do I copy the examples files to? I assume I copy a directory from examples with all its files into the React app root folder created by react init ??
Please make this clearer in the docs and include a concrete example for setting up one of these example projects. Thanks!

Exponent is like Rails for React Native, makes it much, much easier to build an app on React Native!

https://getexponent.com/

https://docs.getexponent.com/versions/v12.0.0/index.html

https://www.youtube.com/watch?v=7lZtV-rIAmY

New project template (RN template with a few extras for exponent integration)
https://github.com/exponent/new-project-template

In a recent commit, @jferris and myself ended up spending a majority of our time debugging and figuring out how the generators worked, so we could "write" a couple lines of Elm code. While the generators were meant to reduce time spent, they now seem like an impediment. For repetitive transformations of the Elm code, it seems like that could be done with a sufficiently advanced text editor.

If you agree, we'd be happy to make this change.

Missing text style prop textAlignVertical from NativeUi.Style.

@ohanhi Thanks for the great work with the PoC.

Its working fine in Mac with the Binary elm-make in the built folder.

When I try to build elm-make in Ubuntu with GHC 7.10.3 and Cabal 1.22.4 everything builds just fine.

I used the modified BuildFromSource.hs file which is available as a Gist
https://gist.github.com/sudhirvkumar/cc8f6c55ca49876e07f3906d774214eb

I have forked the repositories into AtomicITS organization so that its easy to use that script

https://github.com/AtomicITS/

Everything compiled and I copied the elm-make from the cabal sandbox/bin folder into ~/bin which is available in my path and overrides existing elm-make

I have done all self publish stuff with the core and elm-native-ui

when I run npm run compile I get the following error

`The 'main' value has an unsupported type.

14│ main : Signal Ui.NativeUi
^^^^^^^^^^^^^^^^^^^^^^^^^
I need an Element, Html, (Signal Element), or (Signal Html) so I can render it
on screen, but you gave me:

Signal Ui.NativeUi

Detected errors in 1 module.`

which elm-make also points to /home/sudhir/bin/elm-make

I am a little puzzled as I can see the nativeUi overrides in the Elm-Platform/0.16/elm-compiler/src/Nitpick/TopLevelTypes.hs file too

Thanks in advance

Just got this up and running on React Native 0.55 and React 16. Outside of removing references to NavigationCardStack, NavigationHeader, and NavigationHeaderTitle, the only other change required (in my non-exhaustive test app, anyway) was this patch to makeComponent():

6086,6089c6086
<     return React.createClass({
<       getInitialState: function getInitialState() {
<         return {};
<       },
---
>     return class extends React.Component {
6091c6088,6089
<       onAppReady: onAppReady,
---
>       state = {};
>       onAppReady = onAppReady;
6093c6091
<       componentDidMount: function componentDidMount() {
---
>       componentDidMount() {
6100c6098
<           this.renderer
---
>           this.renderer.bind(this)
6106c6104
<       },
---
>       }
6108c6106
<       renderer: function renderer(onMessage, initialModel) {
---
>       renderer(onMessage, initialModel) {
6111,6112c6109,6110
<         return this.updateModel;
<       },
---
>         return this.updateModel.bind(this);
>       }
6114c6112
<       updateModel: function updateModel(model) {
---
>       updateModel(model) {
6116c6114
<       },
---
>       }
6118c6116
<       render: function render() {
---
>       render() {
6125c6123
<     });
---
>     };

Happy to submit a PR, but obviously this breaks the navigation demo. 😞 Let me know your thoughts. Thanks!

StyleSheet.create is the preferred way of providing styles in React Native (docs).

Properties for a given component should be a single list, just like in elm-html. Currently only styles can be set for components, and event handler is a separate parameter. Ideally, the component API should be very familiar-looking:

text
  [ style stylesList
  , onPressHandler
  , numberOfLines 1
  ]
  "Press me"

Dear All

Not really an issue, more a query. We have a working Elm web app, embedded in a html page, using css files. I've been using phonegap to create an Android-installable version of this app. With phonegap I've been basically bundling up all the html, css and js files more-or-less unchanged into the Android app.

We would like to use elm-native-ui instead of phonegap. I have run the Counter example & installed on an Android device.

Is it possible to use elm-native-ui with Elm's Html, embedding the Elm app in a html page?

Would it be necessary (easier, better) to use elm-native-ui's NativeUi modules (as with the examples)?

One of our app's functions is to open remote web pages: html links in the app open up the device's web browser. Would similar functionality be available in elm-native-ui?

With thanks and best wishes

Ivan

ps I saw the thread about maintainers. If we can use this library I would be interested in helping maintain, document and improve.

When I stumbled upon this project, I was confused - why does elm need react-native to work on mobile? So I asked on #general:

megapctr [10:21 AM]
any thoughts on why elm-native-ui uses react-native rather than cordova or phoneGap? https://github.com/elm-native-ui/elm-native-ui

labbekak [10:30 AM]
React Native has actual native UI

[10:30]
And it's more performant

[10:31]
I think using Elm with cordova is pretty trivial, isn't it?

Are you planning on adding a FAQ section? If so, I'd like to suggest explaining the advantage of react-native there.

You saw this issue coming, didn't you :-)

Readme should have a step-by-step to get the project up and running for the first time. The Elm build should have a possibility for watching file changes for smoother development.

Elm developers are familiar with the StartApp pattern, so Elm Native UI should have a similar API.

From evancz/start-app:

main =
  StartApp.start { model = model, view = view, update = update }


model = 0


view address model =
  div []
    [ button [ onClick address Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]


type Action = Increment | Decrement


update action model =
  case action of
    Increment -> model + 1
    Decrement -> model - 1

I was trying to get started and I was stuck on the app not running. After a bit of digging, I found that I need to give a different name than MyAppName for package.json, otherwise it would work. What happen is that elm-native-ui/example/package.json already took MyAppName and so compiler will fail.

Please add this bit of instruction to README.md
Edit package.js to give a different name.

Thanks.

I'm having a hard time trying to understand this here https://github.com/ohanhi/elm-native-ui/blob/master/src/NativeUi.elm#L69-L71

where is customNode defined for example?

I made these in vector format if there's any interest in using them.

Elm Native is not a very good name for the project, so feel free to submit your ideas on what would be better.

Why

The dual meaning of "Native" has caused us some trouble already. In short, Elm.Native refers to the JavaScript side of things, while React Native refers to the Objective C / Java on the mobile devices.

Ideally I think the project name would capture the word "Elm" and have a hint towards mobile apps, maybe even forgoing the "Native" concept altogether. It would be nice of course to give a nod to the React Native project, but I feel avoiding confusion is more important. We can always add a "Powered by RN" badge on the Readme. :)

How

Please submit your suggestions as a comment in this issue. Me and @staltz might then choose to select one of the suggested names or maybe we'll come up with something else on our own.

In case we choose one, the person who made the suggestion can submit a PR to get their name in the repo history and in the Readme if they so wish. 🎉

As React Native supports multiple platforms and the probability of React Native apps being developed for multiple platforms is very high. I would like to use the same code base to create both the apps.

https://github.com/elm-lang/html/blob/master/src/Html/App.elm#L170

We can use the same idea which is in elm-lang/html package

programWithFlags
VirtualDom.programWithFlags

We can send the platform as a flag in the index.ios.js and index.android.js and in the future may be index.windows.js

There are a few issues when we use the same source code for multiple platforms.

We might have one component for IOS and another for Android for the same functionality.

We need to figure out a way to define a component with platform as a parameter and by passing the parameter we should be able to use the correct component for the platform and still maintaining code correctness.

Facebook is working on a revamp of the JS Navigator and the preview is available here: https://github.com/ericvicenti/navigation-rfc

@ohanhi I believe this would solve the major blocker with the current implementation of the Navigator.

It looks like this project hasn't seen an update in a few months. The last blog post was written about a year and half ago, and everything in the readme still says this project is so experimental no one should use it. Is this project still alive? I want to use it for a production project so badly, but I don't know how long I'm looking at waiting for it to move out of the "experimental" status. Is it still using an alpha version of Elm? Or has that version of Elm moved out of alpha?

I am looking for an interested maintainer for this project.

There are many factors related to this, but here are some:

• My initial goal of seeing if Elm on React Native was possible has been proven to work a long time ago. However, in my opinion React Native as a platform does not really conform to the Elm ideals: things keep breaking all the time.
• I haven't been using the technology myself, which is why I've mostly been merging pull requests and not developing features.
• I no longer have an Apple computer, so I cannot (easily) develop things that are related to iOS.
• Approaches like the one explored as a Google Summer of Code project (https://github.com/pzp1997/elm-ios), going beneath the React Native layer, seem like a much more compelling way to do things like this to me personally. Evan Czaplicki also very much agrees.

What I will still contribute to this project is #89. I will make a proper write-up of all the thinking and evaluating that has happened sort of behind the scenes thus far. Hopefully that will also shed some more light into why I no longer wish to actively maintain the project.

I'm not sure this is actually a practical idea, but I spent some time looking into making main work this week, inspired by this discussion linked to from the readme.

The elm compiler enforces that the return type of main be either Element, VirtualDom.Node (aka Html) or a signal of either of the above.

In theory you could overwrite the Native.VirtualDom.node function and replace it with whatever you want, or you could define a new function that claims to return a VirtualDom.Node but actually calls out to Native.ReactNative.node (or something).

But I'm not sure that it's actually necessary to replace the VirtualDom node type at all. virtual-dom nodes are already similar enough to the VTree in this project that you could probably just use them directly.

Replacing the render and updateAndReplace functions from the virtual-dom package would probably look very similar to the vtreeToReactElement function you've already defined.

One thing I discovered when poking at this is that, out of the box, React Native will blow up if you include the virtual-dom package. This is because the elm virtual-dom wrapper is built with browserify, which defines a function named require. This confuses the RN packager, which will try to use its own require function instead. If you globally replace require with e.g. _require in the compiled elm.js, it will load fine.

Anyway, I'm hoping to have more time to muck about with this soon, but I'm curious to see what you think. Nice work so far, btw :)

@ohanhi @eeue56 @mk

As 0.17 Alpha has been released in elm-dev. What is the plan for Elm Native UI?

How can we collaborate?

Thank You!

@mk @ohanhi @eeue56
elm-native-ui/core repository doesn't have option to create issues.

There are a few blockers which are stopping me from using the core as is. I had to make changes in the src/Native/Runtime.js to make it work.

Can you please enable issues for that repository?

Hi, I'm very new to Elm, but I'd like to get into it. I'm a full-time JS dev though, and I'm a big fan of React Native. I'd love to contribute what little time I have to furthering this project, but I'm not exactly sure where/how to get started.

If there were a guide on what the preferred way to contribute was, that would be great. Also, is there a guide somewhere on how you're doing the Elm->JS interop like in the src/Native directory? My cursory google search didn't turn up anything like what I'm seeing in this repo.

Thanks!

As you may know elm-install allows installing elm-packages from github repositories. However it fails to install this package since there is no version tags. After reading carefully the docs, I found defining the dependency-source in my elm-package.json helps elm-install to find this repository and install it.

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "src"
    ],
    "exposed-modules": [],
    "native-modules": true,
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 6.0.0",
        "ohanhi/elm-native-ui": "2.0.0 <= v < 3.0.0",
        "user/elm-native-ui-anohter-package": "1.0.0 <= v < 2.0.0"
    },
    "dependency-sources": {
      "ohanhi/elm-native-ui": {
        "url": "[email protected]:ohanhi/elm-native-ui",
        "ref": "master"
      }
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

But there is still a problem that the elm-install can not detect the change of elm-ntaive-ui repository. So we need to manually clone it to the packages directory to be updated.

$ git clone [email protected]:ohanhi/elm-native-ui.git elm-stuff/packages/ohanhi/elm-native-ui/2.0.0

Anyway use of the elm-install allow us not to rely on the python utility. Write package dependencies then type elm-install and go is pretty cool for me.

This package is still experimental so I guess it will not be versioned soon. But adding a tag 2.0.0 may help us at least not need to add dependency-source.

Please let me know if what I am doing is wrong... I am not expert at all :p