Sample low level button with React Native Web and Fulcro

core.cljs

(ns demo.core)

;; This is a little macro to create React native style (StyleSheet)
(defstyles styles
  #::{:base-button          {:padding-vertical   5
                             :padding-horizontal 5}
      :base-button.title    {:color      "#fafafa"
                             :text-align "center"}
      :primary-button       {:background-color "rgb(68, 124, 196)"}
      :primary-button.hover {:background-color "rgba(68, 124, 196, 0.86)"}})

(defn -toggle-hover! [comp]
  (fn []
    (comp/set-state! comp (update (comp/get-state comp) :ui/hover? not))))

;; Low level button component
(defsc BaseButton [this {:button/keys [title style style-hover]}]
  {:initLocalState (fn [_] {:ui/hover? false})}
  (let [{:ui/keys [hover?]} (comp/get-state this)
        on-hover (-toggle-hover! this)]
    (rn/ui-pressable {:style      (cond-> [(styles ::base-button)
                                           (styles style)]
                                          hover? (conj (styles style-hover)))
                      :onHoverIn  on-hover
                      :onHoverOut on-hover}
      (rn/ui-text {:style (styles ::base-button.title)} title))))

(def ui-base-button (comp/factory BaseButton))

(defsc PrimaryButton [_ props]
  (ui-base-button (assoc props :button/style ::primary-button
                               :button/style-hover ::primary-button.hover)))

(def ui-primary-button (comp/factory PrimaryButton))

(defsc Home [_this _props]
  {:ident         (fn [] [:component/id ::home])
   :query         ['*]
   :route-segment ["home"]
   :initial-state {}}
  (rn/ui-view
    (rn/ui-text "Home")
    (ui.comp/ui-primary-button #:button{:title "Go to other home"})))