This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-05-11
Channels
- # beginners (132)
- # boot (2)
- # cider (17)
- # cljs-dev (6)
- # cljsrn (24)
- # clojure (134)
- # clojure-austin (2)
- # clojure-dusseldorf (11)
- # clojure-france (1)
- # clojure-greece (27)
- # clojure-italy (17)
- # clojure-madison (1)
- # clojure-russia (31)
- # clojure-serbia (1)
- # clojure-sg (2)
- # clojure-spec (30)
- # clojure-uk (66)
- # clojurescript (73)
- # core-async (2)
- # cursive (8)
- # data-science (2)
- # datomic (23)
- # dirac (8)
- # emacs (18)
- # gsoc (1)
- # hoplon (36)
- # immutant (26)
- # leiningen (6)
- # off-topic (21)
- # om (19)
- # onyx (6)
- # other-languages (1)
- # pedestal (3)
- # proton (2)
- # random (1)
- # re-frame (1)
- # reagent (2)
- # remote-jobs (2)
- # ring-swagger (8)
- # rum (21)
- # slack-help (1)
- # spacemacs (4)
- # specter (16)
- # untangled (6)
@vikeri I included ./shim.js under module on .rn-natal file and that solved the problem.
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 %)})
))
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 println
s:
#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 []
[some-text]
(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/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"
}
}
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)))
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 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.