Fork me on GitHub
#cljsrn
<
2017-09-19
>
raspasov04:09:48

@bhauman I assume this on MacOS, yes? What’s your XCode version?

raspasov04:09:08

@bhauman let me know if you’re still unable to do run the FutureApp, happy to help!

raspasov04:09:45

I have gotten figwheel, re-natal etc to build from within Cursive/IntelliJ, but to start just from the terminal might be simpler, try those (assuming your FutureApp got created correctly: step 0: Go to the .re-natal file inside your project, it should be a JSON file. You can probably have “localhost” under platforms.ios.host if you’re running on the simulator; If you’re trying to run it on a device (potentially harder initially) you need to add your Mac’s local IP there AND your router must allow connection between your Mac and the iOS device to go through (can be tricky, it really depends on the network settings, but if it works it should keep working) step 1: re-natal use-figwheel (I always run this) step 2: lein repl step 3: (start-figwheel "ios") this should compile your ClojureScript and stop at: “Prompt will show when Figwheel connects to your application” step 4 (from another Terminal window start the React Native packager): react-native start --nonPersistent --skipflow PERSONALLY I have found that always starting the packager AFTER compiling the ClojureScript is the most reliable way… anytime you add React Native libraries, images, etc to your project it’s the safest to restart the packager; they’ve done some improvements where it might not be needed to restart but I haven’t kept up with the announcements+I don’t trust it (ha!)

raspasov04:09:33

@bhauman lmk if this works and if any of the steps result in problems… it can be tricky to “align” everything correctly the first time and the setup might seem “non-deterministic” if you don’t do the steps in the “correct” order… it probably took me a few weeks a year ago when I started with RN to get everything to compile “reliably” most of the time

raspasov04:09:54

oh also RN lingo: packager ~= metro-bundler, they changed the name/project a few months ago

rovanion06:09:37

Here's a thing I don't understand. After about every re-natal command I'm told to run re-natal use-figwheel, why is this not done automatically?

psdp09:09:20

@tiensonqin Sorry to bother you again. But I think you may be the only person can help me with this. So I decided to switch back to use rum + expo-navigation, and abandoned react-navigation due to some capability issues I was facing when using react-navigation. But now I cannot figure how to pass a react component to the router. Please see below snippet for example:

raspasov10:09:15

@rovanion because with React Native’s tendency to break things on every “minor” update you tend to grow superstitious 😂

tiensonqin10:09:14

@psdp btw, I don’t have any problems using react-navigation.

rovanion11:09:27

@raspasov But why doesn't re-natal automatically run re-natal use-figwheel instead of instructing the human to do it?

raspasov11:09:42

$ re-natal --help

  Usage: re-natal [options] [command]


  Options:

    -V, --version  output the version number
    -h, --help     output usage information


  Commands:

    init [options] <name>              create a new ClojureScript React Native project
    upgrade                            upgrades project files to current installed version of re-natal (the upgrade of re-natal itself is done via npm)
    add-platform <platform>            adds additional app platform: 'windows' - UWP app, 'wpf' - WPF app
    xcode                              open Xcode project
    deps                               install all dependencies for the project
    use-figwheel                       generate index.*.js for development with figwheel
    use-android-device <type>          sets up the host for android device type: 'real' - localhost, 'avd' - 10.0.2.2, 'genymotion' - 10.0.3.2, IP
    use-ios-device <type>              sets up the host for ios device type: 'simulator' - localhost, 'real' - auto detect IP on eth0, IP
    use-component <name> [<platform>]  configures a custom component to work with figwheel. name is the value you pass to (js/require) function.
    infer-components                   parses all cljs files in this project, extracts all (js/require) components calls and uses them to populate the re-natal file
    enable-source-maps                 patches RN packager to server *.map files from filesystem, so that chrome can download them.
    copy-figwheel-bridge               copy figwheel-bridge.js into project

raspasov11:09:12

@rovanion I’m not quite sure, maybe you’re right, but as far as I can tell, re-natal is one of the smallest causes of issues around React Native so I’m not complaining about it 😜

psdp12:09:41

@tiensonqin Thanks a lot! You're my hero 🙇

psdp12:09:31

@tiensonqin I have another dumb question probably, how can you rewrite this part of code into Clojurescript https://github.com/brentvatne/movieapp/blob/master/navigation/CustomNavigationContext.js? What I do now doesn't work:

(extend-type NavigationProvider
  ICloneable
  (-clone [props] (NavigationProvider. props)))

(defprotocol ICustomNavigationContext
  (show-modal [this initial-route-name initial-route-params])
  (dismiss-modal [this]))

(defn CustomNavigationContext [props]
  (specify (NavigationProvider. props)
    ICustomNavigationContext
    (show-modal [this initial-route-name initial-route-params]
      #_(TODO))
    (dismiss-modal [this]
      #_(TODO))))

(defc App []
  (navigation-provider
   {:context (CustomNavigationContext. #js {:router Router})}
   (stack-navigation {:initialRoute "home"})))

tiensonqin14:09:25

@psdp thanks for your good words, 🙂 Have you tried goog/interits, you can read more in this post: http://www.50ply.com/blog/2012/07/08/extending-closure-from-clojurescript/

psdp15:09:17

@tiensonqin Nice trick! But doesn't seem to work yet, perhaps I did something wrong again...😕

goog.base called from a method of one name to a method of a different name
customEval
    figwheel-bridge.js:85:25
<unknown>
    figwheel-bridge.js:98:27
<unknown>
    JSTimers.js:223:23
_callTimer
    JSTimers.js:143:6
callTimers
    JSTimers.js:372:17
__callFunction
    MessageQueue.js:266:47
<unknown>
    MessageQueue.js:103:26
__guard
    MessageQueue.js:231:6
callFunctionReturnFlushedQueue
    MessageQueue.js:102:17

bhauman20:09:49

@raspasov first of all thank you for your instructions they have been helpful. But I'm still not seeing a working application

bhauman20:09:26

OK i added a step 5 for the FutureApp react-native run-ios

bhauman20:09:23

It is running and I have reloading going

bhauman20:09:35

now to figure out a good debugging workflow

bhauman20:09:50

Guess I'll walk through the react native tutorial

bhauman21:09:10

OK everything is working and I can now debug so I can try to improve figwheel's relationship with ReactNative now

bhauman21:09:00

it only took updating my OS and some great help from @pesterhazy and @raspasov

bhauman21:09:48

really not to bad to get up and running with a new stack

jeaye22:09:16

Badass, glad to hear it.

joshmiller23:09:02

Anyone had any trouble with their RN projects when upgrading to the latest XCode?

raspasov23:09:35

@bhauman GREAT! glad it’s working! please let me know if you run into any weird issues, more than happy to help! RN can be quite finicky (esp. when upgrading React Native versions) but once it’s working it’s very cool, been working with it for about a year

raspasov23:09:40

@bhauman react-native run-ios ah yes - that launches the simulator right… I think I wasn’t clear in my instructions because I’ve been doing this step from within XCode (aka press the button there) and I missed it… I think I started doing this from within XCode a long time ago when this command was sorta broken for me between XCode upgrades and it couldn’t find the correct simulator version or something #reactnativelife lol

raspasov23:09:50

@bhauman re: debugging… my debugging has always been “println/pprint+REPL+live reload” - I have the println output show up inside a Cursive REPL and I am REPL-ed into the application which is quite useful to inspect the app state, run a fn here or there etc + the live reload on frequent changes of course (also super helpful) … that I but I do know some people prefer debuggers etc… Chrome debugging works with React Native! I had one case when I was chasing some super complex internal React Native mess and tried to use it… it works quite well… you can PAUSE the JavaScript, etc etc and inspect the variables (aka stop the world debugging)… and you can even setup the ClojureScript sourcemaps etc even though I never got that to work perfect … but again I haven’t really tried hard because I don’t crave “stop the world” debuggers personally that bad