FAQ

This page is intended to collect common gotchas encountered when working with CLJSRN, re-natal and reagent. Feel free to add information below.

What is this :> operator I keep seeing?

The bird's beak operator (colon-larger-than) is Reagent syntax for native React interop.

:> signals to Reagent that the following element of the vector will be interpreted as a React (not Reagent) component. This allows you to use native components from React Native or from other 3rd party js libraries

[:> view props ...]

is functionally equivalent to

(def view (r/adapt-react-class (.-View rn)))

[view props ...]

Objects are not valid as a React child

If you see the error message Objects are not valid as a React child, the reason may be that you're passing a ClojureScript function as a render-item callback prop to a React Native component.

Often this problem is encountered with FlatList or ListView components. The render-item function used with these components is expected to return a React element. The fix, then, is to use Reagent's as-element function:

;; incorrect
[flat-list {:data #js["one" "two" "three"]
            :render-item (fn [item] [text item])}]

;; correct
[flat-list {:data #js["one" "two" "three"]
            :render-item (fn [item] (r/as-element [text (.-item item)]))}]