cljsrn

tifa 2022-11-03T14:43:09.077509Z

I use react-native 0.70.4, Krell and iOS emulator. Krell build my project, and I try to add tailwindcss support. Try through tailwind-rn 4.2.0, but get error when using functional component:

(ns app.core
 (:require [reagent.core :as r]
         [react-native :as rn]
         ["tailwind-rn" :as tailwind]))

(def tailwind-json (js/require "../tailwind.json"))

(defn my-component []
 (let [tw (tailwind/useTailwind)]
  [:> rn/View {:style (tw "pb-5 bg-red-600")}
   [:> rn/Text "Text!"]]))

(defn app []
 [:> tailwind/TailwindProvider {:utilities tailwind-json}
  [:> rn/View {:style {:flex 1 :align-items "center" :justify-content "center"}}
  [:> rn/Text {:style {:font-size 50}} "Hello...!"]
  [:f> my-component]]])

(defn ^:export -main
[& args]
 (r/as-element [app]))
ERROR  Error: Assert failed: Invalid tag: '' (in )
tag

This error is located at:
  in  (created by KrellRoot)
  in KrellRoot
  in RCTView (created by View)
  in View (created by AppContainer)
  in RCTView (created by View)
  in View (created by AppContainer)
  in AppContainer
  in myInitialApp(RootComponent), js engine: hermes
How to fix it? Krell support functional components? Or maybe there is another way to add tailwindcss support?

tifa 2022-11-07T09:22:42.160039Z

@joshmiller thanks for the help, now it works

😎 1
joshmiller 2022-11-04T21:52:24.752989Z

First thing you should do is disable the Hermes engine

joshmiller 2022-11-04T21:53:48.827519Z

Krell isn’t really involved in functional components one way or the other, it’s just the thin layer that makes the CLJS RN-able.

joshmiller 2022-11-04T21:54:14.145219Z

To use functional components in reagent by default, you should specify the functional compiler: https://cljdoc.org/d/reagent/reagent/1.1.1/doc/tutorials/reagent-compiler