diff --git a/Examples/AdvancedEffects/src/Banner.js b/Examples/AdvancedEffects/src/Banner.js
index dd6ac41ad5d8c1e60bfe9939627a91b76caa29d3..e05bab690e50a19bbe04ff4b1f6c8152b1263a6c 100644
--- a/Examples/AdvancedEffects/src/Banner.js
+++ b/Examples/AdvancedEffects/src/Banner.js
@@ -24,7 +24,7 @@ void main( void ) {
   }
 });
 
-class Banner extends GL.Component {
+class Banner extends React.Component {
   render () {
     const { width, height, time } = this.props;
     return <GL.View
diff --git a/Examples/AdvancedEffects/src/Intro.js b/Examples/AdvancedEffects/src/Intro.js
index f4998887d332c72b9689c80f145e6d836a550764..dc243e9c5e7a098d07fc8d7ce68f95deb357df52 100644
--- a/Examples/AdvancedEffects/src/Intro.js
+++ b/Examples/AdvancedEffects/src/Intro.js
@@ -37,7 +37,7 @@ void main() {
   }
 });
 
-class Intro extends GL.Component {
+class Intro extends React.Component {
   render () {
     const { time, fps, width, height } = this.props;
     return <GL.View
diff --git a/Examples/AdvancedEffects/src/Transition.js b/Examples/AdvancedEffects/src/Transition.js
index 6e166654f8dca232437fa1ca712779c9ac24a8fa..cfe273a72cba4b704c28b0185e9bb067478231bb 100644
--- a/Examples/AdvancedEffects/src/Transition.js
+++ b/Examples/AdvancedEffects/src/Transition.js
@@ -1,9 +1,8 @@
 const React = require("react-native");
 const GL = require("gl-react-native");
 
-class Transition extends GL.Component {
-  render () {
-    const { width, height, shader, progress, from, to, uniforms } = this.props;
+module.exports = GL.createComponent(
+  ({ width, height, shader, progress, from, to, uniforms }) => {
     const scale = React.PixelRatio.get();
     return <GL.View
       preload
@@ -19,7 +18,5 @@ class Transition extends GL.Component {
         resolution: [ width * scale, height * scale ]
       }}
     />;
-  }
-}
-
-module.exports = Transition;
+  },
+  { displayName: "Transition" });
diff --git a/Examples/AdvancedEffects/src/Vignette.js b/Examples/AdvancedEffects/src/Vignette.js
index 7c0b7c986d09f2ab6b7025d259b848f72e40cb8c..1a03cc3b621bff8615d992c4bda20f847f3a4fa8 100644
--- a/Examples/AdvancedEffects/src/Vignette.js
+++ b/Examples/AdvancedEffects/src/Vignette.js
@@ -38,7 +38,7 @@ void main() {
 });
 
 
-class Vignette extends GL.Component {
+class Vignette extends React.Component {
   constructor (props) {
     super(props);
     this.onResponderMove = this.onResponderMove.bind(this);
diff --git a/Examples/Simple/Blur.js b/Examples/Simple/Blur.js
index ccda71011a99a8a7b6f230068f8394cae207f7d9..234c0cc7b676d6e45c24121046488b75140428c1 100644
--- a/Examples/Simple/Blur.js
+++ b/Examples/Simple/Blur.js
@@ -2,15 +2,12 @@ const React = require("react-native");
 const GL = require("gl-react-native");
 const Blur1D = require("./Blur1D");
 
-class Blur extends GL.Component {
-  render () {
-    const { width, height, factor, children, ...rest } = this.props;
-    return <Blur1D {...rest} width={width} height={height} direction={[ factor, 0 ]}>
+module.exports = GL.createComponent(({ width, height, factor, children }) =>
+    <Blur1D width={width} height={height} direction={[ factor, 0 ]}>
       <Blur1D width={width} height={height} direction={[ 0, factor ]}>
         {children}
       </Blur1D>
-    </Blur1D>;
-  }
-}
-
-module.exports = Blur;
+    </Blur1D>
+, {
+  displayName: "Blur"
+});
diff --git a/Examples/Simple/Blur1D.js b/Examples/Simple/Blur1D.js
index 4d0499e8e5d8c530da09af0ded6d4bbdfdec058f..b9a73371d60a83560d2b0d4bb9e5a37cff74a6bb 100644
--- a/Examples/Simple/Blur1D.js
+++ b/Examples/Simple/Blur1D.js
@@ -33,21 +33,18 @@ void main () {
   }
 });
 
-class Blur1D extends GL.Component {
-  render () {
-    const { width, height, direction, children: t, ...rest } = this.props;
-    return <GL.View
-      {...rest}
+module.exports = GL.createComponent(
+  ({ width, height, direction, children }) =>
+    <GL.View
       shader={shaders.blur1D}
       width={width}
       height={height}
       uniforms={{
         direction,
-        resolution: [ width, height ],
-        t
-      }}
-    />;
-  }
-}
-
-module.exports = Blur1D;
+        resolution: [ width, height ]
+      }}>
+      <GL.Uniform name="t">{children}</GL.Uniform>
+    </GL.View>
+, {
+  displayName: "Blur1D"
+});
diff --git a/Examples/Simple/HelloGL.js b/Examples/Simple/HelloGL.js
index 76530bfa5fa82af45b4f9067cc9d390682c10cda..30ac478d37ca26fbf3ee3793623dc4698acee7ad 100644
--- a/Examples/Simple/HelloGL.js
+++ b/Examples/Simple/HelloGL.js
@@ -14,15 +14,11 @@ void main () { // This function is called FOR EACH PIXEL
   }
 });
 
