cljsrn 2022-11-03

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?

@joshmiller thanks for the help, now it works

😎 1

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