@kenny: are you starting the dev env using boot dev? How/where do you call myns.core.main?

guys, anyone have example of PanResponder usage with cljs?

@seantempesta: greetings, did you figure this one out? https://clojurians-log.clojureverse.org/cljsrn/2016-02-14.html

@misha: I think it might have to do with sourcemaps. Did you run re-natal enable-source-maps?

gentlemen, I sort of found input with custom keyboard and suggests component: https://github.com/nulrich/RCTAutoComplete which is a wrapper around https://github.com/EddyBorja/MLPAutoCompleteTextField However I can't get it to actually show any suggests, and the only anomaly I see is very similar to https://clojurians-log.clojureverse.org/cljsrn/2016-02-14.html The symptoms are: 1. set breakpoints inside native objective c code, e.g. in

//  MLPAutoCompleteTextField.m
- (void)expandAutoCompleteTableViewForNumberOfRows:(NSInteger)numberOfRows

@vikeri I probably did not. thanks

react bridge event gets sent on every key stroke though.

note: to make it compile I did:

//node_modules/react-native-autocomplete/RCTAutoComplete.ios.js, line 1
- var React = require('react-native');
+ var React = require('react');

hm, I have this error too https://clojurians-log.clojureverse.org/cljsrn/2016-02-14.html. But app work fine

¯\(ツ)/¯

@savelichalex: @vikeri is right, it is source maps related, has nothing to do with the component above

@savelichalex: how do I do equivalent of this in cljs?

