Clojurians Log v2

So following up on this, I still couldn't get :f> to work in React Native - it fails with invalid tag '' error. Irrespective of the component level in the hierarchy. I was able, however, to use documented "Pre 1.0 workaround" from reagent docs. This way I could make hooks work.

Just create the first component as a regular one. And create a separate wrapper for your f:> It's a bit complicated to debut by just looking at this. But reagent completely supports funcional components in react native. Alternatively you can enable f comps by default by adjusting the existing compiler.

Sorry, I'm not sure I'm following. Root component should be a regular one, and then I can use f:> for a child component, that's the idea?

Yeah, that's what I meant. But also try enabling functional components by default in the built-in reagent complier. It's way easier since modern react uses a lot of hooks. Take a look at Status repo, it's a great example of a complex app built

Thank you!

It seems like Reagent doesn't recognize :f> modifier in RN environment

Reagent recognizes it. I think you should give more context about the error

https://github.com/status-im/status-mobile big app in Cljs + RN +Reagent (dead, but I worked there, also forked a component library based on it, reagent was never a problem).

Recently released an app with RN 0.81.1 and Reagent. I'd say you are using a non-existing tag, e.g. :div doesn't exists on RN. I'm also building a regent extended compiler (widely used in my apps, but need to improve the readme and docs a lot) In case you are interested: https://github.com/ulisesmac/reagent-extended-compiler It basically allows you to extend the built-in components, so you can use:

[:rn/view {}
 [:rn/flat-list {}
...]]

I'm trying to replicate default App.tsx setup with SafeAreaProvider. Very basic setup:

(defn- safe-area-content []
  (let [safe-area-insets (rv/use-safe-area-insets)]
    (fn []
      [rv/view {:safeAreaInsets safe-area-insets}
       [rv/gesture-handler-root
        {:style {:flex 1}}
        [appnav/central-app-switch-v5]
        ]
       ]
      )
    )
  )

(defn- safe-area-root []
  (let [is-dark-mode? (= (rv/use-color-scheme) "dark")]
    (fn []
      [rv/safe-area-provider
       [rv/status-bar {:barStyle (if is-dark-mode? "light-content" "dark-content")}]
       [:f> safe-area-content]
       ]
      )
    )
  )

(defn- app-root []
  (r/create-class
    {:display-name        "app-root"
     :reagent-render      (fn app-root-render []
                            [:f> safe-area-root]
                            )
     :component-did-mount #(do
                             (dispatch [:check-stored-session])
                             (n/setup-notification-listeners)
                             )
     }
    )
  )

Using :f> results in the failure described above

It looks like Reagent can't render :f> in absence of DOM

I have to use :f> because I need native hooks

[without it there'a another failure about attempt to use hooks outside of functional components]