Fork me on GitHub
#cljsrn
<
2018-05-01
>
psylinse02:05:20

hey everyone, I'm wondering if any of you have tips on how to debug a re-natal app. I'm don't see a clear way of going from a redbox error to the line that's mistaken in my code, beyond knowing what I changed/trial and error. For example, I'm missing a depedency on alert from react native but I get a "Cannot read property 'call' of undefined" and a fairly unhelpful stacktrace. I realize that this is a fairly complex problem, just want to see if there's any tips/tricks for understanding these errors. My bad if I'm missing something obvious, new to both cljs and rn. Below is an example screenshot of what I see:

mfikes02:05:19

@jeff434 A few things can help 1) Enable remote debugging via the "context menu" so that it has things running in Chrome 2) Set things in Chrome to stop on the first exception 3) Enable source maps via re-natal

mfikes02:05:32

Ask any any of those are not clear

psylinse02:05:58

hey, that helps a lot, thank you! I'm seeing the function call that fails

psylinse02:05:43

any ideas on hiccup errors? If I forget to import a react component, it's even more cryptic. In this case I forgot to import (def text (r/adapt-react-class (.-Text ReactNative))) for the expression [text {:style {:font-size 30}} "text"] https://bischmeyer.com/index.php/s/dKyTbTcKQSxMbRd

psylinse02:05:07

(this one's not a huge deal, just curious how you'd approach that one)

mfikes02:05:55

In that case, I would expect your use of text to cause an Use of undeclared Var warning from the compiler.

psylinse02:05:55

ah, yeah, I do see those in the yellow box, how would I see that on the command line?

madstap03:05:56

Can anyone point me towards any resources on how to do navigation? I've only done websites before where there's a url...

gnl10:05:14

@madstap I've tried a number of different navigators and the RN situation around them has been quite a mess, really, and still kind of is. In my experience, if you're doing iOS nothing beats the native navigators in terms of fluidity at the moment. I couldn't get React Navigation to do smooth transitions on some screens and before I dove into coming up with all kinds of convoluted black magic to defer rendering and whatnot to make it feel nice, I figured it shouldn't be this hard and I just tried NavigatorIOS, which is what I ended up using with some additional code to make its imperative API fit into re-frame. It has a limited feature set, though, so for a drawer I use https://github.com/react-native-community/react-native-side-menu . NavigatorIOS used to be deprecated, but that decision seems to have been reversed without much fanfare. An alternative would be https://github.com/wix/react-native-navigation, which is a more complete native navigation solution, but doesn't seem to work with hot-reloading at the moment as it integrates without using a root component. If someone has got it to work with Figwheel/Shadow CLJS, I'd be interested to hear about how they did it.

danielneal11:05:00

I use react-native-animated directly

carocad11:05:35

@madstap I currently use cljs-rect-navigation. The library is maintained but mainly through community contributions. As @clojurians.net mentioned, transitions between screens are a hairy topic for react-navigation lib and it is not different for cljs-react-navigation. I have it working with my project but I am currently not interested in nice animations which is why I have no problem with it 😄

pesterhazy14:05:00

@jeff434 the other thing to try when debugging in to run react-native log-ios. It gives you access to the stdout of your iOS process

pesterhazy14:05:38

Personally I never use the Chrome debugging feature. I rely exclusively on judicious placement of prns and stacktraces

psylinse14:05:26

I'll try that, thank you