Fork me on GitHub
#shadow-cljs
<
2023-06-03
>
pez18:06:22

This might be more of a shadow-cljs question, come to think of it.

valerauko18:06:55

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

thheller05:06:42

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

pez07:06:46

Thanks, @U05224H0W! I think I just got an idea of something to try from that advice…

pez07:06:36

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.

pez10:06:49

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

pez10:06:49

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