The data-source property isn't propagated from reagent to the render method of the React Native ListView component - react-native

Question

I'm trying to render a React Native ListView in reagent.
I have the following snippet:
(def data-source
(React.ListView.DataSource. #js{:rowHasChanged (fn [a b] false)}))
(defn render-row []
[ui/view])
(def rows
(clj->js ["whoa", "hey"]))
(defn main-scene []
(fn []
[ui/list-view {:render-row render-row
:data-source (.cloneWithRows data-source rows)}]))
The above leads to "Failed propType: Required prop dataSource was not specified in ListView. Check the render method of app.ios.ui.main_scene." Which is followed by "Cannot read property 'rowIdentities' of undefined" as the data source is undefined inside the render method of the ListView.
My first guess was there was some special treatment of the "data-" attributes somewhere in the internals of either reagent/hiccup or whatever, but I couldn’t find a single clue to why the property is not propagated properly.
And, yep, (.cloneWithRows data-source rows) actually returns a valid ListViewDataSource object instance.
And then if I pass :data-source as :dataSource all I get is a puzzling "StaticRenderer.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object."
I’m using react-native 0.18.1 and reagent 0.5.1 with re-frame 0.6.0. I have checked this with reagent 0.6.0-alpha and re-frame 0.7.0-alpha and got the same errors.
I've been digging this for several hours and I guess I need some help. Any hints/ideas to try to fix this, any references in the code to look at? Thanks a ton in advance.

Answer 1

Well, the first thing is the data source should be passed to the view as :dataSource and not as :data-source. The latter doesn’t work for whatever reason. As a side note, the render row method can both be passed as :render-row or :renderRow and it works both ways. Heh.
Secondly, the render-row function should return a React component and not an array. The latter would be okay if the array was later rendered by reagent, but the listview doesn’t do any kind of post-processing on the data it gets from render-row and merely tries to return that to React, which bails if it’s a plain clojure array.
So the above render-row function should be written as:
(defn render-row []
(r/as-element [ui/view]))
And then everything works fine. :)