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;