diff --git a/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java b/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
index 2eb9cc11c5ddc32f889119c839e5128c4acdaeca..ae360019c096f48af1d7be9fdebfa784c6c80e43 100644
--- a/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
+++ b/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
@@ -3,6 +3,7 @@ package com.projectseptember.RNGL;
 import static android.opengl.GLES20.*;
 
 import android.graphics.Bitmap;
+import android.graphics.Color;
 import android.graphics.Matrix;
 import android.graphics.PixelFormat;
 import android.net.Uri;
@@ -262,12 +263,14 @@ public class GLCanvas extends GLSurfaceView
         }
     }
 
-    public void setOpaque(boolean opaque) {
-        if (opaque) {
-            this.getHolder().setFormat(PixelFormat.RGB_888);
+    @Override
+    public void setBackgroundColor(int color) {
+        super.setBackgroundColor(color);
+        if (color == Color.TRANSPARENT) {
+            this.getHolder().setFormat(PixelFormat.TRANSLUCENT);
         }
         else {
-            this.getHolder().setFormat(PixelFormat.TRANSLUCENT);
+            this.getHolder().setFormat(PixelFormat.RGB_888);
         }
         this.requestRender();
     }
diff --git a/android/src/main/java/com/projectseptember/RNGL/GLCanvasManager.java b/android/src/main/java/com/projectseptember/RNGL/GLCanvasManager.java
index 734c9b3be50dd1a270d219e2e4e877385c2c76bf..b5265e39e313939978fb7c5ba6ee3f6ee6df03c3 100644
--- a/android/src/main/java/com/projectseptember/RNGL/GLCanvasManager.java
+++ b/android/src/main/java/com/projectseptember/RNGL/GLCanvasManager.java
@@ -42,11 +42,6 @@ public class GLCanvasManager extends SimpleViewManager<GLCanvas> {
         view.setRenderId(renderId);
     }
 
-    @ReactProp(name="opaque")
-    public void setOpaque (GLCanvas view, boolean opaque) {
-        view.setOpaque(opaque);
-    }
-
     @ReactProp(name = "autoRedraw")
     public void setAutoRedraw (GLCanvas view, boolean autoRedraw) {
         view.setAutoRedraw(autoRedraw);
diff --git a/example/src/AdvancedEffects/Banner.js b/example/src/AdvancedEffects/Banner.js
index b442f6cc9ded43dab64ebccf352d5754d3351169..5eab1b681f3637de678cf4b0d20f945506353ef7 100644
--- a/example/src/AdvancedEffects/Banner.js
+++ b/example/src/AdvancedEffects/Banner.js
@@ -27,7 +27,7 @@ void main( void ) {
 class Banner extends React.Component {
   render () {
     const { width, height, time } = this.props;
-    return <Surface width={width} height={height} opaque={false}
+    return <Surface width={width} height={height} backgroundColor="transparent"
       onLoad={() => console.log("Banner onLoad")}
       onProgress={e => console.log("Banner onProgress", e.nativeEvent)}>
       <GL.Node shader={shaders.banner} uniforms={{ time }} />
diff --git a/example/src/AdvancedEffects/Transition.js b/example/src/AdvancedEffects/Transition.js
index dd89ad57eb2642ae1ff165f6966f19ed1301caed..adb7043466715398ba4bf9044f826b886057ba17 100644
--- a/example/src/AdvancedEffects/Transition.js
+++ b/example/src/AdvancedEffects/Transition.js
@@ -9,7 +9,7 @@ module.exports = GL.createComponent(
       shader={shader}
       width={width}
       height={height}
-      opaque={false}
+      backgroundColor="transparent"
       uniforms={{
         progress,
         from,
diff --git a/example/src/AdvancedEffects/Vignette.js b/example/src/AdvancedEffects/Vignette.js
index 934010835b67bc8fca05291adce25cf56230477a..8539830e074758eb81426337bb9b40dc24159b8e 100644
--- a/example/src/AdvancedEffects/Vignette.js
+++ b/example/src/AdvancedEffects/Vignette.js
@@ -59,7 +59,7 @@ class Vignette extends React.Component {
     return <Surface
       width={width}
       height={height}
-      opaque={false}
+      backgroundColor="transparent"
       preload
       onStartShouldSetResponder={() => true}
       onMoveShouldSetResponder={() => true}
diff --git a/example/src/Simple/index.js b/example/src/Simple/index.js
index 29f9d22ed52594de4e30bb2aec773cc7c2342699..471a2bf87a0458b46da4c9af46a40e766cf60bb1 100644
--- a/example/src/Simple/index.js
+++ b/example/src/Simple/index.js
@@ -205,7 +205,7 @@ class Simple extends Component {
               />
             </TouchableOpacity>
             <View pointerEvents="box-none" style={{ position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}>
-              <Surface width={256} height={180} opaque={false} eventsThrough>
+              <Surface width={256} height={180} backgroundColor="transparent" eventsThrough>
                 <PieProgress progress={progress} />
               </Surface>
             </View>
diff --git a/example/src/Tests/TransparentNonPremultiplied.js b/example/src/Tests/TransparentNonPremultiplied.js
index 5bc8110fe33b64779d7d7ca6979bf6e0d9bdaa0c..39518a61eaad38686a068120d71b8ed9891d0343 100644
--- a/example/src/Tests/TransparentNonPremultiplied.js
+++ b/example/src/Tests/TransparentNonPremultiplied.js
@@ -20,7 +20,7 @@ module.exports = GL.createComponent(
   ({ children: t, ...rest }) =>
   <GL.Node
     {...rest}
-    opaque={false}
+    backgroundColor="transparent"
     shader={shaders.TransparentNonPremultiplied}
     uniforms={{ t }}
   />,
diff --git a/example/src/Tests/index.js b/example/src/Tests/index.js
index e136f33f5a7d18dbc79343fe8e9f9843729b1a91..d6d1086ccdba123c03d1cad727fff68e9d1b235b 100644
--- a/example/src/Tests/index.js
+++ b/example/src/Tests/index.js
@@ -94,7 +94,7 @@ class Tests extends React.Component {
 
         <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}>
+          <Surface width={debugSize} height={debugSize} backgroundColor="transparent">
             <Copy last>
               <Copy>
                 <Copy>
@@ -109,7 +109,7 @@ class Tests extends React.Component {
 
         <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}>
+          <Surface width={debugSize} height={debugSize} backgroundColor="transparent">
             <Layer>
               http://i.imgur.com/mp79p5T.png
               <TransparentNonPremultiplied>
@@ -121,7 +121,7 @@ class Tests extends React.Component {
 
         <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}>
+          <Surface width={debugSize} height={debugSize} backgroundColor="transparent">
             <Layer>
               http://i.imgur.com/mp79p5T.png
               <TransparentNonPremultiplied>
diff --git a/ios/GLCanvas.h b/ios/GLCanvas.h
index 9084b4b2419943e2e84d2ccf84d146cbd54df14c..69faeee3267d8a19901a81ad14ceb1c5d8f611ae 100644
--- a/ios/GLCanvas.h
+++ b/ios/GLCanvas.h
@@ -6,7 +6,6 @@
 @interface GLCanvas: GLKView
 
 @property (nonatomic) GLData *data;
-@property (nonatomic) BOOL opaque;
 @property (nonatomic) BOOL autoRedraw;
 @property (nonatomic) BOOL eventsThrough;
 @property (nonatomic) BOOL visibleContent;
diff --git a/ios/GLCanvas.m b/ios/GLCanvas.m
index e2607bebbae2e404326261ccbceff230f4f5f6b4..ad769f91449b8267e872fce0680f1e0a0524ac48 100644
--- a/ios/GLCanvas.m
+++ b/ios/GLCanvas.m
@@ -47,8 +47,6 @@ NSArray* diff (NSArray* a, NSArray* b) {
   NSArray *_contentTextures;
   NSDictionary *_images; // This caches the currently used images (imageSrc -> GLReactImage)
 
-  BOOL _opaque; // opaque prop (if false, the GLCanvas will become transparent)
-
   BOOL _deferredRendering; // This flag indicates a render has been deferred to the next frame (when using contents)
 
   GLint defaultFBO;
@@ -117,12 +115,6 @@ RCT_NOT_IMPLEMENTED(-init)
   [self requestSyncData];
 }
 
-- (void)setOpaque:(BOOL)opaque
-{
-  _opaque = opaque;
-  [self setNeedsDisplay];
-}
-
 - (void)setRenderId:(NSNumber *)renderId
 {
   if ([_nbContentTextures intValue] > 0) {
@@ -180,6 +172,12 @@ RCT_NOT_IMPLEMENTED(-init)
   _nbContentTextures = nbContentTextures;
 }
 
+- (void)setBackgroundColor:(UIColor *)backgroundColor
+{
+  CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor);
+  self.opaque = (alpha == 1.0);
+}
+
 //// Sync methods (called from props setters)
 
 - (void)requestSyncData
@@ -379,8 +377,6 @@ RCT_NOT_IMPLEMENTED(-init)
 
 - (void)drawRect:(CGRect)rect
 {
-  self.layer.opaque = _opaque;
-
   if (_neverRendered) {
     _neverRendered = false;
     glClearColor(0.0, 0.0, 0.0, 0.0);
diff --git a/ios/GLCanvasManager.m b/ios/GLCanvasManager.m
index c2fd5d64a0369f94f705cdf79e0e136163f69093..d9b20458a8070eea0725f05486624d457787f2f3 100644
--- a/ios/GLCanvasManager.m
+++ b/ios/GLCanvasManager.m
@@ -24,7 +24,6 @@ RCT_EXPORT_MODULE();
 }
 
 RCT_EXPORT_VIEW_PROPERTY(nbContentTextures, NSNumber);
-RCT_EXPORT_VIEW_PROPERTY(opaque, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(autoRedraw, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(data, GLData);
 RCT_EXPORT_VIEW_PROPERTY(renderId, NSNumber);