Fork me on GitHub
#cljsrn
<
2017-06-28
>
manutter5100:06:46

@aj @pesterhazy in case you’re curious, the solution was to remove the (overlooked) caret from the line "react-native-svg": "^5.1.8", in package.json. I was trying to downgrade to an earlier version of react-native-svg, but was getting the later version, which had a breaking change.

aj taylor00:06:46

Thanks for the update!

thheller10:06:17

would anyone be interested in using CLJS with create-react-native-app? I made a quick example here: https://github.com/thheller/shadow-cljs-examples/tree/master/cljs-react-native-app

thheller10:06:04

I don’t do any react-native development myself but interop with JS packages should be much simpler and doesn’t require cljsjs packages

manu13:06:14

Hi, in order to have StackNavigator with the horizontal animation (on Android), I followed the instructions on this issue https://github.com/react-community/react-navigation/issues/1759 . The problem is that by importing CardStackStyleInterpolator i got this warning

Requiring module 'react-navigation/src/views/CardStackStyleInterpolator.js' by name is only supported for debugging purposes and will BREAK IN PRODUCTION!
Is there another way to require CardStackStyleInterpolator? Thanks

pesterhazy13:06:14

@thheller advantages over re-natal?

thheller13:06:53

you tell me .. re-natal (and all other templates) looked quite complicated to me

thheller13:06:28

I just use create-react-native-app .. no tweaks other than adding a config for shadow-cljs

thheller13:06:51

not saying that this is any better … just wanted to show an alternative that might integrate “better” with existing JS code

pesterhazy13:06:35

no you tell me 🙂

thheller13:06:06

(ns demo.app
  (:require ["react" :as react :refer (createElement)]
            ["react-native" :as rn :refer (Text View StyleSheet)]))

thheller13:06:14

thats prettier than re-natal? 😛

thheller13:06:34

less boilerplate code?

thheller13:06:57

I don’t know … never used any of the templates in a real project

pesterhazy13:06:31

The boilerplate doesn't bother me very much (you need a ton of boilerplate for the XCode project etc. anyway). More important are compilation speed, live reloading (figwheel-like), reliability, how easy it is to integrate with js projects, ease of upgrading react-native versions

thheller13:06:59

it uses the built-in live-reloading from CRNA, compile speed should be faster or equal to figwheel, more reliable, it is CRNA so integration seems solid

thheller13:06:09

no idea how CRNA handles updates but the same applies

thheller13:06:27

I used CRNA since that seems to be the recommended “getting started” project

thheller13:06:23

I did the basic example … and thats it. re-natal has a ton more “experience” behind it

zlrth14:06:29

i’m having a really hard time using react-native components with use-component. my latest attempt is using react-native-multi-slider. i have

(def Slider (js/require "@ptomasroos/react-native-multi-slider/MultiSlider"))

(def slider (r/adapt-react-class (.-MultiSlider Slider)))
in my core.cljs file, and in the repl
(js/require "@ptomasroos/react-native-multi-slider/MultiSlider")
evals to
#js {:default #object[MultiSlider "function MultiSlider(props) {
 [rest elided]
so i assume i re-natal use-componentd correctly. but this in the repl (and in the simulator) fails:
(def slider (reagent.core/adapt-react-class (.-MultiSlider Slider)))
#object[Error Error: Assert failed: c]
Error: Assert failed: c
because (.-MultiSlider Slider) returns nil, not the component. i’m at a loss as to why.

zlrth14:06:55

I know unfortunately little about javascript and react. i believe that (.-MultiSlider Slider) is the correct function call because in MultiSlider.js there’s the line:

export default class MultiSlider extends React.Component
i wish i knew how to list properties of javascript objects in clojurescript. 😐

carocad14:06:12

@thheller did you do live cljs dev, compile and deploy or was it more like compile, reload the app, repeat?

manu14:06:39

@mfm (def Slider (js/require "react-native-multi-slider")) Did you try to require in this way?

thheller14:06:30

@carocad not sure I understand the question? shadow-cljs watch app auto-compiles and the react-native packager reloads the code?

thheller14:06:11

could also disable the built-in live reload and let shadow-cljs do it

thheller14:06:16

didn’t look into that

zlrth14:06:44

@manu I get #object[Error Error: Unknown named module: 'react-native-multi-slider'] Error: Unknown named module: 'react-native-multi-slider' just now. searching the archives of this slack, i’ve heard you’re supposed to require it exactly as you npm installd it.

carocad14:06:19

@thheller yes but that is the “basic” approach in Cljs. My question is rather, when the app reloads, do you loose the current state? or is it kept like using fighweel with reagent/om, etc

manu14:06:24

