@lepistane when I started React Native + cljs I had done zero React Native before… but I knew ClojureScript + React decently well

re-natal was (and is) a great resource for me, just following the tutorial got a hello world/sample app with one view or so running for me very fast

around 9-10 months ago

@nikki i am not afraid of work or adventure but i dont know react or react native (i havent made anything with those) i've used reagent little bit and clj/cljs my only mission right now (while i dont have time to develop app since i am busy finishing other projects which will be over in month or so) is to develop road map what do i have to know? what should i know to develop app? so when i start building i can see where knowledge is lacking and go back to that and learn it because i already prepared resources. i am using project as catalyst for learning cljs rn clj backend etc... 🙂 i've got experience with java world servlets, spring, jquery, js(some), html,css, bootstrap, mysql

@raspasov great! so there is hope i wont stagnate as much! thank you!

Using re-natal, I have a view in which I have a few images. When loading/starting the app, the resources (images) are required about 15 times, which makes the load time 'long':

06-06 09:08:03.849 21701 21979 I ReactNativeJS: Requiring: react-native
06-06 09:08:03.853 21701 21979 I ReactNativeJS: Requiring: react-native-splash-screen
06-06 09:08:03.854 21701 21979 I ReactNativeJS: Requiring: react-navigation
06-06 09:08:04.081 21701 21979 I ReactNativeJS: Requiring: ./images/alert.png
06-06 09:08:04.093 21701 21979 I ReactNativeJS: Requiring: ./images/events.png
06-06 09:08:04.097 21701 21979 I ReactNativeJS: Requiring: ./images/drinks.png
06-06 09:08:04.100 21701 21979 I ReactNativeJS: Requiring: ./images/question.png
06-06 09:08:04.103 21701 21979 I ReactNativeJS: Requiring: ./images/chat.png
06-06 09:08:04.384 21701 21979 I ReactNativeJS: Done loading Clojure app
06-06 09:08:04.629 21701 21979 I ReactNativeJS: Figwheel: trying to open cljs reload socket
06-06 09:08:04.977 21701 21979 I ReactNativeJS: Figwheel: socket connection established
06-06 09:08:05.162 21701 21979 I ReactNativeJS: Requiring: ./images/alert.png
06-06 09:08:05.173 21701 21979 I ReactNativeJS: Requiring: ./images/events.png
06-06 09:08:05.180 21701 21979 I ReactNativeJS: Requiring: ./images/drinks.png
06-06 09:08:05.184 21701 21979 I ReactNativeJS: Requiring: ./images/question.png
06-06 09:08:05.188 21701 21979 I ReactNativeJS: Requiring: ./images/chat.png
06-06 09:08:05.384 21701 21979 I ReactNativeJS: Requiring: ./images/alert.png
06-06 09:08:05.392 21701 21979 I ReactNativeJS: Requiring: ./images/events.png
06-06 09:08:05.394 21701 21979 I ReactNativeJS: Requiring: ./images/drinks.png
06-06 09:08:05.397 21701 21979 I ReactNativeJS: Requiring: ./images/question.png
06-06 09:08:05.400 21701 21979 I ReactNativeJS: Requiring: ./images/chat.png
06-06 09:08:05.663 21701 21979 I ReactNativeJS: Requiring: ./images/alert.png
06-06 09:08:05.679 21701 21979 I ReactNativeJS: Requiring: ./images/events.png
06-06 09:08:05.684 21701 21979 I ReactNativeJS: Requiring: ./images/drinks.png
06-06 09:08:05.688 21701 21979 I ReactNativeJS: Requiring: ./images/question.png
06-06 09:08:05.693 21701 21979 I ReactNativeJS: Requiring: ./images/chat.png
...
06-06 09:08:08.001 21701 21979 I ReactNativeJS: Requiring: ./images/drinks.png
06-06 09:08:08.003 21701 21979 I ReactNativeJS: Requiring: ./images/question.png
06-06 09:08:08.006 21701 21979 I ReactNativeJS: Requiring: ./images/chat.png
06-06 09:08:08.100 21701 21979 I ReactNativeJS: true
06-06 09:08:08.102 21701 21979 I ReactNativeJS: true
...
06-06 09:08:08.138 21701 21979 I ReactNativeJS: true
06-06 09:08:08.140 21701 21979 I ReactNativeJS: true
06-06 09:08:08.544 21701 21979 I ReactNativeJS: Requiring: ./images/alert.png
06-06 09:08:08.549 21701 21979 I ReactNativeJS: Requiring: ./images/events.png
06-06 09:08:08.557 21701 21979 I ReactNativeJS: Requiring: ./images/drinks.png
06-06 09:08:08.560 21701 21979 I ReactNativeJS: Requiring: ./images/question.png
06-06 09:08:08.564 21701 21979 I ReactNativeJS: Requiring: ./images/chat.png

I fail to see why it would (try to) require the images over and over again.

@kurt-o-sys is the code run in a reagent component? Maybe it is rerun when rerendering that component. but still, it should not reload the image, because require()‘s are cached if i remember correctly

Do you defonce your images?

@ronb they're run in a rum component. Probably reran when rerendering, but I'm not sure why it would be rerendering all the time. Anyway, as you said: > it should not reload the image, because require()‘s are cached if i remember correctly

@pesterhazy No... it's hard coded now, e.g.

(defn chat-action [action-fn]
  (touchable-highlight {:onPress action-fn}
                       (image {:source (js/require "./images/chat.png")
                               :style  {:width 35 :height 35}})))

(defn action-button [img action-fn]
  (touchable-highlight {:onPress action-fn}
                       (image {:source (js/require img)
                               :style  {:width 35 :height 35}})))

(def chat-action (partial action-button "./images/chat.png"))

@kurt-o-sys i would suggest having top level require’s (defonce some-img (js/require “./images/chat.png”)) as. i never tried dynamic requires

@ronb thx, will I'll try.

Dynamic requires seem like a bad idea

@pesterhazy quick question: how do you handle the figwheel requires in boot-rn? I mean, you don't use a .re-natal file right?

correct

on initial load, the react-native packager interprets the require statements, replacing them with references to the modules

on boot reload, goog.require takes over

that's handled by boot-reload essentially

Right, but how to make it composable, if you can't use a function? It seems something like {:source {:url ...}} could work, although the only thing I want is adding a bunch of buttons (images) which react to an ':onPress' event. Defining macro's may solve this, but it's just weird that you can't use functions with an image path (static) as parameter and use them:

(defn ... [img ...]
  ...  
  (image {:source (js/require img) ...} ...)
  ... )

@kurt-o-sys not sure if i understand correctly but: if you know all images at compile time simply "defonce" the with the require statement such that react can process them. Then at runtime you decide which one to use and pass it as an argument. There is no need to call require inside the function

(defonce foo (js/require "path.png")) (bar foo other_arg)

Right. Makes sense. Wanted to avoid repeating js/require, but it's not a big issue to repeat it. Thx.