This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-05-09
Channels
- # aws (4)
- # bangalore-clj (1)
- # beginners (94)
- # boot (19)
- # cider (42)
- # cljs-dev (21)
- # cljsrn (4)
- # clojure (142)
- # clojure-austin (10)
- # clojure-greece (25)
- # clojure-italy (14)
- # clojure-russia (14)
- # clojure-serbia (13)
- # clojure-sg (6)
- # clojure-spec (74)
- # clojure-uk (69)
- # clojurescript (236)
- # consulting (1)
- # cursive (26)
- # data-science (6)
- # datascript (2)
- # datomic (31)
- # editors (5)
- # emacs (24)
- # funcool (5)
- # hoplon (8)
- # jobs-rus (1)
- # luminus (12)
- # lumo (17)
- # off-topic (90)
- # om (45)
- # onyx (5)
- # pedestal (2)
- # powderkeg (12)
- # protorepl (2)
- # re-frame (30)
- # remote-jobs (2)
- # ring-swagger (17)
- # rum (46)
- # slack-help (1)
- # test-check (2)
- # yada (62)
What concepts Ali?
:autoplay true
doesn't seem to work for me on client side. Renders serverside fine.
Also tried "autoplay" true
:auto-play "autoplay"
or :auto-play true
Fixes it. nvm 🙂
react-navigation: I'm using re-natal with rum and I want to implement a navigator (using react-navigation). 1. Get the stack-navigator:
(def ReactNavigation (js/require "react-navigation"))
(def stack-nav (.-StackNavigator ReactNavigation))
seems to be ok
2. Define the AppRoot (Home):
(defc AppRoot < rum/reactive pn/react-mixin
[app markers]
...)
3. Implement the navigator... Well, without navigator, I have this line (support/mount (AppRoot state/app state/markers))
. I will have to change this to mount the navigator. Implementing the navigator...
my.ns.android.core=> (def c (clj->js {:Home {:screen (AppRoot state/app state/markers)}}))
#'my.ns.android.core/c
my.ns.android.core=> c
#js {:Home #js {:screen #js {:$$typeof 60103, :type #object[Function "function (props, context, updater) {
...}}}})
my.ns.android.core=> (stack-nav c)
#object[Error Invariant Violation: The component for route 'Home' must be a a React component. For example:
import MyScreen from './MyScreen';
...
Home: {
screen: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
Home: {
screen: MyNavigator,
}]
Apparently, I don't create a react component using create-element
... How to create a react component from a rum component?Or, stated differently: how to translate:
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
into rum/cljs (defc AppRoot < rum/reactive pn/react-mixin [app markers] ...)
?Or: defc
doesn't return a react component, right?
@kurt-o-sys Try invoking c
, that should return a react component.
(c)
? c is not a function (it's a map)?
my.ns.android.core=> (c)
#object[Error Error: Invalid arity: 1]
G__10184
eval code
eval@[native code]
@kurt-o-sys Sorry, I meant AppRoot
🙂
Well, I actually invoked AppRoot
:
(def c (clj->js {:Home {:screen (AppRoot state/app state/markers)}}))
The js code I have to invoke is:
StackNavigator({
Home: { screen: <some react component> },
});
Where <some-react-component>
is the AppRoot, which I invoked as (AppRoot state/app state/markers)
.
Still, it complains it's not a React component... Let me try something else.So basically this is the problem since often the JSX folks never quite explain what JSX expands to. It becomes easy when you know this.
ok... I have a create-element function somewhere... sec.
my.ns.android.core=> (def c (clj->js {:Home {:screen (create-element (AppRoot state/app state/markers))}}))
#'my.ns.android.core/c
my.ns.android.core=> c
#js {:Home #js {:screen #js {:$$typeof 60103, :type #js {:$$typeof 60103, :type #object[Function "function (props, context, updater) {
if (process.env.NODE_ENV !== 'production') {
process.env.NODE_ENV !== 'production' ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See: : void 0;
}
if (this.__reactAutoBindPairs.length) {
bindAutoBindMethods(this);
}
this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
this.state = null;
var initialState = this.getInitialState ? this.getInitialState() : null;
if (process.env.NODE_ENV !== 'production') {
if (initialState === undefined && this.getInitialState._isMockFunction) {
initialState = null;
}
}
!(typeof initialState === 'object' && !Array.isArray(initialState)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.getInitialState(): must return an object or null', Constructor.displayName || 'ReactCompositeComponent') : _prodInvariant('82', Constructor.displayName || 'ReactCompositeComponent') : void 0;
this.state = initialState;
}"], ...}}}
my.ns.android.core=> (stack-nav. c)
#object[Error Invariant Violation: The component for route 'Home' must be a a React component. For example:
import MyScreen from './MyScreen';
...
Home: {
screen: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
Home: {
screen: MyNavigator,
}]
...
eval code
eval@[native code]
figwheel$client$utils$eval_helper
nil
my.ns.android.core=>
and:
(defn create-element [rn-comp opts & children]
(apply js/React.createElement rn-comp (clj->js opts) children))
Actually, this is the code that I have to 'translate':
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
I wonder if (defc xyz ...)
transpiles to something like class xyz extends React.Component {...}. If so, I have no clue why
react-navigation` fails to agree that it's a react component 😛.I expect this is right: StackNavigator({Home: { screen: AppRoot }});
-> (stack-nav. (clj->js {:Home {:screen (AppRoot state/app state/markers)}}))
oh... ok... let's try 🙂
right, that will not work:
my.ns.android.core=> (def c (clj->js {:Home {:screen (:rum/class (meta (AppRoot state/app state/markers)))}}))
#'my.ns.android.core/c
my.ns.android.core=> c
#js {:Home #js {:screen nil}}
my.ns.android.core=> (meta (AppRoot state/app state/markers))
nil
no metadata 😛?
oh, sorry... got it
=> ((meta AppRoot) state/app state/markers)
#object [cljs.core.Atom {...}]
Hmmm... and now wrap this in a class?ok...
=> (def create-class (.-createClass React))
=> (create-class (AppRoot state/app state/markers))
#object[Error Invariant Violation: ReactClass: You're attempting to use a component as a mixin. Instead, just use a regular object.]
invariant@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1617:24
mixSpecIntoComponent@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:22076:90
createClass@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:22270:25
eval code
eval@[native code]
figwheel$client$utils$eval_helper
nil
=> (support/create-class ((meta AppRoot) state/app state/markers))
#object[Error Invariant Violation: createClass(...): Class specification must implement a `render` method.]
invariant@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1617:24
createClass@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:22285:86
eval code
eval@[native code]
figwheel$client$utils$eval_helper
nil
Let's try the other way around: translating
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
to cljs?(defc HomeScreen
[]
(text "Hello, navigation"))
Right?
How to add static navigationOptions = {title: 'Welcome' };
?=> (stack-nav. (clj->js {:Home {:screen (:rum/class (meta HomeScreen))}}))
#object[NavigationContainer "function NavigationContainer(props) {
babelHelpers.classCallCheck(this, NavigationContainer);
var _this = babelHelpers.possibleConstructorReturn(this, (NavigationContainer.__proto__ || Object.getPrototypeOf(NavigationContainer)).call(this, props));
_this.subs = null;
_this._handleOpenURL = function (url) {
var parsedUrl = _this._urlToPathAndParams(url);
if (parsedUrl) {
var path = parsedUrl.path,
params = parsedUrl.params;
var action = Component.router.getActionForPathAndParams(path, params);
if (action) {
_this.dispatch(action);
}
}
};
_this.dispatch = function (action) {
var state = _this.state;
if (!_this._isStateful()) {
return false;
}
var nav = Component.router.getStateForAction(action, state.nav);
if (nav && nav !== state.nav) {
_this.setState({ nav: nav }, function () {
return _this._onNavigationStateChange(state.nav, nav, action);
});
return true;
}
return false;
};
_this._validateProps(props);
_this.state = {
nav: _this._isStateful() ? Component.router.getStateForAction(_NavigationActions2.default.init()) : null
};
return _this;
}"]
Nice...
but no arguments, so to pass arguments, I may have to nest components? (Or is there another solution?)
Thanks a lot already! It's really weird, but it does seem to work 😛