cljsrn

lepistane 2023-01-07T13:20:01.690339Z

Did anyone use https://github.com/computerjazz/react-native-draggable-flatlist ? Trying to translate https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/Example/screens/BasicScreen.tsx to cljs as an exercise

(defn drag []
  (let [[data, setData] (react/useState (clj->js (into [] (map (fn [i] {:key (str "key-" i)
                                                                        :text (str i)
                                                                        :label (str i)}) (range 5)))))
        render-item (react/useCallback (fn [e]
                                         (let [{:keys [item drag isActive]} (js->clj e :keywordize-keys true)]
                                           (r/as-element
                                            [:> fl/ShadowDecorator
                                             [:> fl/ScaleDecorator
                                              [:> fl/OpacityDecorator
                                               [:> rn/TouchableOpacity {:activeOpacity 1
                                                                        :onLongPress drag
                                                                        :disabled isActive
                                                                        :style {:height 100
                                                                                :alignItems "center"
                                                                                :justifyContent "center"
                                                                                :backgroundColor (random-color)
                                                                                }}
                                                [:> rn/Text (:text item)]]]]])))
                                       (clj->js []))]
    [:> fl/default {:data data

                    :on-drag-end (fn [data]
                                   (setData data))

                    :key-extractor (fn [item]

                                     (str (get-in (js->clj item :keywordize-keys true) [:key])))

                    :render-item render-item

                    :render-placeholder (fn [] (r/as-element [:> rn/View {:style {:flex 1
                                                                                  :backgroundColor "tomato"}}]))}])
  )
calling it like
[:> gesture/GestureHandlerRootView {:style {:flex 1}}
   [:f> drag]]
It shows up everything is work except that i get exception once on-drag-end happens
TypeError: undefined is not a function

This error is located at:
    in DraggableFlatListInner
    in RefProvider
    in AnimatedValueProvider
    in PropsProvider
    in DraggableFlatList (created by quest.app.drag)
    in quest.app.drag
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by quest.app.root)
    in quest.app.root
    in Unknown
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in Quest(RootComponent), js engine: hermes
I tried importing JS example into cljs and it works without a problem. I am missing some interop knowledge here. It seems that problem is here https://github.com/computerjazz/react-native-draggable-flatlist/blob/5f4bdb055768ddbcb6e4117dcc4545f0896621f2/src/components/DraggableFlatList.tsx#L394 but not sure how to address it