@anmonteiro do you have a usage from example? 🙂 specifically, how to add a navigationOptions static field to rum component

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  }; ...

@misha @anmonteiro Yeah that’s great! I’m going to try to get it to work with cljs next week.

@vikeri @anmonteiro I think this is it (did not try it yet, though): https://github.com/tonsky/rum/blob/gh-pages/examples/rum/examples/custom_props.cljs#L15-L33

(def props
  {:msgData "Components can store custom data on the underlying React component."})

(rum/defcc custom-props < {:class-properties props} [this]
   ;; using aget to avoid writing externs
   [:div (aget this "msgData")])

@misha Ok cool! I was thinking of trying to avoid the whole props thing and integrate it directly with re-frame

looks too javascripty. the only reasons I am keeping on reading the docs are: the native thread animations, and declarative settings.

@vikeri can you describe re-frame in 1 or 2 sentences for me? please

event-sourcing?

@misha (Redux/Elm in CLJS): One single atom for state, update the state only with event handlers that can be dispatched to from anywhere in the app. Define subscriptions to parts of the state, defererence these subscriptions in your components and they will automatically update whenever that part of the state changes. Uses reagent as React wrapper.

re-frame is the redux of cljs land

I don't know what either of elm/redux represent 😛

to add in the discussion: reagent is to reactjs while re-frame is to redux

@vikeri ok, looks like what I am doing with rum

Elm is a programming language that is like haskell but compiles to JS. Redux is probably the most popular way (along with Relay) of managing state in React

might be useful btw: https://www.youtube.com/watch?v=-jwQ3sGoiXg

I know that, but not actual ideas behind them.

@ejelome thanks, but think I'll pass for now (that's why I asked for just a few sentences)

@misha The foundation is from FRP (Functional Reactive Programming) and Unidirectional data flow. The data only flows in one direction. If you haven’t heard of it it’s quite a foreign concept but very intuitive once you grok it. I recommend reading the re-frame readme if you really want to understand it.

I am familiar with FRP, I just wanted to know what all the hype around reframe is about.

Ok great! Then it’s basically a very pragmatic but still elegant application to using FRP in UI development.

what I have is a few large atoms, derived from datascript, views, subscribed to those atoms (directly, or via smaller derived atoms in-between), and a bunch of functions, mutating those atoms (this is the piece to be replaced with events+dispatcher for event sourcing).

sounds pretty similar (on high level) to me (I read through the reframe docs a bit). does it? or am I missing something fundamental here?

@misha Not really, re-frame just takes care of everything for you in an opinionated to me mostly very good way. It adds things like middleware, so that you can log all your events etc.

hm, ok, I'll look closer into examples and docs. thanks

@misha @vikeri I haven't tried it, just knew that CLJS + RN had historically had problems with Navigator and saw that which may be a step in a different direction!

I am trying to use google maps in react native. The react native docs suggest I use the airbnb react-native-maps. However it doesnt seem to work. I see that the airbnb react-native-maps is written as an es6 component (extends React.component and has a constructor) as opposed to the createClass. I am not sure where to look or how to call r/adapt-react-class for this component. Any ideas?

@rohit_ I think you can just call it normally

however, you may need to access the module as .-default if it's a es6 module

like this: (def video (r/adapt-react-class (.-default (js/require "react-native-video/Video.js"))))

don't know if that's the issue you're seeing

but anyway I'm pretty sure ES6 classes should just work with adapt-react-class

ok yeah im trying to see how it works in both in the browser and on the web Thanks @pesterhazy

your suggestion was good for the web

@pesterhazy it doesnt seem to work for react-native-maps

@pesterhazy Is there a more idiomatic way to do that besides .-default? I use this method, but all the warnings around default being a reserved keyword kind of scare me.

that's a static field (named "default") access on a js object. probably can't be more idiomatic than this

try aget instead

(.-innerHTML el)
(aget el "innerHTML")

or maybe even better:

(goog.object.get el "innerHTML")

@levitanong

https://github.com/cljs/api/issues/128#issuecomment-122271806

@misha I’m not sure how using aget or goog.object.get will resolve the warnings, as the compiler (only when compiling for production) seems to complain simply about the fact that i’m trying to access default, and not the method by which i’m trying to access it.

¯\(ツ)/¯

haha

maybe @anmonteiro knows

what's the problem? does it produce an error under advanced compilation?

@levitanong gets warning about accessing default filed in advanced compilation with ~this:

(def video (r/adapt-react-class (.-default (js/require "react-native-video/Video.js"))))

if it's just a warning, don't worry about it

as long as it works

haha alrighty

thanks guys

@levitanong can you paste the warning you're getting though?

and is it at compile or runtime?

@anmonteiro just need to finish something, then will do!