This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-07-25
Channels
- # aleph (2)
- # aws (2)
- # beginners (37)
- # boot (23)
- # cider (29)
- # clara (34)
- # cljs-dev (2)
- # cljsrn (17)
- # clojure (230)
- # clojure-dev (47)
- # clojure-italy (11)
- # clojure-nl (2)
- # clojure-poland (5)
- # clojure-russia (52)
- # clojure-sg (1)
- # clojure-spec (70)
- # clojure-uk (73)
- # clojurescript (31)
- # core-async (9)
- # cursive (15)
- # datomic (39)
- # events (1)
- # graphql (1)
- # lein-figwheel (2)
- # luminus (13)
- # off-topic (2)
- # onyx (29)
- # other-lisps (1)
- # parinfer (15)
- # pedestal (14)
- # re-frame (41)
- # reagent (24)
- # ring (4)
- # ring-swagger (12)
- # rum (1)
- # spacemacs (3)
- # specter (1)
- # test-check (13)
- # timbre (9)
- # unrepl (29)
- # vim (5)
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
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)
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
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 }
what am I missing?
reagent is not compatible with react >15.5, am I right?
@kurt-o-sys there are some fixes in new versions of re-natal: https://github.com/drapanjanas/re-natal/commit/bd7c883cc53860acd6016c21dc4a6c5526545e52
oh, ok... nice.
I think this may not be released yet? not sure
if you don't want to dive into that, you might be better off with an older version of react/reagent/re-natal
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...
yeah... I didn't update re-natal recently... this will solve the problem, I guess.
Anyone have a trick to find if you're in ReactNative in javascript (or cljs), at runtime?
@pesterhazy IIRC figwheel does some detection
https://github.com/bhauman/lein-figwheel/blob/master/support/src/figwheel/client/utils.cljs#L18-L19
@thheller perfect, thanks!!