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