Experiment with Cycle.js and React Native

index.ios.js

'use strict';

var React = require('react-native');
var Cycle = require('cyclejs');
var {Rx, h} = Cycle;
var createExperimentalIOSRenderer = require('./src/ios-renderer.ios.js');
var {StyleSheet, Text, TextInput, View} = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

var model = Cycle.createModel(() =>
  ({
    number$: Rx.Observable.interval(1000).startWith(0).map(() => Math.ceil(Math.random()*1000))
  })
);

var view = Cycle.createDataFlowNode(model =>
  ({
    vtree$: model.get('number$').map(number =>
      React.createElement(View, {style: styles.container},
        React.createElement(Text, {style: styles.welcome}, String(number))
      )
    )
  })
);

var renderer = createExperimentalIOSRenderer('react-native-sandbox');

renderer.inject(view).inject(model);

ios-renderer.ios.js

'use strict';

var Cycle = require('cyclejs');
var React = require('react-native');
var {AppRegistry, View} = React;

function createExperimentalIOSRenderer(target) {
  return Cycle.createDataFlowSink((view) => {
    AppRegistry.registerComponent(target, () => React.createClass({
      componentWillMount: function() {
        view.get('vtree$').subscribe((vtree) => this.setState({vtree: vtree}))
      },
      getInitialState: function() {
        return {vtree: React.createElement(View)};
      },
      render: function() {
        return this.state.vtree;
      }
    }));
  });
}

module.exports = createExperimentalIOSRenderer;

Cycle.js version 0.18.2
React Native version 0.3.4

Sorry for being slightly off-topic, couldn't find this in a search. Is it a convention to end a variable with $ to indicate it's an Observable?

@jonrh Yes, it's an Observable convention and "required convention when working with custom elements". The start of the FAQ mentions this if you want to check it out 😄
https://github.com/staltz/cycle/blob/master/docs/faq.md

@arlair Thanx! I just stumbled upon the FAQ and was going to update my comment, you beat me to it! It's weird that you don't get notified of replies to gists. Thanks again!

@arlair dead link