'use strict'
var React = require('react-native');
var {
  View,WebView
} = React;
 
var Canvas = React.createClass({
  propTypes: {
    context: React.PropTypes.object,render: React.PropTypes.func.isrequired
  },render() {
    var contextString = JSON.stringify(this.props.context);
    var renderString = this.props.render.toString();
    return (
      <View>
        <WebView automaticallyAdjustContentInsets={false}
          html={"<style>*{margin:0;padding:0;}canvas{position:absolute;transform:translateZ(0);}</style><canvas></canvas><script>var canvas=document.querySelector('canvas');(" + renderString + ").call(" + contextString + ",canvas);</script>"}
          opaque={false} underlayColor={'transparent'}
          style={this.props.style} />
      </View>
    );
  }
});
module.exports = Canvas;

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
var React = require('react-native');
var {
  AppRegistry,Text,View,Component
} = React;
var Canvas = require('./Canvas');
 
var SimpleApp = React.createClass({
  render() {
    var context = {msg: "Hello!"};
    return (
      <View style={styles.container}>
        <View>
          <Canvas context={context}
          render={renderCanvas}
          style={{height: 200,width: 200}} />
        </View>
      </View>
    )
  }
});
 
function renderCanvas(canvas) {
  var message = this.msg;
  var ctx = canvas.getContext('2d'),particles = [],patriclesNum = 50,w = 200,h = 200,colors = ['#f35d4f','#f36849','#c0d988','#6ddaf1','#f1e85b'];
  canvas.width = 200;
  canvas.height = 200;
  canvas.style.left = (window.innerWidth - 200) / 2 + 'px';
  if (window.innerHeight > 200)
    canvas.style.top = (window.innerHeight - 200) / 2 + 'px';
 
  function draw() {
    ctx.font = "20px Georgia";
    ctx.fillText(message,10,50);
  }
  draw();
}
 
var styles = React.StyleSheet.create({
  container: {
    padding: 30,marginTop: 65,borderColor: '#e7e7e7',},});
 
AppRegistry.registerComponent('SimpleApp',() => SimpleApp);