-class HelloGL extends React.Component {
-  render () {
-    const { width, height } = this.props;
-    return <GL.View
-      shader={shaders.helloGL}
-      width={width}
-      height={height}
-    />;
-  }
-}
-
-module.exports = HelloGL;
+module.exports = GL.createComponent(({ width, height }) =>
+  <GL.View
+    shader={shaders.helloGL}
+    width={width}
+    height={height}
+  />,
+  { displayName: "HelloGL" }
+);
diff --git a/Examples/Simple/HueRotate.js b/Examples/Simple/HueRotate.js
index e5ddd5d729ef27658dbdf2da9ad6abc6e26dd9dd..cc1e0d26148a7649b9d1ae14c1fed08f550e2cf2 100644
--- a/Examples/Simple/HueRotate.js
+++ b/Examples/Simple/HueRotate.js
@@ -24,17 +24,12 @@ void main() {
   }
 });
 
-class HueRotate extends GL.Component {
-  render () {
-    const { width, height, hue, children: tex, ...rest } = this.props;
-    return <GL.View
-      {...rest}
-      shader={shaders.hueRotate}
-      width={width}
-      height={height}
-      uniforms={{ hue, tex }}
-    />;
-  }
-}
-
-module.exports = HueRotate;
+module.exports = GL.createComponent(
+  ({ hue, children, ...rest }) =>
+  <GL.View
+    {...rest}
+    shader={shaders.hueRotate}
+    uniforms={{ hue }}>
+    <GL.Uniform name="tex">{children}</GL.Uniform>
+  </GL.View>
+, { displayName: "HueRotate" });
diff --git a/Examples/Simple/PieProgress.js b/Examples/Simple/PieProgress.js
index 8c21603be08a736701cbd03b16c4f80561ab8057..53637afc662fcce62be68cb0798e5c4fe3e3e607 100644
--- a/Examples/Simple/PieProgress.js
+++ b/Examples/Simple/PieProgress.js
@@ -32,35 +32,33 @@ void main () {
   }
 });
 
