2024-03-28 helix | Clojure Slack Archive

helix

hadils 2024-03-28T20:45:27.250589Z

I am using helix in an Expo project. React Navigation v6 reports the following warnings:

Got a component with the name 'yardwerkz$features$user_type$components$user_type_view$UserType_render' for the screen 'UserType'. React Components must start with an uppercase letter. If you're passing a regular function and not a component, pass it as children to 'Screen' instead. Otherwise capitalize your component's name.

for every Helix component. Is there a way to resolve this? Thanks in advance!

hadils 2024-03-30T22:57:52.303879Z

Thank you for your suggestion @lilactown. My solution was incorrect.

lilactown 2024-03-29T20:35:50.889569Z

I really hate this check, it's totally unnecessary. Here's what I suggested before but the last person said it didn't work, you could try it though: https://clojurians.slack.com/archives/CRRJBCX7S/p1694105114390509?thread_ts=1694096188.205379&cid=CRRJBCX7S

lilactown 2024-03-29T20:37:32.747209Z

I would open an issue with react-navigation to remove this warning or allow it to be turned off if I were you

hadils 2024-03-29T20:39:19.527259Z

Thank you @lilactown. I will do that.

lilactown 2024-03-29T20:40:11.176849Z

Frustratingly, it looks like react-navigation doesn't check the displayName but rather the name property. This is something that helix doesn't control, it's based on how your build outputs the JS. https://github.com/react-navigation/react-navigation/blob/d90ed7665be74c570ed2a6a4da612230fcf6a01c/packages/core/src/useNavigationBuilder.tsx#L222

hadils 2024-03-29T20:51:44.146329Z

There seems to be a way to provide a function returning an element as a child of the Screen. However, it needs to be memoized.

lilactown 2024-03-29T21:00:55.851689Z

(let [render-my-component (use-callback [my-component] (fn renderMyComponent [props] ($ my-component {& props})))]
   ($ Screen render-my-component))

lilactown 2024-03-29T21:01:01.353929Z

or something to that effect

hadils 2024-03-29T21:02:48.237269Z

I have this:

(defn wrap-nav-screen [Component] (-> Component (h/memo)))

($ Screen {:name "Home" :component (wrap-nav-screen Home)})

It seems to be working, but I am not convinced yet.

hifumi123 2024-03-28T20:55:12.692109Z

iirc the first argument to defnc provides the display name of a component. it shouldn't have $ symbols in it, I think

hadils 2024-03-28T20:57:08.259329Z

I think this was the case a while ago, but now it isn’t. E.g.,

(defnc UnderConstructionRenderer
  [props]
  ($ rn/SafeAreaView {:style {:flex 1 :justifyContent "center" :alignItems "center"}}
     ($ rne/Text {:h2 true} "Under Construction")))

My helix components all look similar.

Clojurians Log v2

helix