Fork me on GitHub
#cljsrn
<
2019-04-29
>
joshmiller03:04:26

I use react-navigation via cljs-react-navigation and it’s worked pretty well for me. It’s nice to have the guard rails.

lepistane07:04:37

@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

lepistane08:04:40

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

lepistane09:04:23

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

vikeri09:04:41

@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

lepistane09:04:44

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

lepistane09:04:49

where i struggle is

lepistane09:04:02

with app container

vikeri09:04:49

I know @looveh has worked on adapting the latest version of React Navigation to cljs + re-frame.

lepistane09:04:45

(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.

lepistane09:04:00

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

Niclas11:04:43

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)))

lepistane11:04:29

@looveh tnx for this! btw why does aget pattern produce happiness during advanced compilation?

Niclas11:04:16

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.

Niclas11:04:46

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

souenzzo11:04:43

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

Niclas11:04:59

@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

souenzzo11:04:07

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

lepistane11:04:10

thank you both for this i will update my code accordingly

lepistane12:04:10

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