has anybody had any luck getting require to work for referencing images, as described here: https://facebook.github.io/react-native/docs/images.html ?

I'm trying something pretty basic, but I just get the error "Requiring unknown module "images/glyphicons-204-lock.png"", and I tried lots of different ways of defining the path

(defn app [data owner]
  (reify
    om/IRender
    (render [this]
      (n/toolbar-android {:title "App"
                          :actions [{:title "Locked"
                                     :show "always"
                                     :icon (js/require "images/glyphicons-204-lock.png")}]
                          :style {:height 56}}))))

js refers to the javascript namespace

so (js/require ...) would be calling the javascript require, which accepts a javascript module as an argument

hmm

i'm reading the RN docs now

that unfortunately looks correct to me

If I turn on --verbose for the RN server, I get these warnings/errors

[10:43:51 PM] <START> find dependencies
Sat, 16 Jan 2016 04:43:51 GMT ReactNativePackager:DependencyGraph Unable to resolve module images/glyphicons-204-lock.png from /Users/thomasstephens/Documents/Between/target/index.android.js
Sat, 16 Jan 2016 04:43:51 GMT ReactNativePackager:DependencyGraph WARNING: Cannot find required module `images/glyphicons-204-lock.png` from module `/Users/thomasstephens/Documents/Between/target/index.android.js`

I also tried the "image!filename_without_extension" format I've seen them use in a few places in their API docs, but it also doesn't work

what's your folder structure

I tried adding some console.logs to the dependency graph code to figure out where it was going wrong, but didn't get anywhere

i've tried two structures:

can you try this

first:

src/
    my_code.cljs
images/
    some-image.png
target/
    built-files.js

(defn app [data owner]
  (reify
    om/IRender
    (render [this]
      (n/toolbar-android {:title "App"
                          :actions [{:title "Locked"
                                     :show "always"
                                     :icon (js/require "./images/glyphicons-204-lock.png")}]
                          :style {:height 56}}))))

and also copying the images folder into the target folder

I've added "./target" to the --roots for RN's server

@jethroksy: yeah, I tried that

if I just curl localhost:8081/images/glyphicons-204-lock.png, I get the image back

I also tried /images/...

I got it to work! three things I had to do: it had to live inside target/ (where the compile .js was), I had to require as "./images/...", and I had to restart the RN server after I copied the images into the target path (probably what I hadn't done previously)

@tstephens: Are you using re-natal? It has support of external react components, so later on you can use simple require. Could be the same functionality can support images. More info here https://github.com/drapanjanas/re-natal#using-external-react-native-components

Hey, guys. I am trying to implement Android CardView on CLJS. There is a JavaScript code, and this code works perfectly: https://github.com/react-native-material-design/demo-app/blob/master/src/scenes/Welcome.js Here is how my cljs code looks like:

(set! js/React (js/require "react-native"))
(set! js/MaterialDesign (js/require "react-native-material-design"))

(def text
  (r/adapt-react-class (.-Text js/React)))
(def button
  (r/adapt-react-class (.-Button js/MaterialDesign)))

(def card
  (r/adapt-react-class (.-Card js/MaterialDesign)))
(def card-media
  (r/adapt-react-class (.-Card.Media js/MaterialDesign)))
(def card-body
  (r/adapt-react-class (.-Card.Body js/MaterialDesign)))
(def card-actions
  (r/adapt-react-class (.-Card.Actions js/MaterialDesign)))

[card {:style {:width "100%"}}
  [card-media {:image (ui/image {:source logo-img})}]
  [card-body
    [text @greeting]]
  [card-actions {:position "right"}
    [button {:value "OK" :on-press #(alert "Test")}]]]

<Card.Media image={<Image source={require('./../img/welcome.jpg')} />} >

[card-media {:image (ui/image {:source logo-img})}]

@alwx: try using as-element function from reagent.core, if you have not tried this already

[card-media {:image (r/as-element [image  {:source logo-img}])}]

@drapanjanas: yes, it works, thank you.