Fork me on GitHub
Oliver George00:01:15

Thanks @jeaye I'll check it out.


Sorry about my ignorance but in re-natal said to use npm i some-library --save and use (def Component (js/require "some-library/Component")) for use, what is the some-library/Component (Component) you have to use? I tried to use this with npm install --save react-native-tts how do I have to use "Component" in this library?


I tried to use re-natal enable-auto-require and do re-natal use-figwheel but I tried to use it like

(def TextToSpeech (js/require "react-native-tts"))
(def Speaking (.-Tts TextToSpeech))
(.speak Speaking "Hello somebody")
and is getting Component must be not nil. What am I missing?


@fabrao I think you are doing it right but I can be wrong. I recommend you to run those commands one by one in the REPL and check that each of those is correctly giving you a value back. I guess that since you are not getting an error on require it might be that there is a typo somewhere


@carocad I tried many libs with no success, do you have any lib that you had success with it?


@fabrao so far I have had no problems with any lib. I currently use react-navigation and native-base from JS and many others from Clojure. You can check @deg description for steps by steps instructions 😉


@carocad to understand the right use, in case of using react-native-something, what is the use of Component in react-native-something/Component? Don´t I have to use only react-native-something?


@fabrao Have you tried (js/console.log (js/require "react-native-something")) to see if you got the library imported? Sometimes you need to use (.-default (js/require "react-native-something")) if they use the es6 export syntax


@vikeri I did not. I´ll give a try to see what is the value. I tried with (alert (str (js/require "react-native-something"))) and gave me [Object]


It’s IMO nicer to debug in the Chrome console using


The result indicates that you found the library though


Even runing it from android device?


Yeah even running it on a device


So, I'm playing with an app built on expo-cljs-template, using exp and genymotion. The debugging environment seems absolutely awful -- I'm getting absolutely no useful stack traces, and I'm often getting components that render as blank, with no clue about what is wrong. Is this env really so bad, or am I doing things wrong? How does one debug this stuff?


Not using expo, but sometimes when I get an error before everything is properly initialized I have to go into sources and click pause for exception to see where the error is actually thrown in my cljs code


What do you mean "go into sources"? I've got Emacs for my source; lein figwheel and exp start --android in terminals; and the genymotion emulator window. Am I missing some tool in my setup?


Sorry, sources in the chrome debugger


How do I attach the chrome debugger?


Ah! I had tried this earlier, but it failed. I think at this stage: "This should open up a Chrome tab with the URL http://localhost:19001/debugger-ui". It did not open that tab. Instead, it warned me, weirdly, that Chrome was not my default browser! I will try again now, opening that tab manually. I wonder if the problem is a confusion because of Chrome Beta and (I think) standard Chrome both on this machine??


I see, well that will make debugging a lot more pleasant 😉


Thanks. Will try. (first, I need to roll back my last few minutes of source change., so things work again).


I'm now staring at a POS worthless stack trace of "Error rendering component" with the stack only showing functions in ReactNativeFireb-dev.js. No reference to my code at all.


Remote debug working now. I had hit two problems: 1) My careless reading of the instructions. details irrelevant, but maybe I'll embarrass myself later with a warning about them in my doc. 2) Looks like it is opening some highly customized chrome. <chrome://about> does not work for example, and it opened as one of my non-default chrome personas. Only real consequence is that this gave me a red herring "chrome isn't your default browser" warning, so I missed problem 1.


Anyway, past that hurdle. I suspect that the debug env is pretty dreadful, so I'll be back with more questions later, but let's see how far I can get now that I have the chrome debugger.


Yup, thanks. I've not installed yet in this app, but I do use it heavily in my normal CLJS work. I'll add a mention into my doc too.


@deg I have not tried using cljs-devtools but the chrome devtools work wondefully for me. There is a catch though. For some reason, some versions of Linux use a different name for chrome; something like chrome-canary. When that is the case, things just explote in your face. I think the experience in a Mac is a bit more consistent.


as for the stacktraces, I generally debug with Chrome devtools since the Expo template has source-maps enabled so I can go see exactly which line of my Clojure code is causing the problem. In the devtools just choose “stop on exception” and “stop on catched exception” and then you will probably see everything


but that all takes time to get use too if you have never used Chrome devtools 😉


I'm mostly familiar, thanks. I've used the tools in CLJS web-dev. I'm just climbing the emulator and Android sides of the learning curve now.


But, this really does call out for someone to write a book about the whole flow. There are a lot of parallel and intersecting knowledge bases needed here.


yeah definitely it is not a straightforward thing


I'm looking at remote debugging, both in the Chrome browser and in the standalone version of the React Developer Tools. In each, I'm having trouble inspecting elements. - In the browser dev tools, I don't have a "React" tab. The "Elements" tag inspects elements of the chrome window with the help text. How can I inspect my app? - In standalone react-devtools, things are somewhat better. I do see the React DOM. But, I don't see any easy way to select an element. I'm used to normal chrome dev, where I would right-click an element and choose Inspect. Is there any equivalent here.


Well, I found a partial answer in the React chrome extension is documented not to work with React Native.


I don't know about android, but on ios you can access a menu with 'toggle element inspector' by pressing apple-D


if devtools is not open, you can click around on the simulator to inspect elements


if devtools is open, the inspect menu in the simulator will be smaller but you'll still be able to click elements, and they'll show in the devtools


(oh yeah you need to install react-devtoolsstandalone with npm install -g react-devtools)


you just found that it looks like L)


ah apple-m in android


Clicking on the Genymotion emulator for Android does not seem to do any of this.


do you get this?


when you click this


Thanks.I missed that "toggle ..." entry... Head-slapping self.


I'm surprised, though, that it shows it at the bottom of the emulator, and not in the Chrome Inspector.


Ah, but it does seem to work in the standalone react-devtools


So, is there no support for remote Inspect in the Chrome Dev Tools?


not as far as I know