Fork me on GitHub
#cljsrn
<
2016-01-16
>
tstephens04:01:47

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

tstephens04:01:31

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}}))))

jethroksy04:01:02

js refers to the javascript namespace

jethroksy04:01:46

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

jethroksy04:01:47

i'm reading the RN docs now

jethroksy04:01:50

that unfortunately looks correct to me

tstephens04:01:58

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`

tstephens04:01:28

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

jethroksy04:01:55

what's your folder structure

tstephens04:01:57

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

tstephens04:01:05

i've tried two structures:

jethroksy04:01:53

can you try this

tstephens04:01:56

first:

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

jethroksy04:01:59

(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}}))))

tstephens04:01:12

and also copying the images folder into the target folder

tstephens04:01:27

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

tstephens04:01:33

@jethroksy: yeah, I tried that

tstephens04:01:14

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

tstephens04:01:35

I also tried /images/...

tstephens05:01:47

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)

artemyarulin06:01:45

@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

alwx08:01:31

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")}]]]
The problem is I don't clearly understand how to rewrite this JS line on ClojureScript.:
<Card.Media image={<Image source={require('./../img/welcome.jpg')} />} >
I tried something like that (you can see it from the code extract above):
[card-media {:image (ui/image {:source logo-img})}]
But it doesn't work 😞 Can I specify React component as another component's property?

drapanjanas09:01:42

@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}])}]

alwx15:01:06

@drapanjanas: yes, it works, thank you.