-class PieProgress extends React.Component {
-  render () {
-    const {
-      width,
-      height,
+module.exports = GL.createComponent(
+  ({
+    width,
+    height,
+    progress,
+    colorInside,
+    colorOutside,
+    radius
+  }) =>
+  <GL.View
+    width={width}
+    height={height}
+    shader={shaders.pieProgress}
+    opaque={false}
+    uniforms={{
+      dim: [ width, height ],
       progress,
       colorInside,
       colorOutside,
       radius
-    } = this.props;
-    return <GL.View
-      width={width}
-      height={height}
-      shader={shaders.pieProgress}
-      opaque={false}
-      uniforms={{
-        dim: [ width, height ],
-        progress,
-        colorInside,
-        colorOutside,
-        radius
-      }}
-    />;
-  }
-}
-PieProgress.defaultProps = {
-  colorInside: [0, 0, 0, 0],
-  colorOutside: [0, 0, 0, 0.5],
-  radius: 0.4
-};
-
-module.exports = PieProgress;
+    }}
+  />,
+  {
+    displayName: "PieProgress",
+    defaultProps: {
+      colorInside: [0, 0, 0, 0],
+      colorOutside: [0, 0, 0, 0.5],
+      radius: 0.4
+    }
+  });
diff --git a/Examples/Simple/Saturation.js b/Examples/Simple/Saturation.js
index a2ff9e233a53ce7fd4045de44de884363b7b40df..fefd99d7203b4de0167e5cc142d046b0f5284bd2 100644
--- a/Examples/Simple/Saturation.js
+++ b/Examples/Simple/Saturation.js
@@ -19,16 +19,11 @@ void main () {
   }
 });
 
-class Saturation extends React.Component {
-  render () {
-    const { width, height, factor, image } = this.props;
-    return <GL.View
-      shader={shaders.saturation}
-      width={width}
-      height={height}
-      uniforms={{ factor, image }}
-    />;
-  }
-}
-
-module.exports = Saturation;
+module.exports = GL.createComponent(
+  ({ factor, image, ...rest }) =>
+  <GL.View
+    {...rest}
+    shader={shaders.saturation}
+    uniforms={{ factor, image }}
+  />,
+{ displayName: "Saturation" });
diff --git a/Examples/Tests/Add.js b/Examples/Tests/Add.js
index c206217b5f693ccd754ddce098016eb37e73bf30..348abd7e6024167879bd2def5f80629604295dd3 100644
--- a/Examples/Tests/Add.js
+++ b/Examples/Tests/Add.js
@@ -19,9 +19,8 @@ void main () {
   }
 });
 
-class Add extends GL.Component {
-  render () {
-    const { width, height, children } = this.props;
+module.exports = GL.createComponent(
+  ({ width, height, children }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Add");
     const [t1, t2] = children;
     return <GL.View
@@ -30,7 +29,4 @@ class Add extends GL.Component {
       height={height}
       uniforms={{ t1, t2 }}
     />;
-  }
-}
-
-module.exports = Add;
+  }, { displayName: "Add" });
diff --git a/Examples/Tests/Blur.js b/Examples/Tests/Blur.js
index c541b600f85aaaa65bda1bfbbb50cefc7a0daff5..59873798e437a62af06f3157a4e0887724e61121 100644
--- a/Examples/Tests/Blur.js
+++ b/Examples/Tests/Blur.js
@@ -26,28 +26,25 @@ function directionForPass (p, factor, total) {
  - Powerful blur:
  <Blur factor={20} passes={6} width={w} height={h}>{url}</Blur>
  */
-class Blur extends GL.Component {
-  render () {
-    const { width, height, factor, children, passes } = this.props;
-    const rec = p => p <= 0 ? children :
-      <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
-        {rec(p-1)}
-      </Blur1D>;
-
-    return rec(passes || 0);
-  }
-}
 
-Blur.defaultProps = {
-  passes: 2
-};
-
-Blur.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  factor: PropTypes.number.isRequired,
-  children: PropTypes.any.isRequired,
-  passes: PropTypes.number
-};
-
-module.exports = Blur;
+module.exports = GL.createComponent(
+  ({ width, height, factor, children, passes }) => {
+    const rec = p => p <= 0 ? children :
+    <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
+      {rec(p-1)}
+    </Blur1D>;
+    return rec(passes);
+  },
+  {
+    displayName: "Blur",
+    defaultProps: {
+      passes: 2
+    },
+    propTypes: {
+      width: PropTypes.number,
+      height: PropTypes.number,
+      factor: PropTypes.number.isRequired,
+      children: PropTypes.any.isRequired,
+      passes: PropTypes.number
+    }
+  });
diff --git a/Examples/Tests/Blur1D.js b/Examples/Tests/Blur1D.js
index 39b9a05972bd1ff94366c428118b4f62880beb64..afdb9e704feca6c26ac154866d8411eb7887316e 100644
--- a/Examples/Tests/Blur1D.js
+++ b/Examples/Tests/Blur1D.js
@@ -32,10 +32,9 @@ void main () {
   }
 });
 
