Migrate examples to 2.0.0

Examples/AdvancedEffects/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
+    "gl-react-core": "file:../../../gl-react-core",
     "glsl-transitions": "^2015.11.8",
     "react-native": "^0.14.2"
   }

Examples/AdvancedEffects/src/Banner.js

 const React = require("react-native");
-
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 const shaders = GL.Shaders.create({
   banner: {
     frag: `
@@ -27,13 +27,9 @@ void main( void ) {
 class Banner extends React.Component {
   render () {
     const { width, height, time } = this.props;
-    return <GL.View
-      shader={shaders.banner}
-      width={width}
-      height={height}
-      uniforms={{ time: time }}
-      opaque={false}
-    />;
+    return <Surface width={width} height={height} opaque={false}>
+      <GL.Node shader={shaders.banner} uniforms={{ time: time }} />
+    </Surface>;
   }
 }
 

Examples/AdvancedEffects/src/Intro.js

@@ -3,8 +3,8 @@ const {
   View,
   Text,
 } = React;
-
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   drunkEffect: {
@@ -40,11 +40,9 @@ void main() {
 class Intro extends React.Component {
   render () {
     const { time, fps, width, height } = this.props;
-    return <GL.View
+    return <Surface width={width} height={height} opaque={false}>
+      <GL.Node
         shader={shaders.drunkEffect}
-      width={width}
-      height={height}
-      opaque={false}
         uniforms={{
           time: time,
           freq: 20 - 14 * Math.sin(time / 7),
@@ -71,7 +69,8 @@ class Intro extends React.Component {
             </View>
           </View>
         </GL.Uniform>
-    </GL.View>;
+      </GL.Node>
+    </Surface>;
   }
 }
 

Examples/AdvancedEffects/src/Slideshow.js

 const React = require("react-native");
 const { View, Text, StyleSheet } = React;
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 const TransitionGenerator = require("./TransitionGenerator");
 const Transition = require("./Transition");
 
@@ -33,15 +34,15 @@ class Slideshow extends React.Component {
     const transitionUniforms = this._uniforms;
 
     return <View style={styles.root}>
+      <Surface  width={width} height={height}>
         <Transition
-        width={width}
-        height={height}
           progress={transitionProgress}
           from={transitionFrom}
           to={transitionTo}
           shader={transitionShader}
           uniforms={transitionUniforms}
         />
+      </Surface>
     <View style={styles.legend}>
         <Text style={styles.textName}>{transitionName}</Text>
         <Text style={styles.textInfo}>(GLSL.io)</Text>

Examples/AdvancedEffects/src/Transition.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 module.exports = GL.createComponent(
   ({ width, height, shader, progress, from, to, uniforms }) => {
     const scale = React.PixelRatio.get();
-    return <GL.View
+    return <GL.Node
       preload
       shader={shader}
       width={width}

Examples/AdvancedEffects/src/Vignette.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   imageVignette: {
@@ -55,15 +56,16 @@ class Vignette extends React.Component {
   render () {
     const { width, height, time, source } = this.props;
     const { finger } = this.state;
-    return <GL.View
+    return <Surface
+      width={width}
+      height={height}
+      opaque={false}
       preload
       onStartShouldSetResponder={() => true}
       onMoveShouldSetResponder={() => true}
-      onResponderMove={this.onResponderMove}
+      onResponderMove={this.onResponderMove}>
+      <GL.Node
         shader={shaders.imageVignette}
-      width={width}
-      height={height}
-      opaque={false}
         uniforms={{
           time: time,
           freq: 10 + 2 * Math.sin(0.7*time),
@@ -72,7 +74,8 @@ class Vignette extends React.Component {
           moving: 0,
           finger: finger
         }}
-    />;
+      />
+    </Surface>;
   }
 }
 

Examples/AdvancedEffects/src/index.js

+require("gl-react-core/react-native");
 const React = require("react-native");
 const {
   StyleSheet,
@@ -61,6 +62,7 @@ class AdvancedEffects extends React.Component {
           width={viewportW}
           height={introH}
         />
+
         <Vignette
           time={time}
           width={imgW}

Examples/Simple/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
+    "gl-react-core": "file:../../../gl-react-core",
     "react-native": "^0.14.2",
     "react-native-material-kit": "^0.2.2"
   }

Examples/Simple/src/AnimatedHelloGL.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -38,12 +39,12 @@ class HelloGL extends React.Component {
   render () {
     const { width, height } = this.props;
     const { value } = this.state;
-    return <GL.View
+    return <Surface width={width} height={height}>
+      <GL.Node
         shader={shaders.helloGL}
-      width={width}
-      height={height}
         uniforms={{ value }}
-    />;
+      />
+    </Surface>;
   }
 }
 

Examples/Simple/src/Blur.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 const Blur1D = require("./Blur1D");
 
 module.exports = GL.createComponent(({ width, height, factor, children }) =>

Examples/Simple/src/Blur1D.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   blur1D: {
@@ -35,7 +35,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, direction, children }) =>
-    <GL.View
+    <GL.Node
       shader={shaders.blur1D}
       width={width}
       height={height}
@@ -44,7 +44,7 @@ module.exports = GL.createComponent(
         resolution: [ width, height ]
       }}>
       <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.View>
+    </GL.Node>
 , {
   displayName: "Blur1D"
 });

Examples/Simple/src/HelloGL.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -14,11 +14,7 @@ void main () { // This function is called FOR EACH PIXEL
   }
 });
 
-module.exports = GL.createComponent(({ width, height }) =>
-  <GL.View
-    shader={shaders.helloGL}
-    width={width}
-    height={height}
-  />,
+module.exports = GL.createComponent(() =>
+  <GL.Node shader={shaders.helloGL} />,
   { displayName: "HelloGL" }
 );

Examples/Simple/src/HueRotate.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   hueRotate: {
@@ -26,10 +26,10 @@ void main() {
 
 module.exports = GL.createComponent(
   ({ hue, children, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.hueRotate}
     uniforms={{ hue }}>
     <GL.Uniform name="tex">{children}</GL.Uniform>
-  </GL.View>
+  </GL.Node>
 , { displayName: "HueRotate" });

Examples/Simple/src/OneFingerResponse.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   oneFingerResponse: {
@@ -55,7 +56,7 @@ class OneFingerResponse extends React.Component {
   render () {
     const { width, height } = this.props;
     const { pressed, position } = this.state;
-    return <GL.View
+    return <Surface
       onStartShouldSetResponderCapture={() => true}
       onMoveShouldSetResponderCapture={() => true}
       onResponderTerminationRequest={() => false}
@@ -64,10 +65,12 @@ class OneFingerResponse extends React.Component {
       onResponderRelease={this.onTouchEnd}
       onResponderTerminate={this.onTouchEnd}
       width={width}
-      height={height}
+      height={height}>
+      <GL.Node
         shader={shaders.oneFingerResponse}
         uniforms={{ pressed, position }}
-    />;
+      />
+    </Surface>;
   }
 }
 

Examples/Simple/src/PieProgress.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   pieProgress: {
@@ -41,11 +41,8 @@ module.exports = GL.createComponent(
     colorOutside,
     radius
   }) =>
-  <GL.View
-    width={width}
-    height={height}
+  <GL.Node
     shader={shaders.pieProgress}
-    opaque={false}
     uniforms={{
       dim: [ width, height ],
       progress,

Examples/Simple/src/Saturation.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   saturation: {
@@ -21,7 +21,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ factor, image, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.saturation}
     uniforms={{ factor, image }}

Examples/Simple/src/index.js

+require("gl-react-core/react-native");
+
 const React = require("react-native");
 const {
   StyleSheet,
@@ -8,6 +10,8 @@ const {
   Component,
 } = React;
 
+const { Surface } = require("gl-react-native");
+
 const {
   mdl: {
     Progress,
@@ -109,7 +113,9 @@ class Simple extends Component {
 
       <Demos onChange={current => this.setState({ current })} value={current}>
         <Demo title="1. Hello GL">
-          <HelloGL width={256} height={171} ref="helloGL" />
+          <Surface width={256} height={171} ref="helloGL">
+            <HelloGL />
+          </Surface>
           <View style={{ paddingTop: 20, alignItems: "center", flexDirection: "row" }}>
             <Button onPress={this.onCapture1}>captureFrame()</Button>
             {captured && <Image source={{ uri:captured }} style={{ marginLeft: 20, width: 51, height: 34 }} />}
@@ -117,12 +123,12 @@ class Simple extends Component {
         </Demo>
 
         <Demo title="2. Saturate an Image">
+          <Surface width={256} height={171}>
             <Saturation
-              width={256}
-              height={171}
               factor={saturationFactor}
               image={{ uri: "http://i.imgur.com/iPKTONG.jpg" }}
             />
+          </Surface>
           <Slider
             max={8}
             onChange={saturationFactor => this.setState({ saturationFactor })}
@@ -130,15 +136,13 @@ class Simple extends Component {
         </Demo>
 
         <Demo id={3} current={current} title="3. Hue Rotate on Text+Image">
-          <HueRotate
-            autoRedraw
-            width={256}
-            height={180}
-            hue={hue}>
+          <Surface autoRedraw width={256} height={180}>
+            <HueRotate hue={hue}>
               <Image style={{ width: 256, height: 244 }} source={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }}/>
               <Text style={styles.demoText1}>Throw me to the wolves</Text>
               <Text style={styles.demoText2}>{text}</Text>
             </HueRotate>
+          </Surface>
           <Slider
             max={2 * Math.PI}
             onChange={hue => this.setState({ hue })}
@@ -161,11 +165,9 @@ class Simple extends Component {
             }}
             source={{ uri: "http://i.imgur.com/qM9BHCy.jpg" }}/>
             <View style={{ position: "absolute", top: 0, left: 0 }}>
-              <PieProgress
-                width={256}
-                height={180}
-                progress={progress}
-              />
+              <Surface width={256} height={180} opaque={false}>
+                <PieProgress progress={progress} width={256} height={180} />
+              </Surface>
             </View>
           </View>
           <Slider
@@ -189,22 +191,24 @@ class Simple extends Component {
         </Demo>
 
         <Demo id={7} current={current} title="7. Blur (2-pass)">
-          <Blur preload width={256} height={180} factor={factor + 1}>
+          <Surface preload width={256} height={180}>
+            <Blur width={256} height={180} factor={factor + 1}>
               http://i.imgur.com/3On9QEu.jpg
             </Blur>
+          </Surface>
           <Slider
             max={2}
             onChange={factor => this.setState({ factor })} />
         </Demo>
 
         <Demo id={8} current={current} title="8. Blur+Hue over UI">
-          <HueRotate
-            hue={-switch1 + 2 * switch2 + 4 * switch3}
+          <Surface
             width={256}
             height={160}
             autoRedraw
             eventsThrough
             visibleContent>
+            <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
               <Blur
                 width={256}
                 height={160}
@@ -230,6 +234,7 @@ class Simple extends Component {
                 </Blur>
               </Blur>
             </HueRotate>
+          </Surface>
         </Demo>
 
         <Demo id={9} current={current} title="9. Texture from array">

Examples/Tests/package.json

@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
-    "react-native": "^0.15.0"
+    "gl-react-core": "file:../../../gl-react-core",
+    "react-native": "^0.14.2"
   },
   "devDependencies": {
     "react-native-cli": "^0.1.7"

Examples/Tests/src/Add.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   add: {
@@ -23,7 +23,7 @@ module.exports = GL.createComponent(
   ({ width, height, children }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Add");
     const [t1, t2] = children;
-    return <GL.View
+    return <GL.Node
       shader={shaders.add}
       width={width}
       height={height}

Examples/Tests/src/Blur.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 const {
   PropTypes
 } = React;

Examples/Tests/src/Blur1D.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const {
   PropTypes
@@ -34,7 +34,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, direction, children }) =>
-    <GL.View
+    <GL.Node
       shader={shaders.blur1D}
       width={width}
       height={height}
@@ -43,7 +43,7 @@ module.exports = GL.createComponent(
         resolution: [ width, height ]
       }}>
       <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.View>
+    </GL.Node>
 , {
   displayName: "Blur1D"
 });

Examples/Tests/src/Copy.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   Copy: {
@@ -23,7 +23,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, children: t, last, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.Copy}
     width={width}

Examples/Tests/src/Display2.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   display2: {
@@ -27,7 +27,7 @@ module.exports = GL.createComponent(
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Display2");
     let [t1, t2] = children;
     if (vertical) [t1,t2]=[t2,t1]; // just because webgl y's is reversed
-    return <GL.View
+    return <GL.Node
       {...rest}
       shader={shaders.display2}
       width={width}

Examples/Tests/src/HelloGL.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -16,7 +16,7 @@ void main () { // This function is called FOR EACH PIXEL
 
 module.exports = GL.createComponent(
   ({ width, height }) =>
-  <GL.View
+  <GL.Node
     shader={shaders.helloGL}
     width={width}
     height={height}

Examples/Tests/src/Layer.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   layer: {
@@ -23,7 +23,7 @@ module.exports = GL.createComponent(
   ({ children, ...rest }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
     const [t1, t2] = children;
-    return <GL.View
+    return <GL.Node
       {...rest}
       shader={shaders.layer}
       uniforms={{ t1, t2 }}

Examples/Tests/src/Multiply.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   multiply: {
@@ -23,7 +23,7 @@ module.exports = GL.createComponent(
   ({ width, height, children }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Multiply");
     const [t1, t2] = children;
-    return <GL.View
+    return <GL.Node
       shader={shaders.multiply}
       width={width}
       height={height}

Examples/Tests/src/TransparentNonPremultiplied.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   TransparentNonPremultiplied: {
@@ -18,7 +18,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ children: t, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     opaque={false}
     shader={shaders.TransparentNonPremultiplied}

Examples/Tests/src/index.js

+require("gl-react-core/react-native");
 const React = require("react-native");
 const {
-  AppRegistry,
   Text,
   View,
   ScrollView,
   Image,
 } = React;
-
+const { Surface } = require("gl-react-native");
 const Blur = require("./Blur");
 const Add = require("./Add");
 const Multiply = require("./Multiply");
@@ -54,7 +54,7 @@ class Tests extends React.Component {
         </Text>)}
       </View>;
 
-    const img = "http://i.imgur.com/zJIxPEo.jpg?t="+Date.now();
+    const img = "http://i.imgur.com/zJIxPEo.jpg";
 
     const blurredImage =
       <Blur factor={4} passes={6} width={200} height={200}>
@@ -68,7 +68,8 @@ class Tests extends React.Component {
       </Layer>;
 
     return <ScrollView style={{ backgroundColor: "#000" }}>
-      <Display2 width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
+      <Surface width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
+        <Display2>
           <Add width={viewportW/2} height={viewportH/2}>
             {txt}
             {helloGL}
@@ -83,7 +84,7 @@ class Tests extends React.Component {
             {blurredImage}
           </Display2>
         </Display2>
-
+      </Surface>
 
       <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
 
@@ -94,34 +95,41 @@ class Tests extends React.Component {
 
         <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} last>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               http://i.imgur.com/mp79p5T.png
             </Copy>
+          </Surface>
         </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} last>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               <Copy>
                 http://i.imgur.com/mp79p5T.png
               </Copy>
             </Copy>
+          </Surface>
         </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} last>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               <Copy>
                 <Copy>
                   http://i.imgur.com/mp79p5T.png
                 </Copy>
               </Copy>
             </Copy>
+          </Surface>
         </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} last>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               <Copy>
                 <Copy>
                   <Copy>
@@ -130,13 +138,15 @@ class Tests extends React.Component {
                 </Copy>
               </Copy>
             </Copy>
+          </Surface>
         </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}>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
             <Copy last>
               <Copy>
+                <Copy>
                   <Copy>
                     <Copy>
                       http://i.imgur.com/mp79p5T.png
@@ -145,15 +155,18 @@ class Tests extends React.Component {
                 </Copy>
               </Copy>
             </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
           <NativeLayer>
             <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
                 <HelloGL />
               </TransparentNonPremultiplied>
+            </Surface>
           </NativeLayer>
         </NativeLayer>
 
@@ -161,11 +174,13 @@ class Tests extends React.Component {
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
           <NativeLayer>
             <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
                 <TransparentNonPremultiplied>
                   <HelloGL />
                 </TransparentNonPremultiplied>
               </TransparentNonPremultiplied>
+            </Surface>
           </NativeLayer>
         </NativeLayer>
 
@@ -173,7 +188,8 @@ class Tests extends React.Component {
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
           <NativeLayer>
             <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
                 <Copy>
                   <TransparentNonPremultiplied>
                     <Copy>
@@ -182,22 +198,26 @@ class Tests extends React.Component {
                   </TransparentNonPremultiplied>
                 </Copy>
               </TransparentNonPremultiplied>
+            </Surface>
           </NativeLayer>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Layer width={debugSize} height={debugSize} opaque={false} premultipliedAlpha debug>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Layer>
               http://i.imgur.com/mp79p5T.png
               <TransparentNonPremultiplied>
                 <HelloGL />
               </TransparentNonPremultiplied>
             </Layer>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Layer width={debugSize} height={debugSize} opaque={false}>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Layer>
               http://i.imgur.com/mp79p5T.png
               <TransparentNonPremultiplied>
                 <Copy>
@@ -209,6 +229,7 @@ class Tests extends React.Component {
                 </Copy>
               </TransparentNonPremultiplied>
             </Layer>
+          </Surface>
         </NativeLayer>
 
       </View>