add opacity tests

Examples/Tests/Copy.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  Copy: {
+    frag: `
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t;
+
+void main () {
+  gl_FragColor = texture2D(t, uv);
+}
+`
+  }
+});
+
+class Copy extends GL.Component {
+  render () {
+    const { width, height, children: t, ...rest } = this.props;
+    return <GL.View
+      {...rest}
+      shader={shaders.Copy}
+      width={width}
+      height={height}
+      uniforms={{ t }}
+    />;
+  }
+}
+
+module.exports = Copy;

Examples/Tests/Layer.js

@@ -21,10 +21,11 @@ void main () {
 
 class Layer extends GL.Component {
   render () {
-    const { width, height, children } = this.props;
+    const { width, height, children, ...rest } = this.props;
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
     const [t1, t2] = children;
     return <GL.View
+      {...rest}
       shader={shaders.layer}
       width={width}
       height={height}

Examples/Tests/NativeLayer.js

+const React = require("react-native");
+const {
+  View
+} = React;
+
+class NativeLayer extends React.Component {
+  render () {
+    const { width, height, children, ...rest } = this.props;
+    return <View style={{ width, height, position: "relative" }}>
+      {React.Children.map(children, child =>
+        <View style={{ width, height, position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}>
+          {child}
+        </View>
+      )}
+    </View>;
+  }
+}
+
+module.exports = NativeLayer;

Examples/Tests/index.ios.js

@@ -3,14 +3,18 @@ const {
   AppRegistry,
   Text,
   View,
+  ScrollView,
+  Image,
 } = React;
 
 const Blur = require("./Blur");
 const Add = require("./Add");
 const Multiply = require("./Multiply");
 const Layer = require("./Layer");
+const NativeLayer = require("./NativeLayer");
 const HelloGL = require("./HelloGL");
 const Display2 = require("./Display2");
+const Copy = require("./Copy");
 const { width: viewportW, height: viewportH } = require("Dimensions").get("window");
 
 class Tests extends React.Component {
@@ -27,6 +31,9 @@ class Tests extends React.Component {
     console.log("PROGRESS", progress, loaded, total);
   }
   render () {
+
+    const debugSize = viewportW / 2;
+
     const helloGL =
       <HelloGL width={64} height={64} />;
 
@@ -59,9 +66,8 @@ class Tests extends React.Component {
         {txt}
       </Layer>;
 
-    return <View style={{ backgroundColor: "#000" }}>
-      <Display2 width={viewportW} height={viewportH} vertical preload onLoad={this.onLoad} onProgress={this.onProgress}>
-        <Display2 width={viewportW} height={viewportH/2}>
+    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}
@@ -76,9 +82,45 @@ class Tests extends React.Component {
           {blurredImage}
         </Display2>
       </Display2>
-        {txt}
-      </Display2>
-    </View>;
+
+
+      <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}>
+          <Copy width={debugSize} height={debugSize}>
+            http://i.imgur.com/S22HNaU.png
+          </Copy>
+          <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} />
+          <Copy width={debugSize} height={debugSize} opaque={false}>
+            http://i.imgur.com/mp79p5T.png
+          </Copy>
+        </NativeLayer>
+
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Copy width={debugSize} height={debugSize}>
+            http://i.imgur.com/S22HNaU.png
+          </Copy>
+          <Copy width={debugSize} height={debugSize} opaque={false}>
+            http://i.imgur.com/mp79p5T.png
+          </Copy>
+        </NativeLayer>
+
+        <Layer width={debugSize} height={debugSize}>
+          {"http://i.imgur.com/S22HNaU.png"}
+          {"http://i.imgur.com/mp79p5T.png"}
+        </Layer>
+      </View>
+
+    </ScrollView>;
   }
 }