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?First thing you should do is disable the Hermes engine
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.
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