Clojurians Log v2

I’m having trouble using flatlist with react native

I have the following code:

[:> FlatList {:data @(subscribe [:videos])
                  :renderItem video-comp
                  :keyExtractor (fn [item] (:uri item))}]

(defn video-comp [video]
  [:> View
   [:> Video
    {:style {:height 400
             :width "100%"}
     :controls true
     :paused true
     :source {:uri (:uri video)}}]
   [:> Text (:name video)]])

however, I’m getting the following error:

Objects are not valid as a react child.

How to fix this error?

Not thought this through, so a long shot. You might need to make the video-comp a react-component. Something like:

:renderItem (r/create-component video-comp)

I’ve tried both r/create-component and r/as-element, and am getting the same error

actually r/create-component gives a different error:

undefined is not an object

evaluating reagent.core.create-component.cljs…

I have another error

(defn sample-comp []
[:> View [:> Text "Sample Container!"]])

(defn root-comp []
  [:> NavigationContainer
   [:> SafeAreaView
    (let [Tab (createBottomTabNavigator)]
      [:> (.-Navigator Tab)
       [:> (.-Screen Tab)
        {:name "Home"
         :component (r/reactify-component sample-comp)}]])]])

(defn init []
  ;; register error also occurs if there's a non-
  ;; related error in the code
  (dispatch [:register-db])
  (render-root "Humboi" (r/as-element [root-comp])))

but I’m getting the following error:

requireNativeComponent: “RNCSafeAreaProvider” was not found in UIManager.

How to fix this error?

With react navigation I have sometimes had to also call clj->js. And I’ve been using as-component I now realize. Here’s a snippet from my work-for-food project:

:navigationOptions 
(fn [_]
  (clj->js {:headerLeft  (r/as-component 
                          [nav-back-button {:on-press #(dispatch [:foo.leave])}])
            :headerTitle (r/as-component
                          (some-reagent-component))
            :headerRight (when env/android? (empty-component))}))

using as-component gives undefined is not an object

is your r/ namespace reagent.core?

Yes, reagent.core.

as-component is giving undefined is not an object

Which is strange. What do you get if you evaluate sample-component in the REPL?

I’m getting Use of undeclared Var reagent.core/as-component

in the repl

I think I might be using an older version of reagent. Maybe this API has changed since…

@admin055 that gives the error:

I have the following:

[:> FlatList {:data @(subscribe [:videos]) :renderItem (fn [] (r/as-element [video-comp])) :keyExtractor (fn [item] (:uri item))}]

and this crashes the app

I also tried the following;

[:> FlatList {:data @(subscribe [:videos])
                      :renderItem (fn [item] (r/as-element [video-comp item]))
                      :keyExtractor (fn [item] (:uri item))}]
       

But this crashes the app

as well

@ps I have [:> FlatList {:render-item (fn [todo] (r/as-element [render-todo todo navigate true])) ; ...]

So r/as-element should work

I’d try the suggestion above about debugging the component below

as-element with {:> View [:> Text “ok”]] works

but using (:name item) in Text doesn’t work

And like that, it should work.

[:> FlatList {:data @(subscribe [:videos])
                      :renderItem (fn [item] (r/as-element [:> View [:> Text (goog.object/get item "name")]]))
                      :keyExtractor (fn [item] (:uri item))}]

@ps here's a working example from my cljsrn app: https://gist.github.com/olivergeorge/97a5c7179d2e7076da68e9cc4dc0bea8

@ps regarding app crashes. I suspect you need a top level error boundary. Here's my code for that: https://gist.github.com/olivergeorge/ac9dbda3934de9d215083708501bf42c