Fork me on GitHub

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 it said that var was missing


hey guys i am struggling with translating this example to re-natal


examples i find are using version 1.x and i had problems setting this up 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


actually i might even use that one since i am unable to make 3x work


where i struggle is


with app container


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
                             (.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 >  >  >  > > > 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 Oh god bless this guy 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
    (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, though I prefer using aget since it’s quicker to inline wherever needed


I like to prefer goog.object :as gobj and (gobj/get someObj "someVar")


@souenzzo Cool, how does that differ? We mainly use aget for accessing values and ocall from when calling functions


not sure how it differ, but in my experience gobj/get gives me less problems in advanced build's


thank you both for this i will update my code accordingly


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