Fork me on GitHub

Is there a way to log in re-natal?


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


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


Hey again, now I'm trying to get 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
                                   (js->clj :keywordize-keys true)
                      list-item  (-> state
                                     (js->clj :keywordize-keys true)
                  (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 %)})


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.


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]


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


I'm also struggling with react-navigation


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


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

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

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


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


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


what version are you on ?


@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.


ah that's good news


I should be able to translate rum to reagent


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


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


@danieleneal package.json:

   "scripts": {
    "start": "node_modules/react-native/packager/ --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"



(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 []
  (.registerComponent app-registry "..." (fn [] root-component-factory)))


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.


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!


@danieleneal np, my pleasure... Now, if someone got scrollTo... of working, please let me know. Just can't get it right. There's no error, but it's not scrolling.


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?