If you shared your code it might be more helpful to give you more precise answer and possible point to issues but this should be helpful to you https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#hooks

I tried to mentally parse this page, but I think it requires at least some deeper knowledge of plain react and javascript than I already have. Maybe it was a mistake to try and use this stuff without having first learnt to do it in js, but if I had gone that route, I would never have probably bothered with cljs in the first place 🙂 "hooks", "component classes", etc., all new to me. I have an example screen:

(defn open-project-screen [props]
  (r/as-element
   [:> rn/SafeAreaView {:style (tw "flex flex-1")}
    [:> rn/StatusBar {:visibility "hidden"}]
    [:> rn/View {:style (tw "flex flex-1 justify-center px-20")}
     [:> rn/View {:style (tw "py-2")}]
     [:> rn/View {:style (tw "flex-row justify-center py-1")}
      [:> rn/View
       [:> rn/View {:style (tw "py-1")}]
       [:> paper/Text {:style (tw "px-1")} (str "Project: " (<sub [:opened-project]))]
       [:> rn/View {:style (tw "py-1")}]]]
     [:> rn/View {:style (tw "flex-row justify-center py-1")}
      [:> paper/Button {:mode "text" :on-press #(>evt [:navigate "property-details"])} "Open Project"]]]]))

If it requires deeper js interop & react knowledge, I'll use another less complex workaround, just thought maybe this would have been a common use case and maybe there's already live examples somewhere. Google search didn't turn up much though, seems not a lot of published projects using this stack.

(All I'm really looking for is some nice way to have buttons at the bottom of my screen, that when pressed can fire off a re-frame event to navigate. Maybe using such off-the-shelf components are overkill and unnecessary.)

Probably a common pattern for navigation in react native, but I come from a pure backend dev background and this is all still outside of my comfort zone. Maybe I'm "holding it wrong".

Don't be hard on yourself. React native is quite hard to get i often found myself forgetting a lot of stuff that's why i write notes all the time for versions, install steps etc... Maybe i should've dockerized this 😄 I can't find a simple example of hooks to give to you. I dont think you need to learn JS and RN it may just mess with you head 😄 The only thing that i remember i made recently that had references that could be helpful to you is: https://www.reddit.com/r/Clojure/comments/uvw0mw/how_to_get_autoanimate_working_with_reframe/

Thanks a lot! I'll take a look 🙂

Something else I'm a little unsure of:

<BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />

<Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
    Press me
  </Button>

Actually I think my understanding is completely incorrect. My primary navigator looks like this:

(ns app.navigator
  (:require
   ["@react-navigation/native" :as nav]
   ["@react-navigation/native-stack" :as n-stack]
   ["react-native-paper" :as paper]
   ["react-native-gesture-handler" :as g]

   [applied-science.js-interop :as j]
   [reagent.core :as r]

   [app.screens.login :refer [login-screen]]
   [app.screens.project :refer [open-project-screen]]
   [app.screens.register :refer [register-screen]]
   [app.screens.open :refer [open-screen]]
   [app.screens.create :refer [create-screen]]
   [app.screens.main :refer [main-screen]]
   [app.screens.property :refer [property-details-screen]]
   [app.screens.welcome :refer [welcome-screen]]
   [app.screens.forgot :refer [forgot-password-screen]]

   [app.fx :refer [!navigation-ref]]
   [app.handlers]
   [app.subscriptions]
   [app.util :refer [<sub >evt]]))

(defn wrap-screen
  [the-screen]
  (g/gestureHandlerRootHOC
   (paper/withTheme
    (r/reactify-component the-screen))))

(def stack (n-stack/createNativeStackNavigator))

(defn stack-navigator [] (-> stack (j/get :Navigator)))

(defn stack-screen [props] [:> (-> stack (j/get :Screen)) props])


(defn root []
  (let [theme           (<sub [:theme])
        !route-name-ref (clojure.core/atom {})]

    [:> paper/Provider
     {:theme (case theme
               :light paper/MD3LightTheme
               :dark  paper/MD3DarkTheme
               paper/MD3LightTheme)}

     [:> nav/NavigationContainer
      {:ref             (fn [el] (reset! !navigation-ref el))
       :on-ready        (fn []
                          (swap! !route-name-ref merge {:current (-> @!navigation-ref
                                                                     (j/call :getCurrentRoute)
                                                                     (j/get :name))})
                          (>evt [:reset-nav-state]))
       :on-state-change (fn [state]
                          (>evt [:save-nav-state state])

                          (let [prev-route-name    (-> @!route-name-ref :current)
                                current-route-name (-> @!navigation-ref
                                                       (j/call :getCurrentRoute)
                                                       (j/get :name))]
                            (when (not= prev-route-name current-route-name)
                              ;; This is where you can do side effecty things like analytics
                              (>evt [:some-fx-example (str "new screen encountered: " current-route-name)]))
                            (swap! !route-name-ref merge {:current current-route-name})))}

      [:> (stack-navigator) {:screenOptions {:headerShown false}}
       (stack-screen {:name      "login"
                      :component (wrap-screen login-screen)
                      :options   {}})
       (stack-screen {:name      "main"
                      :component (wrap-screen main-screen)
                      :options   {}})
       (stack-screen {:name      "property-details"
                      :component (wrap-screen property-details-screen)
                      :options   {}})
       (stack-screen {:name      "register"
                      :component (wrap-screen register-screen)
                      :options   {}})
       (stack-screen {:name      "forgot-password"
                      :component (wrap-screen forgot-password-screen)
                      :options   {}})
       (stack-screen {:name      "open-project"
                      :component (wrap-screen open-project-screen)
                      :options {}})
       (stack-screen {:name      "welcome"
                      :component (wrap-screen welcome-screen)
                      :options   {}})
       (stack-screen {:name      "open"
                      :component (wrap-screen open-screen)
                      :options   {}})
       (stack-screen {:name      "create"
                      :component (wrap-screen create-screen)
                      :options   {}})]]]))

> However, I'm not sure what onIndexChange={{setIndex}} would be eqivalent of, since i'd map it to {setIndex}, which is a key in a map without a value. So I think I'm misunderstanding what's happening. just quickly eavesdropping, in (react) JS world the double-curlys mean an object shorthand, as in {"setIndex": setIndex} (or in cljs {:setIndex setIndex}). so this would become {:onIndexChange {:setIndex setIndex}}

(where setIndex is some variable defined before)

navigationState={{ index, routes }}

yes

that's what I thought. thanks. still wondering why they are fns in my code, will need to figure out what refs are and whether objects can be replaced with functions that return something rather than literal values

Will come back and dig deeper on the weekend. Cheers for the help.

👍 refs, as i remember using them with react in browser were properties in react elements that expected a callback, which react passed the reference to the DOM element. so you could store the actual element from that callback. i don't know if this is different in react native though, or your use case.

> still wondering why they are fns in my code, will need to figure out what refs are and whether objects can be replaced with functions that return something rather than literal values Same as in React, you can create ref using createRef or set ref using a function. Read more here https://reactjs.org/docs/refs-and-the-dom.html#callback-refs