helix 2023-09-07 | Slack Archive

I'm new to helix and trying on of the React Native examples... but I get this error:

Got a component with the name 'myapp$subnav1$TabA_render' for the screen 'Tab-A'. 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.

The related code looks like this:

(defnc Root [_] {:helix/features {:fast-refresh true}}
  (let [{:keys [Navigator Screen]} (j/lookup tabs-nav)]
    ($ Navigator {}
       ($ Screen {:name "Tab-A" :component TabA})
       ($ Screen {:name "Tab-B" :component subnav2/TabB})
       )))

lilactown16:09:47

does the app still work?

lilactown16:09:03

looks related to this (found by googling the error message) https://www.reddit.com/r/Clojure/comments/tp8bua/react_native_with_reagent_complains_about_react/

lilactown16:09:18

it's a warning logged by react-navigation https://github.com/react-navigation/react-navigation/blob/ddc5705b979d62bb3a293f221ec954cbad3dfba4/packages/core/src/useNavigationBuilder.tsx#L233

lilactown16:09:14

you can ignore it, or you can change the name yourself by doing

(set! (.-displayName TabA) "TabA")
(set! (.-displayName subnav2/TabB) "TabB")

defa08:09:39

The set! trick didn't work for be, but using the tab components as chils instead of using :component did work. I'm sure I tried that yesterday, too!?

(defnc Root [_] {:helix/features {:fast-refresh true}}
  (let [{:keys [Navigator Screen]} (j/lookup tabs-nav)]
    ($ Navigator {}
       ($ Screen {:name "Tab-A"} TabA)
       ($ Screen {:name "Tab-B"} subnav2/TabB)
       )))

Thanks for all the answers! What a great community!

2023-09-07

Channels