var RCTAutoCompleteApp = React.createClass({
...
    onTyping: function (text) {
        this.setState({data:  ["a", "b", "c"]});
    },
...

reagent?

no, but show me at least reagent

@misha, use a private atom bound in a clojure

@pesterhazy: I am using RCTAutoCompleteApp, not writing it

so i need to:

(RCTAutoCompleteApp {:onTyping #(<call this.setState() here>)})

(defn my-handler [e]
  (this-as this
    (.setState this #js [1 2 3])))

(RCTAutoCompleteApp {:onTyping my-handler})

you can do something like that yes, though it seems a hacky api on the library author's part

this is with r/atom

hm, understand you)

wait a minute)

you need ref

@savelichalex: I know how to do it, when I am the author of a component. What I need instead – is to be able to call someone else's component's method from my own function which I pass in props

@savelichalex: do you have an example? how does it work? do I assign ref to a component myself, and then use it? how do I access it later?

@sam.roberton: hey, I saw that you contribute some code to boot-react-native. Moving everything to a boot tempdir is a good idea, but it breaks the simple example app. Any idea how I can get around https://github.com/mjmeintjes/boot-react-native/issues/50 ?

@savelichalex: rum version:

(defn get-ref [state ref-name]
  (aget (aget (:rum/react-component state) "refs") ref-name))

(rum/defcs page [state]
  (let [pr-ref #(js/console.log (get-ref state "yoyo"))]
      (rum/with-ref
        (rn/Autocomplete {:onFocus pr-ref, ...})
      "yoyo")

@misha: got it) need repo with cheatsheets)

true

https://github.com/tonsky/rum/blob/gh-pages/examples/rum/examples.cljs

Is lein figwheel android the only way to locate errors?

"Waiting for figwheel to load files.." didn't go away so tried manually invoking functions from the repl

future-app.android.core=> (init)
#object[Error Error: schema check failed: {:data (not (sequential? a-object))}]

;; schema of app-db
(def schema {:greeting s/Str
             :data [s/Str]})

;; initial state of app-db
(def app-db {:greeting "Hello Clojure in iOS and Android!" :data (into-array (map str (range 1 100)))})

i think the right way is (into [] (map …))

May I ask what's the difference between those two?

Because the app does respond differently

One returns a js version and the other doesn't?

idk… in clojure it seems some interop fn, as it returns #object["[Ljava.lang.String;" 0x72c1be38 "[Ljava.lang.String;@72c1be38”]

yeah, into-array is for interop

future-app.android.core=> (into [] (map str (range 1 100)))
["1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31" "32" "33" "34" "35" "36" "37" "38" "39" "40" "41" "42" "43" "44" "45" "46" "47" "48" "49" "50" "51" "52" "53" "54" "55" "56" "57" "58" "59" "60" "61" "62" "63" "64" "65" "66" "67" "68" "69" "70" "71" "72" "73" "74" "75" "76" "77" "78" "79" "80" "81" "82" "83" "84" "85" "86" "87" "88" "89" "90" "91" "92" "93" "94" "95" "96" "97" "98" "99"]
future-app.android.core=> (into-array (map str (range 1 100)))
#js ["1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31" "32" "33" "34" "35" "36" "37" "38" "39" "40" "41" "42" "43" "44" "45" "46" "47" "48" "49" "50" "51" "52" "53" "54" "55" "56" "57" "58" "59" "60" "61" "62" "63" "64" "65" "66" "67" "68" "69" "70" "71" "72" "73" "74" "75" "76" "77" "78" "79" "80" "81" "82" "83" "84" "85" "86" "87" "88" "89" "90" "91" "92" "93" "94" "95" "96" "97" "98" "99"]

into-array (into-array aseq) Returns a new JavaScript array from the elements of aseq.

The purpose of #js still confuses me

Does it mean it will get translated to js?

#js is a reader tag, it means, read the thing that comes next as a JS array or JS object instead of a vector/map

if you use it in clojurescript code it will output JS with a literal array/object instead of a vector/map

vs if you do this (clj->js [1 2 3]) then the compiled JS will have a clojurescript vector, plus a function call to covert it

there’s even cljs->js and js->cljs helper fns to convert between both types

hate to plug too shamelessly but I just did a whole screencast on all these things (paywall) https://lambdaisland.com/episodes/clojurescript-interop

long story short: clj-js and js->clj will convert recursively between array/object and vector/map

whereas #js only works on a single level

so (clj->js {:foo [:bar]}) would equal #js {:foo #js [:bar]}

also two tips: avoid using js->clj on large data structures, it's not designed for that and will not perform well

Will be needing all the help I can get to understand these 🙂

and secondly, beware of strings vs keywords

Therefore, no plug is shameless to me 😛

(clj->js {:foo :bar}) will do what you want, i.e. create a js object with a "foo" key

The error that's popping up now is "Requested keys of a value that is not an object"

but (js-obj :foo :bar) will create a ":foo" key, so in JSON {":foo": ":bar"}

Wow, those are very informative, a beginner like me would certainly trip over

from a quick google it seems that's a JS error message, not a ClojureScript error message

I think it means Object.keys is being called with something that isn't a JS object, like a primitive or an array

This doesn't work:

[listview {:style {:paddingLeft 8 :paddingRight 8 :flex 1}
                   :dataSource (.cloneWithRows (datasource. #js {:rowHasChanged not=}) (clj->js @data))
                   :renderRow get-row}]])))

The function containing that snippet has subscribed to data

not that the literal [1 2 3] creates a vector, not an array. Important distinction (the latter is mutable)

My bad, it was working just fine, that error is from a different section

Thank you very much everyone, I really appreciate the help I'm getting here 🙂

eponysterical!

do you guys know any project aiming to be a RN-compatible cljs-ajax-like library? i’m really sad for having to use js/fetchfor this 😞

Let's just fix cljs-ajax, or rn

Surely there just is a bug somewhere in the android code

Have you tried the latest RN?

yep, 0.26.0

Maybe a custom back end for cljs-ajax based on fetch?

yeah, that’s what I was thinking. there’s also xmlhttprequest polyfill

I thought fetch was a polyfill implemented on top of xhr, in RN at least

idk how’s fetch implemented, but as xhr is already there, it may be an easier starting point (but there’s already limitations: see https://github.com/facebook/react-native/issues/5347 and https://github.com/JulianBirch/cljs-ajax/blob/master/src/ajax/xml_http_request.cljs#L20

Why does the println not get called?

future-app.android.core=> (.then (js/window.fetch "") #(println %))
#object[Promise [object Object]]

@debug: are you use (enable-console-print!) ?

I didn't know about it, just did that but still it doesn't work

Regular println works though

future-app.android.core=> (println "Hello")
Hello
nil

hm, you tryied in repl?

yes in the repl

and you're sure your promise resolves and doesn't reject?

(.then (js/window.fetch "") #(println %) #(println "rejected" %))

println can sometimes be a little bit flaky in RN in my experience

future-app.android.core=> (.then (js/window.fetch "") #(println %) #(println "rejected" %))`
#object[Promise [object Object]]

try calling console.log directly (and make sure you're tailing the right log)

also try non-https

future-app.android.core=> (.then (js/window.fetch "") #(js/console.log %) #(js/console.log "rejected" %)) 
#object[Promise [object Object]]

Still the same

try explicitly setting the method to GET, or POST (to see if you at least get an error)

also use .then and .catch instead of passing two args to .then

^^ here's what I use

@pesterhazy: Sorry for the delayed response.. I’m just going to ignore that problem until I figure out how to get the example project working… I am able to run the project and see the app in my emulator, however, if I can the hello world text it does not update in the app. Is there any additional steps I need to do in order to see the app updated?

no, it should work (if you're using boot dev)

do you see messages about reloading in the debug output?

Yes I am. The cljs recompiles. Nothing about reloading the app

is this ios or android?

Android

I have not changed anything from the example project.

Besides the hello world text.. 🙂

if you reload (shake the device and click reload), does it refresh then?

How would I do that in an emulator?

there's a menu item (hardware?)

Ah I see it.Reload JS?

yup

Oh wait there is an option called “Enable Live Reload"

Lol that solved it

Maybe worth adding that to the docs if you are using Genymotion emulator

I think that option didn't used to exist

I think it was enabled by default

Not anymore 🙂 Brand new laptop and installed everything fresh yesterday

Do you know if boot-react-native works with boot 2.6.0?

I don't see why not

haven't tried it though

boot-react-native badly needs updating, code and docs

It’s just the example project has a boot.properties with an explicit BOOT_VERSION=2.5.5

Agreed

Though that is probably just old as 2.6.0 is relatively new

yeah maybe it's worth removing that explicit line

Do you use boot-react-native?

yes, extensively

we're relying on it for building our app

I really want to use it but the lack updates and docs make it difficult for someone new to react native. I really don’t want to use re-natal because of leiningen.

https://github.com/mjmeintjes/boot-react-native/issues/51

I propose to add things to the ticket, I plan to work on brn in the next weeks and to bring it into shape

Do you have a more up to date example project?

(-> (js/fetch "") (.then #(js/console.warn %)))

yeah, React Native takes over console.warn sometimes

@kenny: that's part of what I want to work on

I tried to update to React Native 0.26 but ran into issues unfortunately

I really like BRN's approach of leveraging the RN packager

I really think that re-natal and BRN need to come together. If we are to make a great cljsrn library there needs to not be fragmentation.

Looks like there is discussion about this: https://github.com/drapanjanas/re-natal/issues/53

yeah, I've commented there

need to take some time to understand the pros and cons of brn vs re-natal

but yeah it'd be nice to get more overlap

I guess only the "live dev env" part actually differs, whereas building offline bundles is pretty similar

Seems like it. boot reload vs figwheel.

Do you know how willing mjmeintjes is to accept PRs?

He's always been helpful and quick to respond

Guys what’s wrong with leiningen? There is smth that I don’t know? Are you have some explanation about boot vs lein?

@savelichalex: There is an inherent problem with declarative DSLs. It is trying to be a build tool by creating an all encompassing DSL, however, the problem is solved much better by just doing things through code: boot.

looks like gulp vs webpack in js world:smile:

boot is particularly well suited for this type of problem: continuously updating files as a result of file watch events

you can also, conceivably, run the backend and frontend in the same boot instance

I've wasted too much of my life running "npm install"

Has anyone used Rum with boot-react-native? I seem to be having problems getting it to work:

(set! js/React (js/require "react-native/Libraries/react-native/react-native.js"))
(defonce react (js/require "react-native/Libraries/react-native/react-native.js"))

(defn create-element [rn-comp opts & children]
  (apply js/React.createElement rn-comp (clj->js opts) children))

(def app-registry (.-AppRegistry react))
(def view (partial create-element (.-View react)))
(def text (partial create-element (.-Text react)))

(defc AppRoot
      [state]
      (view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
            (text {:style {:fontSize 30 :fontWeight "100" :marginBottom 20 :textAlign "center"}} "CHANGE THIS: HELLO WORLD")))

(defn mount-app [] (support/mount (AppRoot app-state)))
(defonce root-component-factory (support/make-root-component-factory))
(defn ^:export main
  []
  (enable-console-print!)
  (js/console.log "MAIN")
  (.registerComponent (.-AppRegistry react)
                      “MyApp"
                      (fn [] root-component-factory))
  (mount-app))

Actually figured it out.. You need to copy re-natal’s “hack.”