Migrate latest gl-react: Shaders.setImplementation & root blend with (ONE, ONE_MINUS_SRC_ALPHA)

Use with https://github.com/ProjectSeptemberInc/gl-react/commit/0253046f326d4e4d6f088a82b81f2daa955623b9

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

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

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

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}

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

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