-class Blur1D extends GL.Component {
-  render () {
-    const { width, height, direction, children } = this.props;
-    return <GL.View
+module.exports = GL.createComponent(
+  ({ width, height, direction, children }) =>
+    <GL.View
       shader={shaders.blur1D}
       width={width}
       height={height}
@@ -44,15 +43,7 @@ class Blur1D extends GL.Component {
         resolution: [ width, height ]
       }}>
       <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.View>;
-  }
-}
-
-Blur1D.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  direction: PropTypes.array.isRequired,
-  children: PropTypes.any.isRequired
-};
-
-module.exports = Blur1D;
+    </GL.View>
+, {
+  displayName: "Blur1D"
+});
diff --git a/Examples/Tests/Copy.js b/Examples/Tests/Copy.js
index c789ff26151ff921922cfe041229050fcaef9347..85da29376448556b5353069f9fa6a75954298d5d 100644
--- a/Examples/Tests/Copy.js
+++ b/Examples/Tests/Copy.js
@@ -21,17 +21,14 @@ void main () {
   }
 });
 
-class Copy extends GL.Component {
-  render () {
-    const { width, height, children: t, last, ...rest } = this.props;
-    return <GL.View
-      {...rest}
-      shader={shaders.Copy}
-      width={width}
-      height={height}
-      uniforms={{ t, preventAlphaMult: !last }}
-    />;
-  }
-}
-
-module.exports = Copy;
+module.exports = GL.createComponent(
+  ({ width, height, children: t, last, ...rest }) =>
+  <GL.View
+    {...rest}
+    shader={shaders.Copy}
+    width={width}
+    height={height}
+    uniforms={{ t, preventAlphaMult: !last }}
+  />,
+  { displayName: "Copy" }
+);
diff --git a/Examples/Tests/Display2.js b/Examples/Tests/Display2.js
index 74939fc297b0819508cc0338791888b5ec47dfe3..018db35979c16d69ef890445141d7f469113d31e 100644
--- a/Examples/Tests/Display2.js
+++ b/Examples/Tests/Display2.js
@@ -22,9 +22,8 @@ void main () {
   }
 });
 
-class Display2 extends GL.Component {
-  render () {
-    const { width, height, children, vertical, ...rest } = this.props;
+module.exports = GL.createComponent(
+  ({ width, height, children, vertical, ...rest }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Display2");
     let [t1, t2] = children;
     if (vertical) [t1,t2]=[t2,t1]; // just because webgl y's is reversed
@@ -33,14 +32,11 @@ class Display2 extends GL.Component {
       shader={shaders.display2}
       width={width}
       height={height}
-      uniforms={{ t1, t2, vertical }}
+      uniforms={{ t1, t2, vertical: !!vertical }}
       debug={true}
     />;
+  },
+  {
+    displayName: "Display2"
   }
-}
-
-Display2.defaultProps = {
-  vertical: false
-};
-
-module.exports = Display2;
+);
diff --git a/Examples/Tests/HelloGL.js b/Examples/Tests/HelloGL.js
index 84393e1783408a0642f760443574222f3fa4dea3..bd3cf99460cfffe936c1482aa6394c2f51732b0e 100644
--- a/Examples/Tests/HelloGL.js
+++ b/Examples/Tests/HelloGL.js
@@ -14,15 +14,12 @@ void main () { // This function is called FOR EACH PIXEL
   }
 });
 
