Navigator function names are deprecated in react-navigation 2 about cljs-react-navigation HOT 13 OPEN

@davidpham87 I think I see what you are up to here. And it is a perfectly legitimate approach.
One feature of the single database approach that re-frame has is that it is really simple (one map or db to store everything). As soon as you start building a business application thought, you almost want a way to separate out business data from data that supports the running application (typically session information, current screen, nav etc) that have nothing to do with the business domain.

I only took the approach I have so that I can use a transformation stream to clean out the business data as it heads to its datascript database, while the rest of the system state can remain in the Out-of-box re-frame map.

Well.. different routes: eternal complexity!

from cljs-react-navigation.

Hello @sulami

do you want to create a pull request and at least we can have it ready, because from your diffs above it seems like you have most of this.

Maybe we can have two branches, version 1.x tracking the changes that are present in react-navigation 1.x and 2.x tracking the changes that are present in react-navigation 2.x? What do you think?

Thanks for your time, looking forward to the PR!

from cljs-react-navigation.

Hey @sulami: Maybe we should just create a new namespace? That way we don't break existing behavior and we can define new specs/functions to operate in parallel?

Also, I'm super busy at the moment. If you have any interest in working on this project I'm happy to give you admin access to check new changes in and merge pull requests.

from cljs-react-navigation.

from cljs-react-navigation.

+1 for creating a new namespace to avoid breakage

from cljs-react-navigation.

There's also this that changed between 1 and 2 react-navigation/react-navigation#3930

from cljs-react-navigation.

Where would you like to have that separate namespace located ideally?

from cljs-react-navigation.

FYI.. anyone looking to use v3 - I have a way to do it with shadow-cljs.
React Navigation in Clojurescript

from cljs-react-navigation.

Thanks for looking into this @jamesnyika.

What do others think about this?

from cljs-react-navigation.

I think the solution offered by cljs-react-navigation is more robust in the sense that we are used to dispatch events in re-frame (and switching screen is an event).

from cljs-react-navigation.

@davidpham87 There is actually nothing preventing you from doing this yourself in re-frame. When I handle navigation in my re-frame apps (including in react native) I have a single navigation event handler/interceptor. It is usually the last one to run in a pipeline of event handlers. It takes information from the event to determine where to navigate to.

(reg-event-db
 :navigation/event
 (fn [db [_ {:keys [event data]}]]

    ;; event handler receives navigation props and another bunch of data I send in a supporting map
   (let [navigation (:navigation/handle db)
         navigation-map (:navigation/map db)

        ;; destructure the js navigation props to get the navigate function
         {:keys [navigate goBack]} (util/keywordize navigation)]

      ;;call navigation simply
     ((js->clj navigate) (event @e/navigation-map))
      
      ;;do not forget to return the db inside an event handler (or update it first if you need to) 
     db)))

The only reason I think to roll your own events doing this is to reduce one more library dependency for something that you is really inexpensive to design and allows you to retain understanding.

from cljs-react-navigation.

@jamesnyika

Thanks for your answer. My issue is we pollute the component with additional boilerplate that did not feel natural (coming from web development).

I end up using something like this:

(ns my.app.event
  (:require
   [re-frame.core :as rf :refer [reg-event-fx reg-event-db reg-fx]]
   ["react-navigation" :as rnav]))

(reg-event-db
 :set-navigation
 (fn [db [_ nav]]
   (assoc db :navigator nav)))

(reg-fx
 :active-screen
 (fn [[navigator screen]]
   (when navigator
     (.dispatch navigator
                (.navigate rnav/NavigationActions
                           #js {:routeName screen})))))

(reg-event-fx
 :register-active-screen
 (fn [{db :db} [_ screen params]]
   {:db (assoc db :active-screen screen
               :active-screen-params (if params params {}))}))

(reg-event-fx
 :set-active-screen
 (fn [{db :db} [_ screen-id]]
   {:db (assoc db :active-screen screen-id)
    :active-screen [(db :navigator) screen-id]}))

(reg-fx
 :navigation-drawer-action
 (fn [[navigator action]]
   (when navigator
     (.dispatch navigator
                (case action
                  :toggle (.toggleDrawer rnav/DrawerActions)
                  :open (.openDrawer rnav/DrawerActions)
                  :close (.closeDrawer rnav/DrawerActions))))))

(reg-event-fx
 :set-drawer-state
 (fn [{db :db} [_ action]]
   {:db db
    :navigation-drawer-action [(db :navigator) action]}))

(reg-event-fx
 :toggle-drawer
 (fn [{db :db} [_ action]]
   {:db db
    :navigation-drawer-action [(db :navigator) :toggle]}))

And in main

(defn root []
      [:> app-container {:ref #(rf/dispatch [:set-navigation %])}])

from cljs-react-navigation.

@davidpham87 this is good. .let me digest..

from cljs-react-navigation.