diff --git a/Examples/AdvancedEffects/package.json b/Examples/AdvancedEffects/package.json
index 15135c74bd52190fad7cee1c27d5098a4f4de588..1e6931874f6204b094a36baffa432afb67207e4a 100644
--- a/Examples/AdvancedEffects/package.json
+++ b/Examples/AdvancedEffects/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
+    "gl-react": "file:../../../gl-react",
     "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..e8bbe7f1ded31705072d32b459f567ed9af0d0fa 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");
+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..662829851bf5a0c7421249dcb69c6aef568bf9c7 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");
+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..5ed9223530b67d3ce1baa49a460e6683af7bbe77 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");
+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..dd89ad57eb2642ae1ff165f6966f19ed1301caed 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");
 
 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..fd9c669372dce396ce406566f2703c098320d9ea 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");
+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..9b8b63ec9cc37be61bc7a3f5eef472720b2d94d8 100644
--- a/Examples/AdvancedEffects/src/index.js
+++ b/Examples/AdvancedEffects/src/index.js
@@ -1,3 +1,4 @@
+require("gl-react/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..a1b10431d7b6c0f1c1b8850697c8f5810aed396e 100644
--- a/Examples/Simple/package.json
+++ b/Examples/Simple/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
+    "gl-react": "file:../../../gl-react",
     "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..c87b0d783e0ba21323893f3cfbfbf41eba817a71 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");
+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..26a5d3c05e58c356964d1cb26abcd53e86ab49e8 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");
+const React = GL.React;
 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..feb2f21e30eb11b6e0bbab6e1a8b6aa3ccad25f8 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");
+const React = GL.React;
 
 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..fc08b5140f88fd6d5943794bd5e61d0c62774754 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");
+const React = GL.React;
 
 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..d520d5f8f287d7ef4230ab14b836bb94d85d691a 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");
+const React = GL.React;
 
 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..0841cec26ef8d4429821b0531dc23667fada6f3e 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");
+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..012c4593a49d0b2c130da08a405996a070f90068 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");
+const React = GL.React;
 
 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..c8088ab9b9745af097a7cfefca9e85415f1497f1 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");
+const React = GL.React;
 
 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..7e80680a3b1b8b37c66d948be8a5593d7cebe213 100644
--- a/Examples/Simple/src/index.js
+++ b/Examples/Simple/src/index.js
@@ -1,3 +1,5 @@
+require("gl-react/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..7cd494b3b84d6a9e24c74b60d3ae2b5188e17be3 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": "file:../../../gl-react",
+    "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..cbb560c36d33a2b9e0ec573d0cde53a5303c3a3f 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");
+const React = GL.React;
 
 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..d10b83b7983ae1ab0d0ef9e16a986a3449aa818c 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");
+const React = GL.React;
 const {
   PropTypes
 } = React;
diff --git a/Examples/Tests/src/Blur1D.js b/Examples/Tests/src/Blur1D.js
index afdb9e704feca6c26ac154866d8411eb7887316e..df5067fd33f18ec473a2677841d7147363802093 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");
+const React = GL.React;
 
 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..c49efeb28ed845b8003919d01aa489039c8b0383 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");
+const React = GL.React;
 
 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..6aac82fd4c8381033ca411d434f58891994f582f 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");
+const React = GL.React;
 
 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..e72df0e66b87297423133ab6b8ad5bd53ba1c859 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");
+const React = GL.React;
 
 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..30752f5b0e717e00f249fbf0b103eee4d4fab8b3 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");
+const React = GL.React;
 
 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..e4cef5510f1f1c4b8c84a83ec77887ca977b0b2e 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");
+const React = GL.React;
 
 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..df8d7c322a8af669859daea65c49f8cf1286e3fb 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");
+const React = GL.React;
 
 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..ff197d05d344e5feaafc0071ac68b1506524bc35 100644