-class HelloGL extends GL.Component {
-  render () {
-    const { width, height } = this.props;
-    return <GL.View
-      shader={shaders.helloGL}
-      width={width}
-      height={height}
-    />;
-  }
-}
-
-module.exports = HelloGL;
+module.exports = GL.createComponent(
+  ({ width, height }) =>
+  <GL.View
+    shader={shaders.helloGL}
+    width={width}
+    height={height}
+  />,
+  { displayName: "HelloGL" }
+);
diff --git a/Examples/Tests/Layer.js b/Examples/Tests/Layer.js
index b1163bb966d93c4e9b1773b49e11b79496e5175b..521b4575bea48088bac2973bd56db1a8045e1097 100644
--- a/Examples/Tests/Layer.js
+++ b/Examples/Tests/Layer.js
@@ -19,9 +19,8 @@ void main () {
   }
 });
 
-class Layer extends GL.Component {
-  render () {
-    const { children, ...rest } = this.props;
+module.exports = GL.createComponent(
+  ({ children, ...rest }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
     const [t1, t2] = children;
     return <GL.View
@@ -29,7 +28,8 @@ class Layer extends GL.Component {
       shader={shaders.layer}
       uniforms={{ t1, t2 }}
     />;
+  },
+  {
+    displayName: "Layer"
   }
-}
-
-module.exports = Layer;
+);
diff --git a/Examples/Tests/Multiply.js b/Examples/Tests/Multiply.js
index 44e7bd423acaf1391fdd1bb36af1e9d320484431..12979f2252ea0c403f1a6268cc8b2410d2e90c09 100644
--- a/Examples/Tests/Multiply.js
+++ b/Examples/Tests/Multiply.js
@@ -19,9 +19,8 @@ void main () {
   }
 });
 
-class Multiply extends GL.Component {
-  render () {
-    const { width, height, children } = this.props;
+module.exports = GL.createComponent(
+  ({ width, height, children }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Multiply");
     const [t1, t2] = children;
     return <GL.View
@@ -30,7 +29,5 @@ class Multiply extends GL.Component {
       height={height}
       uniforms={{ t1, t2 }}
     />;
-  }
-}
-
-module.exports = Multiply;
+  },
+  { displayName: "Multiply" });
diff --git a/Examples/Tests/Premultiply.js b/Examples/Tests/Premultiply.js
deleted file mode 100644
index 08bfcbd10aec5584ce104d393f88cd918ea465bf..0000000000000000000000000000000000000000
--- a/Examples/Tests/Premultiply.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const React = require("react-native");
-const GL = require("gl-react-native");
-
-const shaders = GL.Shaders.create({
-  Premultiply: {
-    frag: `
-precision highp float;
-
-varying vec2 uv;
-uniform sampler2D t;
-
-void main () {
-  vec4 c = texture2D(t, uv);
-  c.rgb *= c.a;
-  gl_FragColor = c;
-}
-`
-  }
-});
-
-class Premultiply extends GL.Component {
-  render () {
-    const { children: t, ...rest } = this.props;
-    return <GL.View
-      {...rest}
-      opaque={false}
-      shader={shaders.Premultiply}
-      uniforms={{ t }}
-    />;
-  }
-}
-
-module.exports = Premultiply;
diff --git a/Examples/Tests/TransparentNonPremultiplied.js b/Examples/Tests/TransparentNonPremultiplied.js
index 0951ff778779e4b299b03e7a0273e7b3fd18f001..f9efaf7db166ee2f30a066a2db2a4891780668c5 100644
--- a/Examples/Tests/TransparentNonPremultiplied.js
+++ b/Examples/Tests/TransparentNonPremultiplied.js
@@ -16,16 +16,12 @@ void main () {
   }
 });
 
