This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-04-29
Channels
- # announcements (4)
- # architecture (1)
- # beginners (113)
- # boot (17)
- # calva (40)
- # cider (9)
- # clara (1)
- # cljs-dev (21)
- # cljsrn (21)
- # clojure (47)
- # clojure-dev (8)
- # clojure-europe (2)
- # clojure-italy (46)
- # clojure-nl (10)
- # clojure-spec (1)
- # clojure-turkiye (1)
- # clojure-uk (46)
- # clojurescript (102)
- # core-async (21)
- # cursive (35)
- # data-science (1)
- # datomic (7)
- # emacs (2)
- # graphql (1)
- # lumo (15)
- # nrepl (4)
- # nyc (1)
- # off-topic (5)
- # overtone (3)
- # pathom (10)
- # quil (6)
- # re-frame (30)
- # reagent (7)
- # reitit (33)
- # rewrite-clj (1)
- # shadow-cljs (37)
- # spacemacs (73)
- # test-check (3)
- # testing (2)
- # vim (59)
I use react-navigation via cljs-react-navigation and it’s worked pretty well for me. It’s nice to have the guard rails.
@joshmiller i had problem setting it up
right now i am trying to use plain react-navigation
if i manage to do that i might give cljs-react-navigation a try
i had some issue https://github.com/seantempesta/cljs-react-navigation/blob/master/src/cljs_react_navigation/re_frame.cljs#L82
it said that var was missing
examples i find are using version 1.x https://github.com/vikeri/re-navigate/ and i had problems setting this up https://github.com/seantempesta/cljs-react-navigation and if i understand correctly it uses 1x also
@lepistane Unfortunately my repo is very outdated since it uses a very early version of React Navigation. I’ll add that note to the README
I know @looveh has worked on adapting the latest version of React Navigation to cljs + re-frame.
(def react-navigation (js/require "react-navigation"))
(def create-stack-navigator (.-createStackNavigator react-navigation))
(def create-app-container (.-createAppContainer react-navigation))
(defn home []
(this-as this
[view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
[text {:style {:font-size 30 :font-weight "100" :margin-bottom 20 :text-align "center"}} "home"]
[button {:title "Go to Details"
:on-press #(-> this
(.props)
(.navigation)
(.push "Details"))}]]))
(defn details []
[view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
[text {:style {:font-size 30 :font-weight "100" :margin-bottom 20 :text-align "center"}} "Details"]])
(def stack-nav
(create-stack-navigator (clj->js {:Home home
:Details details})
(clj->js {:initialRouteName :Home})))
(def container
(create-app-container stack-nav))
and then when i call it in app-root
like [container]
i get
console.error: "Error rendering component (in AppContainer > View > > > View > > > > env.android.main.reloader > bus_routes_producer.android.core.app_root > NavigationContainer)"
when i call it with [:> container]
i get
Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {name, id, class}). If you meant to render a collection of children, use an array instead.
trying to adopt https://snack.expo.io/@react-navigation/our-first-navigate-v3 Oh god bless this guy https://anish-patil.blogspot.com/2019/02/getting-started-with-react-native.html this works!! 😄 I was close i need more XP with translating the code
For what it’s worth, this is how we’ve been able to get it going in our project, important to note is ping-ponging back between reagent and react classes:
(ns your.ns
(:require [reagent.core :as r]))
(def react-navigation
(js/require "react-navigation"))
(def create-app-container
;; You're going to be happy you follow this pattern
;; when using advanced compilation
(aget react-navigation "createAppContainer"))
(def create-stack-navigator
(aget react-navigation "createStackNavigator"))
(defn home []
...)
(defn details []
...)
(def stack-nav
(create-stack-navigator (clj->js {:Home (r/reactify-component home)
:Details (r/reactify-component details)})
(clj->js {:initialRouteName :Home}))))
(def container
(r/adapt-react-class
(create-app-container react-navigation stack-nav)))
@looveh tnx for this!
btw why does aget
pattern produce happiness during advanced compilation?
During minification function names get compressed, so (.-someVar someObj)
, which will transpile in js to someObj.someVar
will be minified to something like a.b
. The linking between external js and your compiled cljs isn’t 100% fool proof, so you might run in to issues where your code is minified while the external source isn’t (or maybe the other way around, can’t really remember). You can easily work your way around this by using (aget someObj "someVar")
which transpiles into someObj["someVar"]
which then gets minified to a["someVar"]
since string literals aren’t minified, thus ensuring that external symbols can still be referred to.
Of course you can also use externs files as described in https://clojurescript.org/reference/advanced-compilation, though I prefer using aget
since it’s quicker to inline wherever needed
@souenzzo Cool, how does that differ? We mainly use aget
for accessing values and ocall
from https://github.com/binaryage/cljs-oops when calling functions
not sure how it differ, but in my experience gobj/get
gives me less problems in advanced build's
i am getting warnings about obsolete compile fn in grade
compile project(':react-native-gesture-handler')
what do i do to remove those warnings?
SOLVED: by implementation project(':react-native-gesture-handler')
from https://stackoverflow.com/questions/44493378/whats-the-difference-between-implementation-and-compile-in-gradle