@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.

Thanks for the update!

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

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

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!

@thheller advantages over re-natal?

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

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

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

no you tell me 🙂

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

thats prettier than re-natal? 😛

less boilerplate code?

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

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

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

no idea how CRNA handles updates but the same applies

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

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

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

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

#js {:default #object[MultiSlider "function MultiSlider(props) {
 [rest elided]

(def slider (reagent.core/adapt-react-class (.-MultiSlider Slider)))
#object[Error Error: Assert failed: c]
Error: Assert failed: c

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

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

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

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

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

didn’t look into that

@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.

@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

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

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

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

@mfm are you using re-natal?

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

is there documentation on the reloader from react-native?

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

@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.

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

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

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

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

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

thx. working on it…

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

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

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!

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

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

i get `#js [“default”] `

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

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

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

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

@mfm takeoff the space befor default

@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

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

@mfm in the same way try to looking for multislide

trying both of those in the repl:

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

yeah. i’m flummoxed.

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

#js ["values" "onValuesChangeStart" "onValuesChange" "onValuesChangeFinish" "sliderLength" "touchDimensions" "customMarker" "min" "max" "step" "optionsArray" "containerStyle" "trackStyle" "selectedStyle" "unselectedStyle" "markerStyle" "pressedMarkerStyle"]

😁

and:

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

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

@mfm yeah defnitely..

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

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

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

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

i don’t get an error

oh whoops yes i do, because i reinstalled the lib

but i didn’t used to

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

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.

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