This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-06-03
Channels
- # announcements (2)
- # babashka (15)
- # beginners (40)
- # calva (11)
- # cherry (2)
- # cider (3)
- # cljsrn (2)
- # clojure (37)
- # clojure-austin (4)
- # clojure-europe (2)
- # clojurescript (16)
- # core-async (1)
- # datomic (25)
- # hyperfiddle (18)
- # jobs-discuss (9)
- # nbb (7)
- # off-topic (19)
- # pathom (6)
- # podcasts-discuss (4)
- # portal (37)
- # practicalli (1)
- # re-frame (11)
- # releases (1)
- # scittle (13)
- # shadow-cljs (6)
I've run into very similar behavior too. In my case it was with reitit-frontend and using the navigation buttons on my mouse. I'm not sure yet (low priority) how these things interact but first impression was that some navigation state is mishandled
well, shadow-cljs just calls a function. so change what that function does. details I cannot tell you though. I do not use react-native myself, so I don't know the details of React Navigation
Thanks, @U05224H0W! I think I just got an idea of something to try from that advice…
No, I need to dig in react navigation for the solution probably. A crux is that they don’t have this kind of luxury problems in the plain react world as we have.
Turns out I can set the initial state of the navigation container. This branch of my example app now has navigation with smooth hot reload: https://github.com/PEZ/rn-rf-shadow/tree/pez/react-navigation Pasting the new root component code here, for easy reference:
(defn root []
;; The save and restore of the navigation root state is for development time bliss
(r/with-let [!root-state (rf/subscribe [:navigation/root-state])
save-root-state! (fn [^js state]
(rf/dispatch [:navigation/set-root-state state]))
add-listener! (fn [^js navigation-ref]
(when navigation-ref
(.addListener navigation-ref "state" save-root-state!)))]
[:> rnn/NavigationContainer {:ref add-listener!
:initialState (when @!root-state (-> @!root-state .-data .-state))}
[:> Stack.Navigator
[:> Stack.Screen {:name "Home"
:component (fn [props] (r/as-element [home props]))
:options {:title "Example App"}}]
[:> Stack.Screen {:name "About"
:component (fn [props] (r/as-element [about props]))
:options {:title "About"}}]]]))
(defn start
{:dev/after-load true}
[]
(expo-root/render-root (r/as-element [root])))
Turns out I can set the initial state of the navigation container. This branch of my example app now has navigation with smooth hot reload: https://github.com/PEZ/rn-rf-shadow/tree/pez/react-navigation Pasting the new root component code here, for easy reference:
(defn root []
;; The save and restore of the navigation root state is for development time bliss
(r/with-let [!root-state (rf/subscribe [:navigation/root-state])
save-root-state! (fn [^js state]
(rf/dispatch [:navigation/set-root-state state]))
add-listener! (fn [^js navigation-ref]
(when navigation-ref
(.addListener navigation-ref "state" save-root-state!)))]
[:> rnn/NavigationContainer {:ref add-listener!
:initialState (when @!root-state (-> @!root-state .-data .-state))}
[:> Stack.Navigator
[:> Stack.Screen {:name "Home"
:component (fn [props] (r/as-element [home props]))
:options {:title "Example App"}}]
[:> Stack.Screen {:name "About"
:component (fn [props] (r/as-element [about props]))
:options {:title "About"}}]]]))
(defn start
{:dev/after-load true}
[]
(expo-root/render-root (r/as-element [root])))