Fork me on GitHub
#cljsrn
<
2017-07-25
>
kurt-o-sys09:07:31

This is what I did, first create the project:

$ re-natal init myapp -i reagent6
Creating myapp
☕  Grab a coffee! Downloading deps might take a while...
Creating Leiningen project
Updating Leiningen project
Creating React Native skeleton.
Creating Re-Natal config
Compiling ClojureScript

To get started with your new app, first cd into its directory:
cd myapp

Run iOS app:
react-native run-ios > /dev/null

To use figwheel type:
re-natal use-figwheel
lein figwheel ios

Reload the app in simulator (⌘ + R)

At the REPL prompt type this:
(in-ns 'myapp.ios.core)

Changes you make via the REPL or by changing your .cljs files should appear live.

Try this command as an example:
(dispatch [:set-greeting "Hello Native World!"])

✔ Done

kurt-o-sys09:07:02

First terminal:

$ cd myapp
$ adb reverse tcp:8081 tcp:8081
 
$ adb reverse tcp:3449 tcp:3449

$ react-native start
Scanning 705 folders for symlinks in $PROJECT_HOME/mayapp/node_modules (6ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │                                    │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   $PROJECT_HOME/mayapp 

[7/25/2017, 11:10:13 AM] <START> Building Dependency Graph
[7/25/2017, 11:10:13 AM] <START> Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

[7/25/2017, 11:10:14 AM] <END>   Crawling File System (164ms)
[7/25/2017, 11:10:14 AM] <START> Building in-memory fs for JavaScript
[7/25/2017, 11:10:14 AM] <END>   Building in-memory fs for JavaScript (182ms)
[7/25/2017, 11:10:14 AM] <START> Building in-memory fs for Assets
[7/25/2017, 11:10:14 AM] <END>   Building in-memory fs for Assets (116ms)
[7/25/2017, 11:10:14 AM] <START> Building Haste Map
[7/25/2017, 11:10:14 AM] <START> Building (deprecated) Asset Map
[7/25/2017, 11:10:14 AM] <END>   Building (deprecated) Asset Map (83ms)
[7/25/2017, 11:10:14 AM] <END>   Building Haste Map (211ms)
[7/25/2017, 11:10:14 AM] <END>   Building Dependency Graph (694ms)

kurt-o-sys09:07:42

Second terminal:

$ re-natal use-figwheel         
Cleaning...
index.ios.js was regenerated
index.android.js was regenerated
Host in RCTWebSocketExecutor.m was updated
Dev server host for iOS: localhost
Dev server host for Android: localhost

$ lein figwheel android         
Figwheel: Cutting some fruit, just a sec ...
Figwheel: Validating the configuration found in project.clj
Figwheel: Configuration Valid :)
Figwheel: Starting server at 
Figwheel: Watching build - android
Figwheel: Cleaning build - android
Compiling "target/android/not-used.js" from ["src" "env/dev"]...
Successfully compiled "target/android/not-used.js" in 10.867 seconds.
Launching ClojureScript REPL for build: android
Figwheel Controls:
          (stop-autobuild)                ;; stops Figwheel autobuilder
          (start-autobuild [id ...])      ;; starts autobuilder focused on optional ids
          (switch-to-build id ...)        ;; switches autobuilder to different build
          (reset-autobuild)               ;; stops, cleans, and starts autobuilder
          (reload-config)                 ;; reloads build config and resets autobuild
          (build-once [id ...])           ;; builds source one time
          (clean-builds [id ..])          ;; deletes compiled cljs target files
          (print-config [id ...])         ;; prints out build configurations
          (fig-status)                    ;; displays current state of system
  Switch REPL build focus:
          :cljs/quit                      ;; allows you to switch REPL to another build
    Docs: (doc function-name-here)
    Exit: Control+C or :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application

kurt-o-sys09:07:14

Third terminal:

$ react-native run-android      
JS server already running.
Running /opt/android-sdk-linux//platform-tools/adb -s ZY223KDRZQ reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && ./gradlew installDebug...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42321Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee0110Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore0110Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineBase0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp30110Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0350Library UP-TO-DATE
:app:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Moto G (4) - 7.0'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 12.712 secs

This build could be faster, please consider using the Gradle Daemon: 
Starting the app on ZY223KDRZQ (/opt/android-sdk-linux//platform-tools/adb -s ZY223KDRZQ shell am start -n com.myapp/.MainActivity)...
Starting: Intent { cmp=com.myapp/.MainActivity }

kurt-o-sys09:07:10

what am I missing?

kurt-o-sys10:07:33

reagent is not compatible with react >15.5, am I right?

kurt-o-sys10:07:01

oh, ok... nice.

pesterhazy10:07:13

I think this may not be released yet? not sure

pesterhazy10:07:43

if you don't want to dive into that, you might be better off with an older version of react/reagent/re-natal

kurt-o-sys10:07:55

yeah, but than I need to fall back to an older version of RN and I actually upgraded 'cause I needed some of the newer features of RN...

kurt-o-sys10:07:26

yeah... I didn't update re-natal recently... this will solve the problem, I guess.

pesterhazy13:07:43

Anyone have a trick to find if you're in ReactNative in javascript (or cljs), at runtime?

thheller13:07:35

@pesterhazy IIRC figwheel does some detection

pesterhazy13:07:40

@thheller perfect, thanks!!