@mfm how did you install it? can you see it in the package.json and .re-natal files?

zlrth14:06:43

(i also just tried all combinations of “@ptomasroos” “react-native-multi-slider” “MultiSlider” and got the same error)

thheller14:06:46

I don’t know what the default built-in reload does, it probably just resets the state?

manu14:06:19

@mfm are you using re-natal?

zlrth14:06:31

i did npm install --save @ptomasroos/react-native-multi-slider then re-natal use-component @ptomasroos/react-native-multi-slider/MultiSlider

thheller14:06:58

is there documentation on the reloader from react-native?

zlrth14:06:28

in package.json i see: "@ptomasroos/react-native-multi-slider": "0.0.8" and in .re-natal : "@ptomasroos/react-native-multi-slider/MultiSlider"

carocad14:06:37

@thheller would you mind doing the experiment and letting us know since you already have everything setup 🙂 ? I think it should be pretty simple to setup. A text input would suffice. Simply set its content to a ratom and afterwards change its style. That should trigger compilation. If the state is kept only the style should change, otherwise your text input would be reset.

manu14:06:41

@mfm ok, you did wrong the re-natal installation. you have to do re-natal use-component @ptomasroos/react-native-multi-slider

vikeri14:06:51

@kurt-o-sys I remember talking about BLE with you. What manufacturer of BLE chips are you going to use?

kurt-o-sys14:06:25

right... I don't know yet. It's a side-project, and I haven't had time to move forward with it the last 6 weeks - especially since my co-dev was not available 😛. You plan to use one yourself?

vikeri15:06:19

Haha ok. Yeah we’re using Nordic Semiconductor NRF52. Can really recommend Nordic, really good tools. And we’ve developed a lib for updating the BLE chip OTA which is neat if yo’du need that.

kurt-o-sys15:06:33

oh, nice! thanks for your advice 🙂. I may come back to you one day, if we get to the point where we do some hardware-stuff.

vikeri15:06:54

:thumbsup:

zlrth14:06:37

@manu interesting. the docs say do re-natal use-component some-library/Component

zlrth14:06:05

i’ll try it without Component. do you know if i can just edit the .re-natal file?

manu14:06:05

@mfm delete the wrong component from the file and install properly the right component 🙂

zlrth14:06:19

thx. working on it…

manu14:06:41

@mfm then on the core.cljs (def Slider (js/require "@ptomasroos/react-native-multi-slider")) (def Multislider (.-MUltislider Slider))

zlrth15:06:05

@manu i still get a assert failed: c and (.-MultiSlider Slider) evals to nil

manu15:06:06

Someone knows how can I require a component that is not available into the API and avoid this warning

Requiring module 'react-navigation/src/views/CardStackStyleInterpolator.js' by name is only supported for debugging purposes and will BREAK IN PRODUCTION!
? Thanks

manu15:06:42

@mfm on the repl type (.keys js/Object Slider). can you see MultiSlider?

thheller15:06:04

@carocad confirmed that the default reloader kills all state, I’ll update the example to use the better reloader 😉

zlrth15:06:05

i get `#js [“default”] `

manu15:06:00

@mfm and with (.keys js/Object (.- default Slider))?

zlrth15:06:00

(thanks for (.keys js/Object [thing]), i’ve been looking for something like that for a long time)

zlrth15:06:30

----  Could not Analyze  <cljs form>   line:1  column:18  ----

  Unknown dot form of (. default - (Slider)) with classification [:cljs.analyzer/expr :cljs.analyzer/property :cljs.analyzer/expr]

  1  (.keys js/Object (.- default Slider))
                      ^--- 

----  Analysis Error  ----
nil

carocad15:06:42

@thheller nice to know. Thanks for the input ! but what do you mean by the better reloader?

manu15:06:32

@mfm takeoff the space befor default

thheller15:06:51

@carocad hmm wait .. there is live reloading and hot reloading. hot reloading does preserve state. by better I mean the built-in from shadow-cljs which is like figwheel

zlrth15:06:59

@manu #js ["propTypes" "defaultProps"]

manu15:06:44

@mfm in the same way try to looking for multislide

zlrth15:06:46

trying both of those in the repl:

(.-propTypes Slider)
nil
testingupdaterenatal.ios.core> (.-defaultProps Slider)
nil

zlrth15:06:07

yeah. i’m flummoxed.

manu15:06:54

@mfm you should do (.keys js/Object (.-propTypes (.- default Slider)))

zlrth15:06:45

#js ["values" "onValuesChangeStart" "onValuesChange" "onValuesChangeFinish" "sliderLength" "touchDimensions" "customMarker" "min" "max" "step" "optionsArray" "containerStyle" "trackStyle" "selectedStyle" "unselectedStyle" "markerStyle" "pressedMarkerStyle"]
i think i’m starting to understand

