Fork me on GitHub
#cljsrn
<
2017-05-11
>
mv04:05:14

Is there a way to log in re-natal?

mv04:05:04

js/console.log doesn’t seem to output anywhere that I can see…

lukesugiura05:05:10

@vikeri I included ./shim.js under module on .rn-natal file and that solved the problem.

kurt-o-sys07:05:06

Hey again, now I'm trying to get https://facebook.github.io/react-native/docs/flatlist.html working. Well, a list itself is not a big issue, but I can't make scrollToIndex, scrollToEnd or scrollToItem to work. Here's some code:

(defcs flatlisttest < navigation
  {:did-mount (fn[state]
                (let [flatlist (-> state
                                   :rum/react-component
                                   .-refs
                                   (js->clj :keywordize-keys true)
                                   :list-ref)
                      list-item  (-> state
                                     :some.ns/nav
                                     .-state
                                     (js->clj :keywordize-keys true)
                                     :params
                                     :item)]
                  (println (.getOwnPropertyNames js/Object flatlist))
                  (println (.keys js/Object (.-_listRef flatlist)))
                  ;;(.scrollToOffset flatlist 6)
                  ;;(.scrollToEnd flatlist)
                  ;;(.scrollToItem flatlist (clj->js {
                  ;;                                  :item "list-item::5" ;; :item list-item
                  ;;                                  :animated false}))
                  ))}
  [{navigation :some.ns/nav
    :as state}]
  (let [data (clj->js all)]
    (flatlist {:data all
               :keyExtractor (fn [item idx] (str "list-item::" idx))
               :ref :list-ref
               :renderItem #(list-item %)})
    ))

kurt-o-sys07:05:37

So, uncommenting any of the (.scrollTo... ...)-methods doesn't make the list scroll to that item (or to the end). When I look for the methods in flatlist, I don't get any scrollTo...-methods. According the the docs, these methods should be available on a FlatList.

kurt-o-sys07:05:18

Output of the printlns:

#js [props context refs updater _hasWarnedLegacy _captureRef _getItem _getItemCount _keyExtractor _onViewableItemsChanged _renderItem _reactInternalInstance state _listRef]

#js [props context refs updater state _averageCellLength _hasDataChangedSinceEndReached _hasWarned _highestMeasuredFrameIndex _headerLength _frames _footerLength _scrollMetrics _scrollRef _sentEndForContentLength _totalCellLength _totalCellsMeasured _captureScrollRef _onCellUnmount _onLayout _onLayoutFooter _onLayoutHeader _onContentSizeChange _onScroll _onScrollBeginDrag _updateCellsToRender _createViewToken _getFrameMetricsApprox _getFrameMetrics _updateCellsToRenderBatcher _viewabilityHelper _reactInternalInstance]

kurt-o-sys08:05:38

The question seems to boil down to: why are the FlatList-methods not available?

danielneal15:05:33

I'm also struggling with react-navigation

danielneal15:05:46

Can't get even the most basic stack navigator to appear, just seeing the red screen of death

danielneal15:05:50

(def react-navigation (js/require "react-navigation"))
(def stack-navigator (aget react-navigation "StackNavigator"))

(defn some-text []
  [rn/text "hey"])

(defn app-root []
  [some-text]
  (stack-navigator (clj->js {:home {:screen (reagent/reactify-component some-text)}})))

danielneal15:05:02

console.error "Error rendering component in app.core.app_root"

danielneal15:05:32

@kurt-o-sys did you get the navigation stuff working

danielneal15:05:53

what version are you on ?

kurt-o-sys15:05:16

@danieleneal Yes, I got it working. I'm using rum, not reagent, but it shouldn't matter that much. I may be available in a few hours.

danielneal15:05:08

ah that's good news

danielneal15:05:24

I should be able to translate rum to reagent

danielneal15:05:55

if you've got the barest, most minimal example that would be awesome to see

danielneal15:05:43

I'm on (well, attempting to use 😳) react-native 0.43/react-navigation 1.0.0-beta9

kurt-o-sys17:05:54

@danieleneal package.json:

{
   ...
   "scripts": {
    "start": "node_modules/react-native/packager/packager.sh --nonPersistent",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",
    ...
    "react-navigation": "^1.0.0-beta.9"
  },
  "jest": {
    "preset": "jest-react-native"
  },
  "devDependencies": {
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "19.0.2",
    "jest-react-native": "18.0.0",
    "react-test-renderer": "16.0.0-alpha.6"
  }
}

kurt-o-sys17:05:30

core.cljs:

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

;; defining react components/elements
(def view (partial create-element (.-View ReactNative)))
(def text (partial create-element (.-Text ReactNative)))

;; load navigation
(def ReactNavigation (js/require "react-navigation"))
(def stack-nav (.-StackNavigator ReactNavigation))

;; app-registry of React Native
(def app-registry (.-AppRegistry ReactNative))

;; define a `reactive` React Native component
(defc AppRoot < rum/reactive
  [nav state]
  ...)
  
;; Need this weird thing because I need to run `(:rum/class (meta ...))` 
;; to make it work. That's something weird. The default components 
;; returned by rum (which should be plain React Native components) 
;; do not work as expected.
;; Since I can't pass parameters (app state) to `(:rum/class (meta ...))`, 
;; I had to wrap the actual component `AppRoot` into something else
;; (I still don't get why it's necessary, but it works)

;; Also, I added navigation as a mixin - I'll show you later
;; but it adds a local state to the component

(defcs AppRootScreen < navigation
  [{navigation :nav
    :as state}]
  (AppRoot navigation state))

(def App (stack-nav. (clj->js {:Home {:screen (:rum/class (meta AppRootScreen))
                                      :navigationOptions (fn[nav] (clj->js {:title "HOME"}))}))

(defonce root-component-factory (support/make-root-component-factory))

(defn mount-app []
  (support/mount (create-element App {})))

(defn init []
  (mount-app)
  (.registerComponent app-registry "..." (fn [] root-component-factory)))

kurt-o-sys17:05:16

navigation mixin:

(def navigation {:init (fn[state, props]
                         (assoc state :nav (.-navigation props)))})
The navigator attaches itself to the RN component, so in the init-phase, it's available in the props of the component. All this mixin does is adding it to the state. The first (and only) parameter in (defcs AppRootScreen < navigation [{navigation :nav :as state}] ... is the return value of this mixin. Using mixins or not is pretty much similar. In reagent, you also pass a map of keyword-functions, only in a different place. It's pretty much the same map.

danielneal18:05:11

Thanks @kurt-o-sys! This is super helpful. Fingers crossed I can get it working tomorrow. Even just knowing that you've got it working is good motivation to keep me going with it!

kurt-o-sys18:05:22

@danieleneal np, my pleasure... Now, if someone got scrollTo... of https://facebook.github.io/react-native/docs/flatlist.html working, please let me know. Just can't get it right. There's no error, but it's not scrolling.

benny21:05:03

Trying to get more familiar with REPL in general, but trying to figure out how to get completion to work with Cider when writing my RN app, any tips?