-class TransparentNonPremultiplied extends GL.Component {
-  render () {
-    const { children: t, ...rest } = this.props;
-    return <GL.View
-      {...rest}
-      opaque={false}
-      shader={shaders.TransparentNonPremultiplied}
-      uniforms={{ t }}
-    />;
-  }
-}
-
-module.exports = TransparentNonPremultiplied;
+module.exports = GL.createComponent(
+  ({ children: t, ...rest }) =>
+  <GL.View
+    {...rest}
+    opaque={false}
+    shader={shaders.TransparentNonPremultiplied}
+    uniforms={{ t }}
+  />,
+{ displayName: "TransparentNonPremultiplied" });
diff --git a/Examples/build.sh b/Examples/build.sh
index b2cdab918c58476f0c97f807e5dc1b561b18744c..3746580f110cf3ec3819f7470918a52570081d08 100755
--- a/Examples/build.sh
+++ b/Examples/build.sh
@@ -1,8 +1,9 @@
 
 for ex in */; do
   cd $ex;
-  rm -rf node_modules;
-  npm i;
+  #rm -rf node_modules;
+  #npm i;
+  npm i gl-react-native;
   react-native bundle --minify;
   cd ..;
 done;
diff --git a/package.json b/package.json
index 6433f0ff7427280ba5cc9550b068631c089ef1d0..5c88a4ba4d2463253348f1e9af81c1cae15ebd01 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,9 @@
     "react-native": ">=0.9.0 <0.13.0"
   },
   "dependencies": {
-    "invariant": "2.1.0",
+    "invariant": "2.1.1",
     "react-native": ">=0.9.0 <0.13.0",
-    "gl-react-core": "1.1.x"
+    "gl-react-core": "1.2.x"
   },
   "devDependencies": {
     "eslint": "^1.3.1",
diff --git a/src/ComponentDeprecated.js b/src/ComponentDeprecated.js
new file mode 100644
index 0000000000000000000000000000000000000000..55810f3185b9a786f0899d8086f736b074bb800b
--- /dev/null
+++ b/src/ComponentDeprecated.js
@@ -0,0 +1,3 @@
+const React = require("react-native");
+const {createComponentDeprecated} = require("gl-react-core");
+module.exports = createComponentDeprecated(React);
diff --git a/src/View.js b/src/View.js
index 99e2ba93d0f25702b699343f339bc98a33df1614..d04365bad4bd67150b7b07958364ff213caccf38 100644
--- a/src/View.js
+++ b/src/View.js
@@ -2,7 +2,6 @@ const {createView} = require("gl-react-core");
 const React = require("react-native");
 const Shaders = require("./Shaders");
 const Uniform = require("./Uniform");
-const Component = require("./Component");
 
 const {
   requireNativeComponent,
@@ -46,7 +45,7 @@ const renderVcontainer = function ({ style, width, height }, contents, renderer)
   </View>;
 };
 
-const GLView = createView(React, Shaders, Uniform, Component, renderVcontainer, renderVcontent, renderVGL);
+const GLView = createView(React, Shaders, Uniform, renderVcontainer, renderVcontent, renderVGL);
 
 GLView.prototype.setNativeProps = function (props) {
   this.refs.native.setNativeProps(props);
diff --git a/src/Component.js b/src/createComponent.js
similarity index 53%
rename from src/Component.js
rename to src/createComponent.js
index 89ac8c68b06536013eb28a5db73b96dd1a02c49e..71f83410df11173e13c8b2b085410b988e2165ad 100644
--- a/src/Component.js
+++ b/src/createComponent.js
@@ -1,3 +1,4 @@
 const React = require("react-native");
+const View = require("./View");
 const {createComponent} = require("gl-react-core");
-module.exports = createComponent(React);
+module.exports = createComponent(React, View);
diff --git a/src/index.js b/src/index.js
index 37c3339b44799eda08d79004dd0e47a80783e27e..c46d43ba097aab6b66c9b672d1026a7762e95e07 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,13 @@
 const Shaders = require("./Shaders");
 const View = require("./View");
 const Uniform = require("./Uniform");
-const Component = require("./Component");
+const Component = require("./ComponentDeprecated");
+const createComponent = require("./createComponent");
 
 module.exports = {
   Shaders,
   View,
   Uniform,
-  Component
+  Component,
+  createComponent
 };