zlrth15:06:11

and:

(.keys js/Object (.-defaultProps (.-default Slider)))
#js ["values" "onValuesChangeStart" "onValuesChange" "onValuesChangeFinish" "step" "min" "max" "touchDimensions" "customMarker" "sliderLength"]

zlrth15:06:30

but i’m still looking for MultiSlider of some sort right?

manu15:06:50

@mfm yeah defnitely..

manu15:06:20

@mfm I don't know where it can be.. :thinking_face:

carocad15:06:29

@thheller oh wait … you are the developer of shadow-cljs?

carocad15:06:07

and I was a bit confused, I though that you were using a vanilla create-react-native-app. My mistake

thheller15:06:53

carocad: yes I am and I am using vanilla create-react-native-app?

carocad15:06:32

yes but you have a three steps build process right? Something like cljs -> shadow-cljs -> js -> create-react-native-app -> native app

carocad15:06:12

I thought that we were only discussing about replacing the rn packager with crna which is why I said I was mistaken

thheller15:06:58

AFAICT CRNA is just a project template for react-native+expo

carocad15:06:58

from what I understand, in theory yes, it should be. In practice I think they havent reached that state yet. From their readme Install the Expo app on your iOS or Android phone, and use the QR code in the terminal to open your app. Does this mean that you cannot use a different approach?

carocad15:06:50

I definitely like not having to install android studio nor xcode but if I get chained to a specific way of developing apps then that is another story 😕

thheller15:06:07

I have no idea how all that works. It works as advertised in development but no idea about actually publishing the app

thheller15:06:36

but you can definitely opt out of expo and do the manual thing

carocad15:06:15

yeah I think that would be very interesting 🙂

carocad15:06:04

on a related topic. Your shadow-cljs library compiles files down to node-compatible-require right? like require('some-cljs-file')

thheller15:06:36

it can do that yes

carocad15:06:40

do you have an example of that. It would be very very interesting. The boot-react-native project currently hacks the packager to get that working

thheller15:06:19

this is the example

thheller15:06:38

it generates code into node_modules/shadow-cljs

carocad15:06:49

yes but that project has all react-native stuff in it. I was just wondering if I can test it without any relation to react native. My point is that if a developer can get a compilation that is independent of google closure then that would reduce all the boilerplate that we are all dealing with and it would also be independent of the packager used around the compiled files 🙂

thheller15:06:47

thats how the generated code looks

thheller15:06:38

but the react-native packager really doesn’t seem that great

thheller15:06:59

probably best to stay away from it 😉

carocad15:06:24

https://gist.github.com/thheller/74473e8b9ca2b795962d0f65fdecf8af#file-shadow-cljs-code-gen-js-L12 😞 I thought that you were replacing the goog.require with node-like requires

carocad15:06:50

yeah nobody likes the packager that much. But it is what it is so for the time being we have to deal with it

thheller15:06:51

I do. it is a noop.

thheller15:06:29

require("./cljs.core.js"); in L2 is the actual require

carocad15:06:35

you might want to check a project call haul which is an alternative to rn packager. Though it didnt work for me when I tried it 😆

thheller15:06:15

yeah haul works

thheller15:06:21

but I want to integrate with the react-native packager since that is the “official” thing

thheller15:06:37

not sure how well others work with updates and such

carocad15:06:56

I think the problem is that the rn packager scans the js files for matches to require(....) so even if you assign goog to your internal require it would still cause problems. That is actually the same approach taken by the figwheel-bridge used by re-natal

thheller16:06:03

uhm this is using the native require

thheller16:06:25

the goog.provide/require is a no-op, so just pretend it isn’t there

carocad16:06:38

I think we are talking about different things hehe. I can pretend it is not there, no problem 😉 but afaik the rn packager wouldnt do that. In any case I will like to test your lib and see how well does it play with the current status

manu15:06:35

@mfm if you require it by (js/require "@ptomasroos/react-native-multi-slider/MultiSlider ") do you get an error?

zlrth15:06:45

i don’t get an error

zlrth15:06:31

oh whoops yes i do, because i reinstalled the lib

zlrth15:06:37

but i didn’t used to

manu15:06:49

@mfm ok so lets require it in this way, and use the keys method to watch what there inside it

zlrth15:06:55

definitely. @manu thanks for all your help so far. i have to go to a meeting, but i’ll be back here working on this when i’m done. i’ll ping you, and if you’re here and want to help out, that’d be great. in any case, thanks much! .keys js/Object is great.

manu15:06:59

@mfm you are welcome 😉 I'm still a beginner, but if I can help you i will 🙂