Fork me on GitHub
#cljsrn
<
2019-05-29
>
Stefan12:05:32

I posted this question on #reagent but maybe here is more appropriate. I’m trying to use react-native-view-overflow but I’m not sure how to type the required code in ClojureScript. I have the following inside one of my view components:

[:> rn/FlatList
     {:data (clj->js (mapv (fn [n] {:key n}) (range 0 100)))
      :horizontal true
      ;; :Item-separator-component #(r/as-element [separator])
      :render-item (fn [details] (r/as-element [cell (js->clj details)]))}]
According to the docs (https://github.com/entria/react-native-view-overflow#usage-with-flatlist) I need to wrap whatever I put into render-item with ViewOverflow. Just making the first thing in cell a ViewOverflow doesn’t seem to do the job… For completeness, this is cell:
(defn cell [details]
  (let [item (details "item")
        key (item "key")]
    [:> rn/View {:style {:width 80
                         :background-color (if (= 0 (mod key 2)) "#dd666611" "#ffffff33")}}
     [:> rn/Text {:style {:left -15 :width 30 :text-align "center"}} key]]))

alex12:05:02

Hi all, I just spent some time debugging the use of re-frame's :http-xhrio on React Native for Android. I was getting the Network Request failed error, which seems to be a common error for a lot of folks testing Android & re-frame. Seems like the issue is possibly a result of XmlHttpRequest use in the underlying cljs-ajax library, which doesn't play well with Android? https://github.com/JulianBirch/cljs-ajax/issues/155

vikeri12:05:43

@rahx1t That’s correct. In RN we use fetch instead

👍 8
alex12:05:04

Ah okay, just use js/fetch directly? I've been trying something like this to hit my backend; the request gets to the endpoint but doesn't seem to be recognizing the JSON body. Does anything stand out to you that might be off?

(reg-fx
 ::http-xhrio-fetch
 (fn [{:keys [method body uri on-success on-failure]}]
   (let [method (cond (#{:post "POST"} method) "POST"
                      (#{:patch "PATCH"} method) "PATCH"
                      (#{:get "GET"} method) "GET")
         params {:method "POST"
                 :body (.stringify js/JSON {:routine-habit-id 1})
                 :headers {"Content-Type" "application/json"
                           "Accept" "application/json"}}] 
     (print (clj->js params) uri)
     (-> (js/fetch uri (clj->js params))
         (.then #(.json %))
         (.then js->clj)
         (.then on-success)
         (.catch #(do (js/console.error %)
                      (dispatch [on-failure %])))))))

vikeri12:05:36

:body (.stringify js/JSON #js{:routine-habit-id 1}

vikeri12:05:03

You need a #js before the map before running strinify on it

alex12:05:30

That was it

alex12:05:45

Thanks so much!

vikeri12:05:53

No problemo! 😄

alex13:05:30

Makes sense I was trying to stringify a Clojure data structure, which is what the print expression was showing me. I was just too dense to figure it out!

Stefan13:05:30

Now that Alex’s issue is solved, I’d like to bump mine 🙂 https://clojurians.slack.com/archives/C0E1SN0NM/p1559134412047800

lepistane15:05:15

@stefan.van.den.oord i might be wrong but i don't see that you are using CellRendererComponent={ViewOverflow} anywhere and code you posted inside cell is regular view

Stefan15:05:24

Ouch I completely missed that CellRendererComponent={ViewOverflow} part. Indeed the cell code that I posted was without ViewOverflow because it didn’t work and I wasn’t sure where to put it. But it works now, thank you!! 🙂

👍 4
Stefan15:05:52

Just for the benefit of potential other struggling people, this is the version that works:

(defn cell [details]
  (let [item (details "item")
        key (item "key")]
    [:> ViewOverflow {:style {:width 80
                              :background-color (if (= 0 (mod key 2)) "#dd666611" "#ffffff33")}}
     [:> rn/Text {:style {:left -15 :width 30 :text-align "center"}} key]]))

(defn Staff [styles]
  [:> rn/View styles
   [:> rn/ImageBackground {:source staff-img
                           :resize-mode "stretch"
                           :style {:width "100%" :height 66}}
    [:> rn/FlatList
     {:data (clj->js (mapv (fn [n] {:key n}) (range 0 100)))
      :horizontal true
      :Cell-renderer-component ViewOverflow
      :render-item (fn [details] (r/as-element [cell (js->clj details)]))}]]])