--- a/Examples/Tests/src/index.js
+++ b/Examples/Tests/src/index.js
@@ -1,12 +1,12 @@
+require("gl-react/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>
diff --git a/Examples/build.sh b/Examples/build.sh
index 3746580f110cf3ec3819f7470918a52570081d08..4d63d31a6c644ae7300aec3221633b8b5f404ce0 100755
--- a/Examples/build.sh
+++ b/Examples/build.sh
@@ -1,9 +1,7 @@
 
 for ex in */; do
   cd $ex;
-  #rm -rf node_modules;
-  #npm i;
-  npm i gl-react-native;
-  react-native bundle --minify;
+  rm -rf node_modules;
+  npm i;
   cd ..;
 done;
diff --git a/README.md b/README.md
index 6b51637b75d25d4e5ed2802d0c15655d931cd092..118ee6834568114e8d8e1de2fd3c74e44f9f65c3 100644
--- a/README.md
+++ b/README.md
@@ -4,42 +4,13 @@
 
 OpenGL bindings for react-native to implement complex effects over images and components, in the descriptive VDOM paradigm.
 
-More technically, `gl-react-native` allows you to write a [fragment shader](https://www.opengl.org/wiki/Fragment_Shader) that covers a View. The shader can render: generated graphics/demos, effects on top of images, effects over any UI content... anything you can imagine!
-
-**`gl-react-native` is directly inspired from our other project, [`gl-react`](http://github.com/ProjectSeptemberInc/gl-react) and implements the same API (so you can write "universal" code).**
+**`gl-react-native` is an implementation of `gl-react` for React Native. Please [read the main gl-react README](https://github.com/ProjectSeptemberInc/gl-react/) for more information.**
 
 [![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/simple.gif)](./Examples/Simple)[![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/advancedeffects.gif)](./Examples/AdvancedEffects)
 
-### HelloGL Gist
-
-```js
-const React = require("react-native");
-const GL = require("gl-react-native");
-
-const shaders = GL.Shaders.create({
-  helloGL: {
-    frag: `
-precision highp float;
-varying vec2 uv;
-void main () {
-  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
-}`
-  }
-});
-
-class HelloGL extends GL.Component {
-  render () {
-    const { width, height } = this.props;
-    return <GL.View
-      shader={shaders.helloGL}
-      width={width}
-      height={height}
-    />;
-  }
-}
-```
+## Documentation
 
-![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/hellogl.jpg)
+[**Gitbook**](http://projectseptemberinc.gitbooks.io/gl-react/content/)
 
 ## Installation
 
@@ -54,14 +25,3 @@ npm i --save gl-react-native
 **Configure your React Native Application:**
 
 ![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/install-steps.png)
-
-
-## Influence / Credits
-
-- [stack.gl](http://stack.gl/) approach
-- [GLSL.io](http://glsl.io/) and [Diaporama](https://github.com/gre/diaporama)
-- Source code of [React Native](https://github.com/facebook/react-native)
-
-## Documentation
-
-[**Gitbook**](http://projectseptemberinc.gitbooks.io/gl-react/content/)
diff --git a/index.android.js b/index.android.js
index 101d3174fe2b6fcd98645a4548c6305e6318634a..d7900e11dfff9acca7d3bfc19a8cfa4408833e19 100644
--- a/index.android.js
+++ b/index.android.js
@@ -1,13 +1 @@
-const Shaders = require("./src/Shaders");
-const View = require("./src/View");
-const Uniform = require("./src/Uniform");
-const Component = require("./src/ComponentDeprecated");
-const createComponent = require("./src/createComponent");
-
-module.exports = {
-  Shaders,
-  View,
-  Uniform,
-  Component,
-  createComponent
-};
+module.exports = require("./src");
diff --git a/index.ios.js b/index.ios.js
index 101d3174fe2b6fcd98645a4548c6305e6318634a..d7900e11dfff9acca7d3bfc19a8cfa4408833e19 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -1,13 +1 @@
-const Shaders = require("./src/Shaders");
-const View = require("./src/View");
-const Uniform = require("./src/Uniform");
-const Component = require("./src/ComponentDeprecated");
-const createComponent = require("./src/createComponent");
-
-module.exports = {
-  Shaders,
-  View,
-  Uniform,
-  Component,
-  createComponent
-};
+module.exports = require("./src");
diff --git a/ios/GLData.h b/ios/GLData.h
index 610261f101d699a562ee315a5f0e20cf19050280..4523918aff428a0fe32dfc80ffc7fc1a20184429 100644
--- a/ios/GLData.h
+++ b/ios/GLData.h
@@ -1,6 +1,6 @@
 #import <Foundation/Foundation.h>
 
-// Data format of gl-react-core
+// Data format of gl-react
 
 @interface GLData: NSObject
 
diff --git a/package.json b/package.json
index 4f5ba812d815c30259217244498787cd4b06febf..faf52792ff5bb31ba58b4113f39d92bf149c1d00 100644
--- a/package.json
+++ b/package.json
@@ -19,11 +19,11 @@
   "author": "Project September <tech@projectseptember.com>",
   "license": "MIT",
   "peerDependencies": {
-    "react-native": ">=0.9.0"
+    "react-native": ">=0.13.0 <0.16.0",
+    "gl-react": "*"
   },
   "dependencies": {
-    "invariant": "2.2.0",
-    "gl-react-core": "1.2.x"
+    "invariant": "2.2.0"
   },
   "devDependencies": {
     "eslint": "^1.9.0",
diff --git a/src/ComponentDeprecated.js b/src/ComponentDeprecated.js
deleted file mode 100644
index 55810f3185b9a786f0899d8086f736b074bb800b..0000000000000000000000000000000000000000
--- a/src/ComponentDeprecated.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const React = require("react-native");
-const {createComponentDeprecated} = require("gl-react-core");
-module.exports = createComponentDeprecated(React);
diff --git a/src/Shaders.js b/src/Shaders.js
index 62c46d83d43f544ea61d9b1382a079843fe51376..6b30f8a288938a7ed17c2242fd1c1fc7b77555ea 100644
--- a/src/Shaders.js
+++ b/src/Shaders.js
@@ -1,4 +1,4 @@
-const {createShaders} = require("gl-react-core");
+const {createShaders} = require("gl-react");
 const { NativeModules: { RNGLContext } } = require("react-native");
 
 module.exports = createShaders(function (id, shader) {
diff --git a/src/View.js b/src/Surface.js
similarity index 55%
rename from src/View.js
rename to src/Surface.js
index 975ed9c68bf2b418d4952671f641473733cf18d9..2141b2c1822d98ae6fc934a4fa9ac45e18515721 100644
--- a/src/View.js
+++ b/src/Surface.js
@@ -1,14 +1,12 @@
-const {createView} = require("gl-react-core");
+const {createSurface} = require("gl-react");
 const React = require("react-native");
-const Shaders = require("./Shaders");
-const Uniform = require("./Uniform");
 const GLCanvas = require("./GLCanvas");
 
 const {
   View,
 } = React;
 
-const renderVcontent = function (width, height, id, children, { visibleContent }) {
+function renderVcontent (width, height, id, children, { visibleContent }) {
   const childrenStyle = {
     position: "absolute",
     top: visibleContent ? 0 : height, // as a workaround for RN, we offset the content so it is not visible but still can be rasterized
@@ -18,13 +16,13 @@ const renderVcontent = function (width, height, id, children, { visibleContent }
     overflow: "hidden"
   };
   return <View key={id} style={childrenStyle}>{children}</View>;
-};
+}
 
-const renderVGL = function (props) {
+function renderVGL (props) {
   return <GLCanvas ref="canvas" {...props} />;
-};
+}
 
-const renderVcontainer = function ({ style, width, height }, contents, renderer) {
+function renderVcontainer ({ style, width, height }, contents, renderer) {
   const parentStyle = {
     position: "relative",
     ...style,
@@ -36,12 +34,6 @@ const renderVcontainer = function ({ style, width, height }, contents, renderer)
     {contents}
     {renderer}
   </View>;
-};
+}
 
-const GLView = createView(React, Shaders, Uniform, renderVcontainer, renderVcontent, renderVGL);
-
-GLView.prototype.setNativeProps = function (props) {
-  this.refs.native.setNativeProps(props);
-};
-
-module.exports = GLView;
+module.exports = createSurface(renderVcontainer, renderVcontent, renderVGL);
diff --git a/src/Uniform.js b/src/Uniform.js
deleted file mode 100644
index b5bc1c2c08e88591bd49f2edf5afad9f470dab6d..0000000000000000000000000000000000000000
--- a/src/Uniform.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const {createUniform} = require("gl-react-core");
-const React = require("react-native");
-module.exports = createUniform(React);
diff --git a/src/createComponent.js b/src/createComponent.js
deleted file mode 100644
index 71f83410df11173e13c8b2b085410b988e2165ad..0000000000000000000000000000000000000000
--- a/src/createComponent.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const React = require("react-native");
-const View = require("./View");
-const {createComponent} = require("gl-react-core");
-module.exports = createComponent(React, View);
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..b4aa06d8073a6dfd65772d7b3a8031a956ffeba7
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,11 @@
+const { Shaders } = require("gl-react");
+const Surface = require("./Surface");
+const { NativeModules: { RNGLContext } } = require("react-native");
+
+// Hook Shaders to RNGLContext
+Shaders.list().map(id => RNGLContext.addShader(id, Shaders.get(id)));
+Shaders.on("add", (id, shader) => RNGLContext.addShader(id, shader));
+
+module.exports = {
+  Surface
+};