Fork me on GitHub
#cljsrn
<
2017-07-06
>
bru16:07:48

a-ha, today I definitely have a question: I am trying to use nativebase components… in general they work great with my little cljsrn project, but I can’t get the thumbnail component to work. Does anybody here have experience with nativebase over cljsrn?

bru16:07:29

the hiccup looks something like this:

[list-item {:key (:id contact) :avatar true}
             [left {} [thumbnail {:source {:uri (:avatar contact)}}]]
             [body {} [text (:name contact)] [text {:note true} (:snip contact)]]]

bru16:07:24

and the contact data looks something like: {:id 12 :name "White Rabbit" :avatar "./images/rabbit.png" :snip "it's late..."}

bru22:07:07

to answer my own question ->

(let [avatar (js/require (:avatar contact))]
              [list-item {:key (:id contact) :avatar true}
               [left {} [thumbnail {:source avatar}]]
               [body {} [text (:name contact)] [text {:note true} (:snip contact)]]])

joshmiller23:07:50

Can anyone help me understand how to translate something from JS->CLJS, namely: https://github.com/deanmcpherson/react-native-sortable-listview/blob/master/example.js

joshmiller23:07:36

class MyComponent extends React.Component {
  render() {
    return (
      <SortableListView
        style={{ flex: 1 }}
        data={data}
        order={order}
        onRowMoved={e => {
          order.splice(, 0, order.splice(e.from, 1)[0])
          this.forceUpdate()
        }}
        renderRow={row => <RowComponent data={row} />}
      />
    )
  }
}
That renderRow bit — I’m not sure how to use reagent to pass in the row component.

joshmiller23:07:36

I’ve tried [sortable-listview {:data ... :order ... :renderRow (r/as-component [text "hi"])}] for example

joshmiller23:07:02

(among a whole bunch of other possibilities)

joshmiller23:07:12

Ah, got it: :renderRow (fn [row] (r/as-element [text "hi"]))

joshmiller23:07:40

(or obviously any other way of using as-element and passing the row data in)