modify Image source property to handle static images

Loading local static images in elm-native-ui is not obvious. So I have figured out how to do that and suggesting a small API change. The React Native doc about Image loading is here.

Here is a simple description what this modification makes possible.

All images are referenced by relative to elm.js, so the directory structure become like follows.

.
├── src
|   └── Native
|       └── Image.js
├── elm.js
└── img
    ├── check@2x.png
    └── check@3x.png

We need a small Native module to require the image files then return them as an object. The content of src/Native/Images.js is

var _ohanhi$elm_native_ui$Native_Images = (function () {
  return {
   check : require('./img/check.png’);,
  };
}());

In an Elm code, you can load this image like this.

[ Elements.image
    [ Properties.source Image.check
    ] []
]

If you want to load an image from remote like before, change the property name to sourceUri.

[ Elements.image
    [ Properties.sourceUri "http://somedomain.com/sample.png"
    ] []
]

ohanhi / elm-native-ui

modify Image source property to handle static images #64