Fork me on GitHub
#cljsrn
<
2021-01-17
>
zendevil.eth10:01:51

I’m having trouble using flatlist with react native

zendevil.eth10:01:56

I have the following code:

zendevil.eth10:01:23

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

zendevil.eth10:01:32

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

zendevil.eth10:01:39

however, I’m getting the following error:

zendevil.eth10:01:57

Objects are not valid as a react child.

Michaël Salihi17:01:01

Hi @ps Do you had find a solution? If not, you can try

[:> FlatList {:data @(subscribe [:videos])
                  :renderItem (fn [item] (r/as-element [video-comp (:video item]))
                  :keyExtractor (fn [item] (:uri item))}]
Replace (:video item] with something appropriate with your code.

zendevil.eth10:01:00

How to fix this error?

pez10:01:17

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)

zendevil.eth10:01:49

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

zendevil.eth10:01:38

actually r/create-component gives a different error:

zendevil.eth10:01:48

undefined is not an object

zendevil.eth10:01:06

evaluating reagent.core.create-component.cljs…

zendevil.eth12:01:40

I have another error

zendevil.eth12:01:15

(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])))
Here’s my code in which I’m trying to use multiple bottom tabs using react navigation

zendevil.eth12:01:22

but I’m getting the following error:

zendevil.eth12:01:52

requireNativeComponent: “RNCSafeAreaProvider” was not found in UIManager.

zendevil.eth12:01:56

How to fix this error?

pez13:01:09

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))}))

zendevil.eth14:01:04

using as-component gives undefined is not an object

zendevil.eth14:01:24

is your r/ namespace reagent.core?

pez14:01:30

Yes, reagent.core.

zendevil.eth14:01:26

as-component is giving undefined is not an object

pez14:01:14

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

zendevil.eth14:01:09

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

pez15:01:25

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

Michaël Salihi17:01:01

Hi @ps Do you had find a solution? If not, you can try

[:> FlatList {:data @(subscribe [:videos])
                  :renderItem (fn [item] (r/as-element [video-comp (:video item]))
                  :keyExtractor (fn [item] (:uri item))}]
Replace (:video item] with something appropriate with your code.

zendevil.eth18:01:29

@admin055 that gives the error:

zendevil.eth18:01:54

I have the following:

zendevil.eth18:01:57

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

zendevil.eth18:01:02

and this crashes the app

zendevil.eth18:01:35

I also tried the following;

zendevil.eth18:01:51

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

Michaël Salihi20:01:15

Can you try to see if the error come from video-comp or Flatlist?

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

3
🙏 3
zendevil.eth20:01:57

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

zendevil.eth20:01:41

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

Michaël Salihi21:01:29

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))}]

zendevil.eth18:01:54

But this crashes the app

Michaël Salihi20:01:15

Can you try to see if the error come from video-comp or Flatlist?

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

3
🙏 3
joshmiller20:01:10

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

3
🙏 3
joshmiller20:01:48

So r/as-element should work

joshmiller20:01:20

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

Oliver George22:01:21

@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

👍 3
3
🙏 3
Oliver George22:01:24

👏 3
3
🙏 3