How to use flat-list and section-list?

[lccambiaghi]

Hi, I am a beginner with reagent as well as react-native. Sorry if my question is trivial, I would be grateful to be pointed out to resources where to learn about reagent. I am following the React Native docs and I cannot figure out how to use the components in the issue title.

This is how far I got:

(defn flat-list []
  [rrn/flat-list
   {:data [{:key "Devin"}
           {:key "Devn"}
           {:key "Den"}
           {:key "Jay"}]
    :render-item #(<> rn/Text
                      #js {:style #js {:color     "black"
                                       :textAlign "center"}}
                      (str %))}])

How can I actually display the values of the maps?

[Charlynux]

I just find how to manipulate flat-list, so I write here my solution.

(ns ...
   (:require [reagent.core :as r]
             [reagent.react-native :as rn]))

;; ....

[rn/flat-list
    {:data [{:key "Devin"}
            {:key "Devn"}
            {:key "Den"}
            {:key "Jay"}]
     :keyExtractor (fn [item index] (:key item))
     :renderItem (fn [props]
                   (let [item (:item (js->clj props :keywordize-keys true))]
                     (r/as-element
                      [rn/text {:style {:color "black" :textAlign "center"}} (str item)])))}]

The two important points here are :

1. renderItem must return an element
2. "props" from renderItem is a Javascript object, not a Clojure one.