diff --git a/Examples/AdvancedEffects/package.json b/Examples/AdvancedEffects/package.json
index 15135c74bd52190fad7cee1c27d5098a4f4de588..bb1bfcdbce742dcb14c1d952f6605c53142c333b 100644
--- a/Examples/AdvancedEffects/package.json
+++ b/Examples/AdvancedEffects/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
+    "gl-react-core": "file:../../../gl-react-core",
     "glsl-transitions": "^2015.11.8",
     "react-native": "^0.14.2"
   }
diff --git a/Examples/AdvancedEffects/src/Banner.js b/Examples/AdvancedEffects/src/Banner.js
index e05bab690e50a19bbe04ff4b1f6c8152b1263a6c..7e8edc7341c66b1602e65ca97c2cf5b3ba9e5941 100644
--- a/Examples/AdvancedEffects/src/Banner.js
+++ b/Examples/AdvancedEffects/src/Banner.js
@@ -1,6 +1,6 @@
 const React = require("react-native");
-
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 const shaders = GL.Shaders.create({
   banner: {
     frag: `
@@ -27,13 +27,9 @@ void main( void ) {
 class Banner extends React.Component {
   render () {
     const { width, height, time } = this.props;
-    return <GL.View
-      shader={shaders.banner}
-      width={width}
-      height={height}
-      uniforms={{ time: time }}
-      opaque={false}
-    />;
+    return <Surface width={width} height={height} opaque={false}>
+      <GL.Node shader={shaders.banner} uniforms={{ time: time }} />
+    </Surface>;
   }
 }
 
diff --git a/Examples/AdvancedEffects/src/Intro.js b/Examples/AdvancedEffects/src/Intro.js
index dc243e9c5e7a098d07fc8d7ce68f95deb357df52..e5d69912ac6a657309bddef53de821ac478859a8 100644
--- a/Examples/AdvancedEffects/src/Intro.js
+++ b/Examples/AdvancedEffects/src/Intro.js
@@ -3,8 +3,8 @@ const {
   View,
   Text,
 } = React;
-
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   drunkEffect: {
@@ -40,38 +40,37 @@ void main() {
 class Intro extends React.Component {
   render () {
     const { time, fps, width, height } = this.props;
-    return <GL.View
-      shader={shaders.drunkEffect}
-      width={width}
-      height={height}
-      opaque={false}
-      uniforms={{
-        time: time,
-        freq: 20 - 14 * Math.sin(time / 7),
-        amp: 0.05 - 0.03 * Math.cos(time / 4),
-        colorSeparation: 0.02,
-        moving: 1
-      }}>
-      <GL.Uniform name="texture">
-        <View style={{ flex: 1, justifyContent: "center" }}>
-          <Text style={{ color: "#00BDF3", fontSize: 32, letterSpacing: -1.0 }}>
-            GL REACT NATIVE
-          </Text>
-          <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
-            <View style={{ backgroundColor: "#00FF66", marginRight: 8, width: 14, height: 14, borderRadius: 7, opacity: time%1 < 0.6 ? 1 : 0 }} />
-            <Text style={{ flex: 1, color: "#00FF66", fontSize: 14 }}>
-              {time.toFixed(2)}s
-            </Text>
-            <Text style={{ flex: 1, color: "#fff", fontSize: 14 }}>
-              {(fps).toFixed(0)} fps
-            </Text>
-            <Text style={{ flex: 1, color: "#999", fontSize: 14 }}>
-              {"<Text />"}
+    return <Surface width={width} height={height} opaque={false}>
+      <GL.Node
+        shader={shaders.drunkEffect}
+        uniforms={{
+          time: time,
+          freq: 20 - 14 * Math.sin(time / 7),
+          amp: 0.05 - 0.03 * Math.cos(time / 4),
+          colorSeparation: 0.02,
+          moving: 1
+        }}>
+        <GL.Uniform name="texture">
+          <View style={{ flex: 1, justifyContent: "center" }}>
+            <Text style={{ color: "#00BDF3", fontSize: 32, letterSpacing: -1.0 }}>
+              GL REACT NATIVE
             </Text>
+            <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
+              <View style={{ backgroundColor: "#00FF66", marginRight: 8, width: 14, height: 14, borderRadius: 7, opacity: time%1 < 0.6 ? 1 : 0 }} />
+              <Text style={{ flex: 1, color: "#00FF66", fontSize: 14 }}>
+                {time.toFixed(2)}s
+              </Text>
+              <Text style={{ flex: 1, color: "#fff", fontSize: 14 }}>
+                {(fps).toFixed(0)} fps
+              </Text>
+              <Text style={{ flex: 1, color: "#999", fontSize: 14 }}>
+                {"<Text />"}
+              </Text>
+            </View>
           </View>
-        </View>
-      </GL.Uniform>
-    </GL.View>;
+        </GL.Uniform>
+      </GL.Node>
+    </Surface>;
   }
 }
 
diff --git a/Examples/AdvancedEffects/src/Slideshow.js b/Examples/AdvancedEffects/src/Slideshow.js
index 32744d0fcdf81beecf5496fba81cc186653c7888..22ee0d094edef232fddc409d336969388334d332 100644
--- a/Examples/AdvancedEffects/src/Slideshow.js
+++ b/Examples/AdvancedEffects/src/Slideshow.js
@@ -1,6 +1,7 @@
 const React = require("react-native");
 const { View, Text, StyleSheet } = React;
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 const TransitionGenerator = require("./TransitionGenerator");
 const Transition = require("./Transition");
 
@@ -33,15 +34,15 @@ class Slideshow extends React.Component {
     const transitionUniforms = this._uniforms;
 
     return <View style={styles.root}>
-      <Transition
-        width={width}
-        height={height}
-        progress={transitionProgress}
-        from={transitionFrom}
-        to={transitionTo}
-        shader={transitionShader}
-        uniforms={transitionUniforms}
-      />
+      <Surface  width={width} height={height}>
+        <Transition
+          progress={transitionProgress}
+          from={transitionFrom}
+          to={transitionTo}
+          shader={transitionShader}
+          uniforms={transitionUniforms}
+        />
+      </Surface>
     <View style={styles.legend}>
         <Text style={styles.textName}>{transitionName}</Text>
         <Text style={styles.textInfo}>(GLSL.io)</Text>
diff --git a/Examples/AdvancedEffects/src/Transition.js b/Examples/AdvancedEffects/src/Transition.js
index cfe273a72cba4b704c28b0185e9bb067478231bb..29f1dab6ef8a45ae706e00dd9392f88d0cfee804 100644
--- a/Examples/AdvancedEffects/src/Transition.js
+++ b/Examples/AdvancedEffects/src/Transition.js
@@ -1,10 +1,10 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 module.exports = GL.createComponent(
   ({ width, height, shader, progress, from, to, uniforms }) => {
     const scale = React.PixelRatio.get();
-    return <GL.View
+    return <GL.Node
       preload
       shader={shader}
       width={width}
diff --git a/Examples/AdvancedEffects/src/Vignette.js b/Examples/AdvancedEffects/src/Vignette.js
index 1a03cc3b621bff8615d992c4bda20f847f3a4fa8..d8bebf07637d39ca48b809134595138108c9abfb 100644
--- a/Examples/AdvancedEffects/src/Vignette.js
+++ b/Examples/AdvancedEffects/src/Vignette.js
@@ -1,5 +1,6 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   imageVignette: {
@@ -55,24 +56,26 @@ class Vignette extends React.Component {
   render () {
     const { width, height, time, source } = this.props;
     const { finger } = this.state;
-    return <GL.View
-      preload
-      onStartShouldSetResponder={() => true}
-      onMoveShouldSetResponder={() => true}
-      onResponderMove={this.onResponderMove}
-      shader={shaders.imageVignette}
+    return <Surface
       width={width}
       height={height}
       opaque={false}
-      uniforms={{
-        time: time,
-        freq: 10 + 2 * Math.sin(0.7*time),
-        texture: source,
-        amp: 0.05 + Math.max(0, 0.03*Math.cos(time)),
-        moving: 0,
-        finger: finger
-      }}
-    />;
+      preload
+      onStartShouldSetResponder={() => true}
+      onMoveShouldSetResponder={() => true}
+      onResponderMove={this.onResponderMove}>
+      <GL.Node
+        shader={shaders.imageVignette}
+        uniforms={{
+          time: time,
+          freq: 10 + 2 * Math.sin(0.7*time),
+          texture: source,
+          amp: 0.05 + Math.max(0, 0.03*Math.cos(time)),
+          moving: 0,
+          finger: finger
+        }}
+      />
+    </Surface>;
   }
 }
 
diff --git a/Examples/AdvancedEffects/src/index.js b/Examples/AdvancedEffects/src/index.js
index 46ad8f249ee1bb095f1d384c43e8a97886d65c4a..d9bae7f9be52d83fc91631eb678fc7905a088355 100644
--- a/Examples/AdvancedEffects/src/index.js
+++ b/Examples/AdvancedEffects/src/index.js
@@ -1,3 +1,4 @@
+require("gl-react-core/react-native");
 const React = require("react-native");
 const {
   StyleSheet,
@@ -61,6 +62,7 @@ class AdvancedEffects extends React.Component {
           width={viewportW}
           height={introH}
         />
+
         <Vignette
           time={time}
           width={imgW}
diff --git a/Examples/Simple/package.json b/Examples/Simple/package.json
index a629209de89e971c1a7c2de358ab94422c3c2865..0131ad8d4bc834effc7d019f9cfbe5fb3c9acbdc 100644
--- a/Examples/Simple/package.json
+++ b/Examples/Simple/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
+    "gl-react-core": "file:../../../gl-react-core",
     "react-native": "^0.14.2",
     "react-native-material-kit": "^0.2.2"
   }
diff --git a/Examples/Simple/src/AnimatedHelloGL.js b/Examples/Simple/src/AnimatedHelloGL.js
index 58fbe7824b6bddbd2bf611659c58c73851e7137a..bbb4425c29899be68c5483161ac63cdd50ed8bed 100644
--- a/Examples/Simple/src/AnimatedHelloGL.js
+++ b/Examples/Simple/src/AnimatedHelloGL.js
@@ -1,5 +1,6 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -38,12 +39,12 @@ class HelloGL extends React.Component {
   render () {
     const { width, height } = this.props;
     const { value } = this.state;
-    return <GL.View
-      shader={shaders.helloGL}
-      width={width}
-      height={height}
-      uniforms={{ value }}
-    />;
+    return <Surface width={width} height={height}>
+      <GL.Node
+        shader={shaders.helloGL}
+        uniforms={{ value }}
+      />
+    </Surface>;
   }
 }
 
diff --git a/Examples/Simple/src/Blur.js b/Examples/Simple/src/Blur.js
index 234c0cc7b676d6e45c24121046488b75140428c1..aa0d88fa3a91e0bc8b09062b64b3a003fcfdd159 100644
--- a/Examples/Simple/src/Blur.js
+++ b/Examples/Simple/src/Blur.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 const Blur1D = require("./Blur1D");
 
 module.exports = GL.createComponent(({ width, height, factor, children }) =>
diff --git a/Examples/Simple/src/Blur1D.js b/Examples/Simple/src/Blur1D.js
index b9a73371d60a83560d2b0d4bb9e5a37cff74a6bb..fe2514efe16f1e3bea9138fd29800ce4192c1e8b 100644
--- a/Examples/Simple/src/Blur1D.js
+++ b/Examples/Simple/src/Blur1D.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   blur1D: {
@@ -35,7 +35,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, direction, children }) =>
-    <GL.View
+    <GL.Node
       shader={shaders.blur1D}
       width={width}
       height={height}
@@ -44,7 +44,7 @@ module.exports = GL.createComponent(
         resolution: [ width, height ]
       }}>
       <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.View>
+    </GL.Node>
 , {
   displayName: "Blur1D"
 });
diff --git a/Examples/Simple/src/HelloGL.js b/Examples/Simple/src/HelloGL.js
index 30ac478d37ca26fbf3ee3793623dc4698acee7ad..66bb819f7ac01b13643b6f1a1681c35f71cc4ea1 100644
--- a/Examples/Simple/src/HelloGL.js
+++ b/Examples/Simple/src/HelloGL.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -14,11 +14,7 @@ void main () { // This function is called FOR EACH PIXEL
   }
 });
 
-module.exports = GL.createComponent(({ width, height }) =>
-  <GL.View
-    shader={shaders.helloGL}
-    width={width}
-    height={height}
-  />,
+module.exports = GL.createComponent(() =>
+  <GL.Node shader={shaders.helloGL} />,
   { displayName: "HelloGL" }
 );
diff --git a/Examples/Simple/src/HueRotate.js b/Examples/Simple/src/HueRotate.js
index cc1e0d26148a7649b9d1ae14c1fed08f550e2cf2..7a799fa19fa798fdb09676e588ce5932c4dd161b 100644
--- a/Examples/Simple/src/HueRotate.js
+++ b/Examples/Simple/src/HueRotate.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   hueRotate: {
@@ -26,10 +26,10 @@ void main() {
 
 module.exports = GL.createComponent(
   ({ hue, children, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.hueRotate}
     uniforms={{ hue }}>
     <GL.Uniform name="tex">{children}</GL.Uniform>
-  </GL.View>
+  </GL.Node>
 , { displayName: "HueRotate" });
diff --git a/Examples/Simple/src/OneFingerResponse.js b/Examples/Simple/src/OneFingerResponse.js
index 3f360311eb32d49ecad9850baaaecc65cfc300ce..b1f3e6dac8aef9671749b8fdce0561cda80a81b5 100644
--- a/Examples/Simple/src/OneFingerResponse.js
+++ b/Examples/Simple/src/OneFingerResponse.js
@@ -1,5 +1,6 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   oneFingerResponse: {
@@ -55,7 +56,7 @@ class OneFingerResponse extends React.Component {
   render () {
     const { width, height } = this.props;
     const { pressed, position } = this.state;
-    return <GL.View
+    return <Surface
       onStartShouldSetResponderCapture={() => true}
       onMoveShouldSetResponderCapture={() => true}
       onResponderTerminationRequest={() => false}
@@ -64,10 +65,12 @@ class OneFingerResponse extends React.Component {
       onResponderRelease={this.onTouchEnd}
       onResponderTerminate={this.onTouchEnd}
       width={width}
-      height={height}
-      shader={shaders.oneFingerResponse}
-      uniforms={{ pressed, position }}
-    />;
+      height={height}>
+      <GL.Node
+        shader={shaders.oneFingerResponse}
+        uniforms={{ pressed, position }}
+      />
+    </Surface>;
   }
 }
 
diff --git a/Examples/Simple/src/PieProgress.js b/Examples/Simple/src/PieProgress.js
index 5435c5cc14e2e93f94a4f4e7b9c9601fc67a3306..f8037e6cdba51a116c578f98243eeb33a013a440 100644
--- a/Examples/Simple/src/PieProgress.js
+++ b/Examples/Simple/src/PieProgress.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   pieProgress: {
@@ -41,11 +41,8 @@ module.exports = GL.createComponent(
     colorOutside,
     radius
   }) =>
-  <GL.View
-    width={width}
-    height={height}
+  <GL.Node
     shader={shaders.pieProgress}
-    opaque={false}
     uniforms={{
       dim: [ width, height ],
       progress,
diff --git a/Examples/Simple/src/Saturation.js b/Examples/Simple/src/Saturation.js
index fefd99d7203b4de0167e5cc142d046b0f5284bd2..086b8ffc20acf10992b6d8b1bd56fe7ad30cab8f 100644
--- a/Examples/Simple/src/Saturation.js
+++ b/Examples/Simple/src/Saturation.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   saturation: {
@@ -21,7 +21,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ factor, image, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.saturation}
     uniforms={{ factor, image }}
diff --git a/Examples/Simple/src/index.js b/Examples/Simple/src/index.js
index 466a2bf67f13dbcb77c16f7547ffeaf6ad1ab2cb..8a0c360a79084ec705e7c3a409d2cd71c15375b5 100644
--- a/Examples/Simple/src/index.js
+++ b/Examples/Simple/src/index.js
@@ -1,3 +1,5 @@
+require("gl-react-core/react-native");
+
 const React = require("react-native");
 const {
   StyleSheet,
@@ -8,6 +10,8 @@ const {
   Component,
 } = React;
 
+const { Surface } = require("gl-react-native");
+
 const {
   mdl: {
     Progress,
@@ -109,7 +113,9 @@ class Simple extends Component {
 
       <Demos onChange={current => this.setState({ current })} value={current}>
         <Demo title="1. Hello GL">
-          <HelloGL width={256} height={171} ref="helloGL" />
+          <Surface width={256} height={171} ref="helloGL">
+            <HelloGL />
+          </Surface>
           <View style={{ paddingTop: 20, alignItems: "center", flexDirection: "row" }}>
             <Button onPress={this.onCapture1}>captureFrame()</Button>
             {captured && <Image source={{ uri:captured }} style={{ marginLeft: 20, width: 51, height: 34 }} />}
@@ -117,12 +123,12 @@ class Simple extends Component {
         </Demo>
 
         <Demo title="2. Saturate an Image">
-          <Saturation
-              width={256}
-              height={171}
+          <Surface width={256} height={171}>
+            <Saturation
               factor={saturationFactor}
               image={{ uri: "http://i.imgur.com/iPKTONG.jpg" }}
             />
+          </Surface>
           <Slider
             max={8}
             onChange={saturationFactor => this.setState({ saturationFactor })}
@@ -130,15 +136,13 @@ class Simple extends Component {
         </Demo>
 
         <Demo id={3} current={current} title="3. Hue Rotate on Text+Image">
-          <HueRotate
-            autoRedraw
-            width={256}
-            height={180}
-            hue={hue}>
-            <Image style={{ width: 256, height: 244 }} source={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }}/>
-            <Text style={styles.demoText1}>Throw me to the wolves</Text>
-            <Text style={styles.demoText2}>{text}</Text>
-          </HueRotate>
+          <Surface autoRedraw width={256} height={180}>
+            <HueRotate hue={hue}>
+              <Image style={{ width: 256, height: 244 }} source={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }}/>
+              <Text style={styles.demoText1}>Throw me to the wolves</Text>
+              <Text style={styles.demoText2}>{text}</Text>
+            </HueRotate>
+          </Surface>
           <Slider
             max={2 * Math.PI}
             onChange={hue => this.setState({ hue })}
@@ -161,11 +165,9 @@ class Simple extends Component {
             }}
             source={{ uri: "http://i.imgur.com/qM9BHCy.jpg" }}/>
             <View style={{ position: "absolute", top: 0, left: 0 }}>
-              <PieProgress
-                width={256}
-                height={180}
-                progress={progress}
-              />
+              <Surface width={256} height={180} opaque={false}>
+                <PieProgress progress={progress} width={256} height={180} />
+              </Surface>
             </View>
           </View>
           <Slider
@@ -189,47 +191,50 @@ class Simple extends Component {
         </Demo>
 
         <Demo id={7} current={current} title="7. Blur (2-pass)">
-          <Blur preload width={256} height={180} factor={factor + 1}>
-            http://i.imgur.com/3On9QEu.jpg
-          </Blur>
+          <Surface preload width={256} height={180}>
+            <Blur width={256} height={180} factor={factor + 1}>
+              http://i.imgur.com/3On9QEu.jpg
+            </Blur>
+          </Surface>
           <Slider
             max={2}
             onChange={factor => this.setState({ factor })} />
         </Demo>
 
         <Demo id={8} current={current} title="8. Blur+Hue over UI">
-          <HueRotate
-            hue={-switch1 + 2 * switch2 + 4 * switch3}
+          <Surface
             width={256}
             height={160}
             autoRedraw
             eventsThrough
             visibleContent>
-            <Blur
-              width={256}
-              height={160}
-              factor={factor}>
+            <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
               <Blur
                 width={256}
                 height={160}
-                factor={factor/2}>
-                <View style={{ width: 256, height: 160, padding: 10, backgroundColor: "#F9F9F9" }}>
-                  <Slider
-                    style={{ height: 80 }}
-                    max={2}
-                    onChange={factor => this.setState({ factor })}
-                  />
-                <View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
-                  <Switch style={{flex:1}} checked={switch1} onCheckedChange={({checked:switch1}) => this.setState({ switch1 })} />
-                  <Switch style={{flex:1}} checked={switch2} onCheckedChange={({checked:switch2}) => this.setState({ switch2 })} />
-                  <Switch style={{flex:1}} checked={switch3} onCheckedChange={({checked:switch3}) => this.setState({ switch3 })} />
-                </View>
-                <Progress progress={factor} style={{height: 10, marginTop: 8, flex:1}} />
+                factor={factor}>
+                <Blur
+                  width={256}
+                  height={160}
+                  factor={factor/2}>
+                  <View style={{ width: 256, height: 160, padding: 10, backgroundColor: "#F9F9F9" }}>
+                    <Slider
+                      style={{ height: 80 }}
+                      max={2}
+                      onChange={factor => this.setState({ factor })}
+                    />
+                  <View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
+                    <Switch style={{flex:1}} checked={switch1} onCheckedChange={({checked:switch1}) => this.setState({ switch1 })} />
+                    <Switch style={{flex:1}} checked={switch2} onCheckedChange={({checked:switch2}) => this.setState({ switch2 })} />
+                    <Switch style={{flex:1}} checked={switch3} onCheckedChange={({checked:switch3}) => this.setState({ switch3 })} />
+                  </View>
+                  <Progress progress={factor} style={{height: 10, marginTop: 8, flex:1}} />
 
-                </View>
+                  </View>
+                </Blur>
               </Blur>
-            </Blur>
-          </HueRotate>
+            </HueRotate>
+          </Surface>
         </Demo>
 
         <Demo id={9} current={current} title="9. Texture from array">
diff --git a/Examples/Tests/package.json b/Examples/Tests/package.json
index 4202c44cd905f5a16c5b2f3d7cf4886738de9c0e..dc88e9e23da6d6a190dc431d1af4ee87f1fcff50 100644
--- a/Examples/Tests/package.json
+++ b/Examples/Tests/package.json
@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
-    "react-native": "^0.15.0"
+    "gl-react-core": "file:../../../gl-react-core",
+    "react-native": "^0.14.2"
   },
   "devDependencies": {
     "react-native-cli": "^0.1.7"
diff --git a/Examples/Tests/src/Add.js b/Examples/Tests/src/Add.js
index 348abd7e6024167879bd2def5f80629604295dd3..2bc17581c4717595cfab9e5d3e83d8aae280c81f 100644
--- a/Examples/Tests/src/Add.js
+++ b/Examples/Tests/src/Add.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   add: {
@@ -23,7 +23,7 @@ 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
+    return <GL.Node
       shader={shaders.add}
       width={width}
       height={height}
diff --git a/Examples/Tests/src/Blur.js b/Examples/Tests/src/Blur.js
index 59873798e437a62af06f3157a4e0887724e61121..acf495b2078fbe8a0e20e52a522033b9999bb4ac 100644
--- a/Examples/Tests/src/Blur.js
+++ b/Examples/Tests/src/Blur.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 const {
   PropTypes
 } = React;
diff --git a/Examples/Tests/src/Blur1D.js b/Examples/Tests/src/Blur1D.js
index afdb9e704feca6c26ac154866d8411eb7887316e..f200e07ccc3a0e50b80111917bb73fd95df09206 100644
--- a/Examples/Tests/src/Blur1D.js
+++ b/Examples/Tests/src/Blur1D.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const {
   PropTypes
@@ -34,7 +34,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, direction, children }) =>
-    <GL.View
+    <GL.Node
       shader={shaders.blur1D}
       width={width}
       height={height}
@@ -43,7 +43,7 @@ module.exports = GL.createComponent(
         resolution: [ width, height ]
       }}>
       <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.View>
+    </GL.Node>
 , {
   displayName: "Blur1D"
 });
diff --git a/Examples/Tests/src/Copy.js b/Examples/Tests/src/Copy.js
index 85da29376448556b5353069f9fa6a75954298d5d..e6d7cedb853cbc844a8e4b6b503abc5ec53675af 100644
--- a/Examples/Tests/src/Copy.js
+++ b/Examples/Tests/src/Copy.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   Copy: {
@@ -23,7 +23,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, children: t, last, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.Copy}
     width={width}
diff --git a/Examples/Tests/src/Display2.js b/Examples/Tests/src/Display2.js
index 018db35979c16d69ef890445141d7f469113d31e..724a5d4e83d24b8efcb09f78fa1678456bdcf23d 100644
--- a/Examples/Tests/src/Display2.js
+++ b/Examples/Tests/src/Display2.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   display2: {
@@ -27,7 +27,7 @@ module.exports = GL.createComponent(
     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
-    return <GL.View
+    return <GL.Node
       {...rest}
       shader={shaders.display2}
       width={width}
diff --git a/Examples/Tests/src/HelloGL.js b/Examples/Tests/src/HelloGL.js
index bd3cf99460cfffe936c1482aa6394c2f51732b0e..339ab4bf78b9510f69c59d22e8ac26e209ddb810 100644
--- a/Examples/Tests/src/HelloGL.js
+++ b/Examples/Tests/src/HelloGL.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -16,7 +16,7 @@ void main () { // This function is called FOR EACH PIXEL
 
 module.exports = GL.createComponent(
   ({ width, height }) =>
-  <GL.View
+  <GL.Node
     shader={shaders.helloGL}
     width={width}
     height={height}
diff --git a/Examples/Tests/src/Layer.js b/Examples/Tests/src/Layer.js
index 521b4575bea48088bac2973bd56db1a8045e1097..d6134f7113aec3b8d6d4a4837d781caeae720980 100644
--- a/Examples/Tests/src/Layer.js
+++ b/Examples/Tests/src/Layer.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   layer: {
@@ -23,7 +23,7 @@ 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
+    return <GL.Node
       {...rest}
       shader={shaders.layer}
       uniforms={{ t1, t2 }}
diff --git a/Examples/Tests/src/Multiply.js b/Examples/Tests/src/Multiply.js
index 12979f2252ea0c403f1a6268cc8b2410d2e90c09..712019526431d7414e576dcc73de3305ea143bb0 100644
--- a/Examples/Tests/src/Multiply.js
+++ b/Examples/Tests/src/Multiply.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   multiply: {
@@ -23,7 +23,7 @@ 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
+    return <GL.Node
       shader={shaders.multiply}
       width={width}
       height={height}
diff --git a/Examples/Tests/src/TransparentNonPremultiplied.js b/Examples/Tests/src/TransparentNonPremultiplied.js
index f9efaf7db166ee2f30a066a2db2a4891780668c5..c20d997a0c13b3b0d28ebe89b94728aaa7860b1e 100644
--- a/Examples/Tests/src/TransparentNonPremultiplied.js
+++ b/Examples/Tests/src/TransparentNonPremultiplied.js
@@ -1,5 +1,5 @@
 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   TransparentNonPremultiplied: {
@@ -18,7 +18,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ children: t, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     opaque={false}
     shader={shaders.TransparentNonPremultiplied}
diff --git a/Examples/Tests/src/index.js b/Examples/Tests/src/index.js
index a795814ea185d7808da54de3312563ead669aed3..a7063eccf404562717acb6078cd4f80850cc528d 100644
--- a/Examples/Tests/src/index.js
+++ b/Examples/Tests/src/index.js
@@ -1,12 +1,12 @@
+require("gl-react-core/react-native");
 const React = require("react-native");
 const {
-  AppRegistry,
   Text,
   View,
   ScrollView,
   Image,
 } = React;
-
+const { Surface } = require("gl-react-native");
 const Blur = require("./Blur");
 const Add = require("./Add");
 const Multiply = require("./Multiply");
@@ -54,7 +54,7 @@ class Tests extends React.Component {
         </Text>)}
       </View>;
 
-    const img = "http://i.imgur.com/zJIxPEo.jpg?t="+Date.now();
+    const img = "http://i.imgur.com/zJIxPEo.jpg";
 
     const blurredImage =
       <Blur factor={4} passes={6} width={200} height={200}>
@@ -68,22 +68,23 @@ class Tests extends React.Component {
       </Layer>;
 
     return <ScrollView style={{ backgroundColor: "#000" }}>
-      <Display2 width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
-        <Add width={viewportW/2} height={viewportH/2}>
-          {txt}
-          {helloGL}
-        </Add>
-        <Display2 width={viewportW/2} height={viewportH/2} vertical>
-          <Blur factor={1} passes={4} width={viewportW/2} height={viewportH/4}>
-            <Multiply>
-              {blurredImageOverText}
-              {helloGL}
-            </Multiply>
-          </Blur>
-          {blurredImage}
+      <Surface width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
+        <Display2>
+          <Add width={viewportW/2} height={viewportH/2}>
+            {txt}
+            {helloGL}
+          </Add>
+          <Display2 width={viewportW/2} height={viewportH/2} vertical>
+            <Blur factor={1} passes={4} width={viewportW/2} height={viewportH/4}>
+              <Multiply>
+                {blurredImageOverText}
+                {helloGL}
+              </Multiply>
+            </Blur>
+            {blurredImage}
+          </Display2>
         </Display2>
-      </Display2>
-
+      </Surface>
 
       <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
 
@@ -94,47 +95,40 @@ class Tests extends React.Component {
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false} last>
-            http://i.imgur.com/mp79p5T.png
-          </Copy>
-        </NativeLayer>
-
-        <NativeLayer width={debugSize} height={debugSize}>
-          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false} last>
-            <Copy>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               http://i.imgur.com/mp79p5T.png
             </Copy>
-          </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false} last>
-            <Copy>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               <Copy>
                 http://i.imgur.com/mp79p5T.png
               </Copy>
             </Copy>
-          </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false} last>
-            <Copy>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               <Copy>
                 <Copy>
                   http://i.imgur.com/mp79p5T.png
                 </Copy>
               </Copy>
             </Copy>
-          </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false}>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
             <Copy last>
               <Copy>
                 <Copy>
@@ -144,28 +138,35 @@ class Tests extends React.Component {
                 </Copy>
               </Copy>
             </Copy>
-          </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <NativeLayer>
-            <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
-              <HelloGL />
-            </TransparentNonPremultiplied>
-          </NativeLayer>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
+              <Copy>
+                <Copy>
+                  <Copy>
+                    <Copy>
+                      http://i.imgur.com/mp79p5T.png
+                    </Copy>
+                  </Copy>
+                </Copy>
+              </Copy>
+            </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
           <NativeLayer>
             <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
+            <Surface width={debugSize} height={debugSize}>
               <TransparentNonPremultiplied>
                 <HelloGL />
               </TransparentNonPremultiplied>
-            </TransparentNonPremultiplied>
+            </Surface>
           </NativeLayer>
         </NativeLayer>
 
@@ -173,42 +174,62 @@ class Tests extends React.Component {
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
           <NativeLayer>
             <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
-              <Copy>
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
                 <TransparentNonPremultiplied>
-                  <Copy>
-                    http://i.imgur.com/S22HNaU.png
-                  </Copy>
+                  <HelloGL />
                 </TransparentNonPremultiplied>
-              </Copy>
-            </TransparentNonPremultiplied>
+              </TransparentNonPremultiplied>
+            </Surface>
           </NativeLayer>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Layer width={debugSize} height={debugSize} opaque={false} premultipliedAlpha debug>
-            http://i.imgur.com/mp79p5T.png
-            <TransparentNonPremultiplied>
-              <HelloGL />
-            </TransparentNonPremultiplied>
-          </Layer>
+          <NativeLayer>
+            <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
+                <Copy>
+                  <TransparentNonPremultiplied>
+                    <Copy>
+                      http://i.imgur.com/S22HNaU.png
+                    </Copy>
+                  </TransparentNonPremultiplied>
+                </Copy>
+              </TransparentNonPremultiplied>
+            </Surface>
+          </NativeLayer>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Layer width={debugSize} height={debugSize} opaque={false}>
-            http://i.imgur.com/mp79p5T.png
-            <TransparentNonPremultiplied>
-              <Copy>
-                <TransparentNonPremultiplied>
-                  <Copy>
-                    http://i.imgur.com/S22HNaU.png
-                  </Copy>
-                </TransparentNonPremultiplied>
-              </Copy>
-            </TransparentNonPremultiplied>
-          </Layer>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Layer>
+              http://i.imgur.com/mp79p5T.png
+              <TransparentNonPremultiplied>
+                <HelloGL />
+              </TransparentNonPremultiplied>
+            </Layer>
+          </Surface>
+        </NativeLayer>
+
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Layer>
+              http://i.imgur.com/mp79p5T.png
+              <TransparentNonPremultiplied>
+                <Copy>
+                  <TransparentNonPremultiplied>
+                    <Copy>
+                      http://i.imgur.com/S22HNaU.png
+                    </Copy>
+                  </TransparentNonPremultiplied>
+                </Copy>
+              </TransparentNonPremultiplied>
+            </Layer>
+          </Surface>
         </NativeLayer>
 
       </View>