diff --git a/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java b/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
index 8322189a8dcc51e9796fe22f90c1759af4a79133..2eb9cc11c5ddc32f889119c839e5128c4acdaeca 100644
--- a/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
+++ b/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
@@ -687,11 +687,13 @@ public class GLCanvas extends GLSurfaceView
         if (renderData.fboId == -1) {
             glBindFramebuffer(GL_FRAMEBUFFER, defaultFBO);
             glViewport(0, 0, w, h);
+            glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
         }
         else {
             GLFBO fbo = getFBO(renderData.fboId);
             fbo.setShape(w, h);
             fbo.bind();
+            glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
         }
 
         renderData.shader.bind();
@@ -716,7 +718,6 @@ public class GLCanvas extends GLSurfaceView
             renderData.shader.setUniform(uniformName, renderData.uniformsIntBuffer.get(uniformName), uniformTypes.get(uniformName));
         }
 
-        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
         glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
         glClear(GL_COLOR_BUFFER_BIT);
         glDrawArrays(GL_TRIANGLES, 0, 6);
diff --git a/example/src/Tests/index.js b/example/src/Tests/index.js
index 070d93bb8525b3c4a97548634bc522b636765c8c..e136f33f5a7d18dbc79343fe8e9f9843729b1a91 100644
--- a/example/src/Tests/index.js
+++ b/example/src/Tests/index.js
@@ -87,6 +87,11 @@ class Tests extends React.Component {
 
       <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
 
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
+          <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
+        </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}>
@@ -102,24 +107,6 @@ class Tests extends React.Component {
           </Surface>
         </NativeLayer>
 
-        <NativeLayer width={debugSize} height={debugSize}>
-          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <NativeLayer width={debugSize} height={debugSize}>
-            <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <Surface width={debugSize} height={debugSize} opaque={false}>
-              <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} />
           <Surface width={debugSize} height={debugSize} opaque={false}>
diff --git a/ios/GLCanvas.m b/ios/GLCanvas.m
index 8c62b70a085a13f65aff37d979408d813102b226..e2607bebbae2e404326261ccbceff230f4f5f6b4 100644
--- a/ios/GLCanvas.m
+++ b/ios/GLCanvas.m
@@ -497,11 +497,13 @@ RCT_NOT_IMPLEMENTED(-init)
       if (renderData.fboId == -1) {
         glBindFramebuffer(GL_FRAMEBUFFER, defaultFBO);
         glViewport(0, 0, w, h);
+        glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
       }
       else {
         GLFBO *fbo = [_bridge.rnglContext getFBO:[NSNumber numberWithInt:renderData.fboId]];
         [fbo setShapeWithWidth:w withHeight:h];
         [fbo bind];
+        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
       }
       RCT_PROFILE_END_EVENT(0, @"gl", nil);
 
@@ -524,7 +526,6 @@ RCT_NOT_IMPLEMENTED(-init)
       RCT_PROFILE_END_EVENT(0, @"gl", nil);
 
       RCT_PROFILE_BEGIN_EVENT(0, @"draw", nil);
-      glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
       glClearColor(0.0, 0.0, 0.0, 0.0);
       glClear(GL_COLOR_BUFFER_BIT);
       glDrawArrays(GL_TRIANGLES, 0, 6);
diff --git a/src/GLCanvas.js b/src/GLCanvas.js
index 3edf3c19c7473ded33de2afd295a950eafe86fdc..41d72a8bbea1c8161a8fb89cd0188419526445db 100644
--- a/src/GLCanvas.js
+++ b/src/GLCanvas.js
@@ -18,35 +18,6 @@ const GLCanvasNative = requireNativeComponent("GLCanvas", GLCanvas, {
   }
 });
 
-const getExtraProps = ({ width, height, pixelRatio, data }) => {
-  // If Surface size matches the root node size, pass-in the styles
-  if (
-    !data ||
-    width * pixelRatio === data.width * data.pixelRatio &&
-    height * pixelRatio === data.height * data.pixelRatio
-  ) {
-    return { pixelRatio, style: { width, height } };
-  }
-  // otherwise, stretch the canvas to the surface size
-  const w = data.width * data.pixelRatio;
-  const h = data.height * data.pixelRatio;
-  return {
-    pixelRatio: 1, // pixelRatio is hardcoded to 1 to normalize the transform
-    style: {
-      width: w,
-      height: h,
-      transform: [
-        { translateX: -w / 2 },
-        { translateY: -h / 2 },
-        { scaleX: width / w },
-        { scaleY: height / h },
-        { translateX: w / 2 },
-        { translateY: h / 2 },
-      ]
-    }
-  };
-};
-
 class GLCanvas extends Component {
 
   componentWillMount () {
@@ -133,14 +104,13 @@ class GLCanvas extends Component {
 
   render () {
     const {
-      width, height, pixelRatio, data,
+      width, height,
       onLoad, onProgress, eventsThrough,
       ...restProps } = this.props;
     return <GLCanvasNative
       ref="native"
       {...restProps}
-      {...getExtraProps({ width, height, pixelRatio, data })}
-      data={data}
+      style={{ width, height }}
       onGLLoad={onLoad ? onLoad : null}
       onGLProgress={onProgress ? onProgress : null}
       onGLCaptureFrame={this.onGLCaptureFrame}
diff --git a/src/Surface.js b/src/Surface.js
index b2f75f749881b9e63b2de7d75b1eede7970aff0a..d2afb5a065185dae1eac7ae8898216e263c51385 100644
--- a/src/Surface.js
+++ b/src/Surface.js
@@ -46,4 +46,8 @@ function renderVcontainer ({ style, width, height, visibleContent, eventsThrough
   </View>;
 }
 
-module.exports = createSurface(renderVcontainer, renderVcontent, renderVGL, getPixelRatio);
+module.exports = createSurface(
+  renderVcontainer,
+  renderVcontent,
+  renderVGL,
+  getPixelRatio);
diff --git a/src/index.js b/src/index.js
index 5fcd1398fb084f98dbc040f11231551de2ce2cb6..3d35e2939828d1039f2717dba196610798eee8f6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,8 +10,15 @@ See README install instructions.
 React.NativeModules.RNGLContext is %s`, RNGLContext);
 
 // Hook Shaders to RNGLContext
-Shaders.on("add", (id, shader, onCompile) => RNGLContext.addShader(id, shader, onCompile));
-Shaders.on("remove", id => RNGLContext.removeShader(id));
+Shaders.setImplementation({
+  add: (id, shader) =>
+  new Promise((resolve, reject) =>
+    RNGLContext.addShader(id, shader, (error, result) => {
+      if (error) reject(error);
+      else resolve(result);
+    })),
+  remove: id => RNGLContext.removeShader(id)
+});
 
 module.exports = {
   Surface