replace opaque by backgroundColor props

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();
     }

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);

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 }} />

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,

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}

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>

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 }}
   />,

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>

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;

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);

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);