VirtualizedList + Om.next

immutable-v-list.cljs

(ns immutable-v-list
  "Example of React Native VirtualizedList from Om.next"
  (:require [om.next :as om :refer-macros [defui]]))

(set! js/window.React (js/require "react"))
(set! js/window.ReactNative (js/require "react-native"))
(def ^js/window.ReactNative ReactNative js/window.ReactNative)


(defn create-element-no-auto-js
  "Creates an element without auto-converting opts via (cljs->js opts).
   Needed for VirtualizedList, et al"
  [rn-component opts & children]
  ;remove :data from opts so we don't convert it uselessly to JS objects
  (let [js-opts (clj->js (dissoc opts :data))
        data (get opts :data)]
    ;add "data" back to the JS object as an immutable Clojure structure
    (aset js-opts "data" data)
    (apply js/React.createElement rn-component js-opts children)))

;VirtualizedList
(def virtualized-list (partial create-element-no-auto-js (.-VirtualizedList ReactNative)))


(defui ImmutableVList
  Object
  (render [this]
    (virtualized-list
      {:style        (get (om/props this) :style {})
       :data         (get (om/props this) :data [])
       ;return tuple [item-data idx] - idx needed for keyExtractor
       ;item-data is Clj data (usually a map)
       :getItem      (fn [data idx]
                       (let [item-data (nth data idx nil)]
                         [item-data idx]))
       :getItemCount (fn [data] (count data))
       ;needs to return a key as string
       :keyExtractor (fn [[_ idx]] (str idx))
       :renderItem   (fn [^js/Object js-object]
                       (let [[item-data _] (.-item js-object)
                             idx (.-index js-object)
                             render-item (om/get-computed this :render-item)]
                         (render-item item-data idx)))})))
(def immutable-v-list (om/factory ImmutableVList))


;USAGE
;======================================================================================================================
;given a vector of products...
(let [products [{:p 1} {:p 2} {:p 3}]]
  ;... display them in VirtualizedList view
  (immutable-v-list
    ;pass our own render-item function via om/computed
    (om/computed
      ;props
      {:data  products
       ;any React Native style
       :style {}}
      ;computed
      {:render-item
       (fn [product idx]
         ;product is {:p 1} or {:p 2}, etc on each item render

         ;render any valid Om/React component as usual
         ;note: my-row-item component not provided in this example
         (my-row-item product))})))